Grid Examples

Create grid

This is an example of creating a grid.

var grid_1 = new cpr.controls.Grid("grd1");
grid_1.init({
	dataSet: app.lookup("ds1"),
	// hScroll: "auto",			// set horizontal scroll style= "auto" or "scroll" or "hidden"
	// vScroll: "auto",			// Sets vertical scroll style= "auto" or "scroll" or "hidden"
	// wheelRowCount: 5,		// Number of rows scrolled at one time with the wheel
	columns: [ // Width value for each column.
		{ width: "30px" }, { width: "30px" }, { width: "30px" }
	],
	header: { // Header area configuration information.
		rows:
			[{height:"30px"},{height:"20px"}],	// Height of each header row. Multiple lines are indicated using commas (,). [Unit: px]
		cells: [ // Cell configuration information inside the header area.
			// rowIndex: Row index where the cell is located. (0 base)
			// colIndex: Column index where the corresponding cell is located. (0 base)
			// rowSpan: The number of rows that the cell will merge vertically. (default : 1)
			// colSpan: The number of columns that the corresponding cell will merge horizontally. (default: 1)
			// text: (Optional) Text to be displayed in the corresponding header cell.
			// sortcolumnName: (Optional) Name of the dataset column to be sorted when the corresponding header cell is clicked.
			// visible: (Optional) Sets the visibility of the entire column where the corresponding header cell is located. (default: true)
			{ 
				constraint : {  rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 1 }, 
				configurator : function(cell){
					cell.text = "A";
					cell.sortColumnName = "a";
					cell.visible = false;
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 2 }, 
				configurator : function(cell){
					cell.text = "B + C";
					cell.visible = true;
				}
			},{
				constraint : {  rowIndex: 1, colIndex: 1, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.text = "B";
					cell.sortColumnName = "b";
					cell.visible = true;
				}
			},{
				constraint : {  rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.text = "C";
					cell.sortColumnName = "c";
					cell.visible = true;
				}
			}
		]
	},
	detail: {			// detail area configuration information.
		rows: [{height:"20px"}],	// Height of each detail row. Multiple lines are indicated using commas (,). [Unit: px]
		cells: [			// Cell configuration information inside the detail area.
			// columnName: (Optional) Name of the dataset column to be connected to the corresponding detail cell.
			// suppressible: (Optional) Hides text in cells that match the value of the immediately preceding row. (provides cell merging effect) (default: false)
			// suppressref: (Optional) Set other columns to affect the suppressible (cell text hiding) effect.
			// control: (Optional) UIControl to be placed in the corresponding detail cell.
			{
				constraint : {  rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.columnName = "a";
					cell.suppressible = "true";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.columnName = "b";
					cell.suppressible = "true";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.columnName = "c";
					cell.control = new cpr.controls.InputBox(); 
				}
			}
		]
	},
	footer: {			// (Optional) Footer area configuration information.
		rows: [{height:"20px"}],	// Height of each footer row. Multiple lines are indicated using commas (,). [Unit: px]
		cells: [			// Cell configuration information inside the footer area.
			// expr: (Optional) Text or expression to be displayed in the corresponding footer cell.
			{
				constraint : {  rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.expr = "footer_a";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.expr = "footer_b";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.expr = "getSum('c')";
				}
			}
		]
	}
});

Relevant APIs: init , Grid API 전체보기

Create a row group

You can group columns by criteria within the grid.

Create

component

components	Description	Related API
group	You can add a group of grids. Multiple groups can be created by adding groups with higher or lower DEPTH within the group. The higher the group is placed on the grid editor, the higher the group. You can.	collapsible
header	The area consisting of column headings.	header
footer	This is the area shown at the bottom of the grid. You can summarize the data in the grid through exprssion.	footer

Property

Property name	Description
activate	Indicates whether the group is active. It can be changed with Grid.setActivateRowGroup.
groupCondition	Indicates the condition of a group.
startCollapse	If the grid control property collapsible=true, whether to initially collapse the group.

This is an example of creating a group in a grid.

var grid_1 = new cpr.controls.Grid("grd1");
grid_1.init({
	dataSet: app.lookup("ds1"),
	columns: [ 
		{ width: "30px" }, { width: "30px" }, { width: "30px" }
	],
	header: { 
		rows: 
			[{height:"30px"},{height:"20px"}],
		cells: [ 
			{ 
				constraint : {  rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 1 }, 
				configurator : function(cell){
					cell.text = "A";
					cell.sortColumnName = "a";
					cell.visible = false;
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 2 }, 
				configurator : function(cell){
					cell.text = "B + C";
					cell.visible = true;
				}
			},{
				constraint : {  rowIndex: 1, colIndex: 1, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.text = "B";
					cell.sortColumnName = "b";
					cell.visible = true;
				}
			},{
				constraint : {  rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.text = "C";
					cell.sortColumnName = "c";
					cell.visible = true;
				}
			}
		]
	},
	detail: {
		rows: [{height:"20px"}],	
		cells: [
			{
				constraint : {  rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.columnName = "a";
					cell.suppressible = "true";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.columnName = "b";
					cell.suppressible = "true";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.columnName = "c";
					cell.control = new cpr.controls.InputBox(); 
				}
			}
		]
	},
	footer: {
		rows: [{height:"20px"}],
		cells: [
			{
				constraint : {  rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.expr = "footer_a";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.expr = "footer_b";
				}
			},{
				constraint : {  rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 }, 
				configurator : function(cell){
					cell.expr = "getSum('c')";
				}
			}
		]
	},
	rowGroup: [{
		groupCondition: "group1",
		gheader: {
			rows: [
				{height: "30px"}
			], 
			cells: [
				{
					constraint: { rowIndex: 0, colIndex: 0, rowSpan: 0, colSpan: 0},
					configurator: function(cell){
						cell.tooltip = "gHeader";
					}
				}
			] 
		},
		gfooter: {
			rows: [
				{height: "20px"}
			],
			cells: [
				{
					constraint: { rowIndex: 0, colIndex: 0, rowSpan: 0, colSpan: 0},
					configurator: function(cell){
						cell.tooltip = "gFooter";
					}
				}
			]
		}
	}]
});

Relevant APIs: init , Grid API 전체보기

Add/Edit/Delete row

Grids and datasets are connected, so you can add, edit, or delete rows through the grid.

var grid = app. lookup("grd1");

// Add a new row to the third row of the grid.
var insertRow = grid. insertRow(1, true);

// You can use updateRow to update the data of the new row at once.
grid.updateRow(insertRow.getIndex(), {"A": "newA", "B": "newB", "C": "newC", "D": "newD"});
// Alternatively, you can use setValue to modify the data directly on the new row.
insertRow.setValue("A", "modifyA");

// Delete the first row of the grid.
grid.deleteRow(0);

// Get the value of column C in the first row of the grid.
alert(grid.getCellValue(0, "C"));

Relevant APIs: insertRow , updateRow , deleteRow , getCellValue , GridRow.setValue , GridRow API 전체보기 , Grid API 전체보기

Sort

The grid can be sorted using the column names of the dataset connected to the grid.

Write as below. In case of ascending order, "asc" can be omitted.
ascending order: [column name] (asc)
descending order: [column name] desc

var grid = app. lookup("grd1");
	
/* Sort */
// Sort grid C column in descending order.
grid.sort("C desc");
// Check the registered sorting information.
alert(grid. getSort());
// Remove the registered sort.
grid. clearSort();
// Check if it was removed normally.
alert(grid. getSort());

/* Multi-sort */
// Sort grid column C in descending order and column A in ascending order.
grid.sort("C desc, A");
// Check the registered sorting information.
alert(grid.getSort());

Relevant APIs: sort , getSort , clearSort , Grid API 전체보기

Filter

The grid can be filtered using the column information of the dataset connected to the grid.

var grid = app. lookup("grd1");
	
/* filter */
// Filter the rows where the value of column D of the grid is greater than 30.
grid.filter("D >= 30");
// Check the registered filtering information.
alert(grid. getFilter());
// Remove registered filtering.
grid. clearFilter();

// Filter rows ending in 'A' for values ​​in column A of the grid.
grid.filter("A $= 'A'");
alert(grid. getFilter());
grid. clearFilter();

/* Multiple filters */
// Filters rows whose value in column A of the grid ends in 'A' and whose value in column D is greater than 30.
grid.filter("A $= 'A' && D >= 30");
alert(grid.getFilter());
		

Relevant APIs: filter , getFilter , clearFilter , Grid API 전체보기

Find rows matching the criteria

The grid can find rows that match the criteria.

var grid = app. lookup("grd1");
	
// Find only one row where the value of column D of the grid is greater than 30.
var findRow = grid.findFirstRow("D >= 30");
// Check the index of the search result row.
alert(findRow.getIndex());

// Find all rows where the value of column D of the grid is greater than 30.
var findRows = grid. findAllRow("D >= 30");
// Check the size of the row array, which is the search result.
alert(findRows.length);

Relevant APIs: findFirstRow , GridRow.getIndex , findAllRow , GridRow API 전체보기 , Grid API 전체보기

Select row

You can change the selection unit of the grid, get the currently selected row or change the selected row.

var grid = app. lookup("grd1");

/* If the properties related to the selection are changed as shown below, the current selection is initialized. */
// Change the grid selection unit to row.
grid.selectionUnit = "row";
// Change to grid multiple selection mode.
grid.selectionMulti = "multi";

// Get the currently selected row index array.
var rowIndices = grid. getSelectedRowIndices();
alert(rowIndices. length);

// Get the currently selected row.
var selectedRow = grid. getSelectedRow();
// Get the value of column 'A' of the selected row.
alert(selectedRow. getValue("A"));

// Select the second row of the grid.
grid. selectRows([1]);
// Or select the second row of the grid as shown below.
grid.select([{"rowIndex": 2}]);

// Remove all selections.
grid.clearSelection();

Relevant APIs: selectionUnit , selectionMulti , getSelectedRowIndices , getSelectedRow , selectRows , select , clearSelection , GridRow.getValue , GridRow API 전체보기 , Grid API 전체보기

Switch to edit mode

Grid rows have view mode and edit mode, and the mode can be changed through API.

var grid = app. lookup("grd1");

// Set the second row of the grid to edit mode.
grid.setEditRowIndex(1);
// Move the focus to the third cell in the second row of the grid.
grid. focusCell(1, 2);
// Get the index of the row in edit mode in the current grid.
alert(grid. getEditRowIndex());

// Cancel the edit mode of the grid.
// When edit mode is cancelled, if there is a row currently in edit mode, the corresponding row is changed to selection mode.
grid. setEditRowIndex(-1);
// Check if the current grid is in editing state.
alert(grid.isEditing());

Relevant APIs: setEditRowIndex , focusCell , getEditRowIndex , isEditing , Grid API 전체보기

Use checkbox

Place an actual checkbox in the grid header, and use columnType='checkbox' in detail to select a row.

/* Header Makes all check boxes in the detail area select or deselect according to the check value of the check box. */

// Add value-change event to header checkbox.
function onCbx1ValueChange(/* cpr.events.CValueChangeEvent */ e){
	var cbx1 = e.control;
	var grid = app. lookup("grd1");
	if (cbx1.checked) { // checked
		grid.checkAllRow();
	} else { // uncheck
		grid.clearAllCheck();
	}
}

// ...

/* Set/get checkbox check in detail */

var grid = app. lookup("grd1");
	
// Check the check boxes in the 1st and 4th rows of the grid.
grid.setCheckRowIndex(0, true);
grid. setCheckRowIndex(3, true);

// Check if the 4th row is checked.
alert(grid. isCheckedRow(3));
// Get the currently checked row index array.
var checkRowIndices = grid.getCheckRowIndices();
alert(checkRowIndices.length);

Relevant APIs: checked , checkAllRow , clearAllCheck , setCheckRowIndex , isCheckedRow , getCheckRowIndices , Grid API 전체보기

Apply gridfixed

It is possible to fix header cells on the left and right sides of the grid. If the cell to be frozen is merged by colSpan, it is included and frozen.

It is possible to fix the top and bottom of the grid detail area by row. In the case of row fixation, only the height of the fixed region can be set initially, and the number of rows to be fixed can be set dynamically.

var grid = app. lookup("grd1");

// Set the horizontal size of the left frame lock to 100px and the number of fixed cells to 2.
grid. leftSplitWidth = 100;
grid. leftSplit = 2;

// Set the horizontal size of the right frame lock to 100px and the number of fixed cells to 1.
grid.rightSplitWidth = 100;
grid. rightSplit = 1;

// Fix the row at the top of the detail area.
// Set the fixed height to 50px and the number of fixed rows to 2.
// For topSplit, only dynamic settings are possible.
grid.topSplitHeight = 50;
grid. topSplit = 2;

// Fix the row at the bottom of the detail area.
// Set the fixed height to 50px and the number of fixed rows to 1.
// For bottomSplit, only dynamic settings are possible.
grid.bottomSplitHeight = 50;
grid.bottomSplit = 1;

Relevant APIs: leftSplitWidth , leftSplit , rightSplitWidth , rightSplit , topSplitHeight , topSplit , bottomSplitHeight , bottomSplit , Grid API 전체보기

Move column

You can move grid columns. When cells are merged by rowSpan and colSpan, they are moved to one column.

var grid = app. lookup("grd1");
	
// Set the grid header to be movable.
grid. columnMovable = true;

// Move the 4th column of the grid before the 2nd column.
grid. moveColumn(3, 1);
// Move the third column of the grid after the fourth column.
grid.moveColumn(2, 4, false);

Relevant APIs: columnMovable , moveColumn , Grid API 전체보기

Change column size

You can change the grid column size.

var grid = app. lookup("grd1");

// Set the size of all headers in the grid to be adjustable.
grid.resizableColumns = "all";

// Set the width of the second column of the grid to 200px.
grid.resizeColumn(1, "200px");
// Set the width of the third column of the grid to 150px.
grid.resizeColumn(2, "150px");

Relevant APIs: resizableColumns , resizeColumn , Grid API 전체보기

Add/remove dynamic column

You can dynamically add or delete columns to the grid.

var grid = app. lookup("grd1");

// Add a regular column with no controls placed on the grid.
grid. addColumn({
	columnLayout: [{
		width: "100px"
	}],
	header: [{
		constraint: {
			rowIndex: 0,
			colIndex : 5
		},
		configurator: function(cell){
			cell.text = "E";
		}
	}],
	detail: [{
		constraint: {
			rowIndex: 0,
			colIndex : 5
		},
		configurator: function(cell){
			cell.columnName = "E";
		}
	}]
});

// Add the inputbox column to the grid.
grid. addColumn({
	columnLayout: [{
		width: "100px"
	}],
	header : [{
		constraint: {
			rowIndex: 0,
			colIndex : 6
		},
		configurator: function(cell){
			cell.text = "F";
		}
	}],
	// Creates a column in which the inputBox is placed in detail.
	detail: [{
		constraint: {
			rowIndex: 0,
			colIndex : 6
		},
		configurator: function(cell){
			cell.columnName = "F";
			cell.control = (function(){
				var inputBox_1 = new cpr.controls.InputBox("ipb1");
				if(inputBox_1.isBindable("value")){
					inputBox_1.bind("value").toDataColumn("F");
				}
				return inputBox_1;
			})();
		}
	}]
});

// Add the comboBox column to the grid.
grid. addColumn({
	columnLayout: [{
		width: "100px"
	}],
	header: [{
		constraint: {
			rowIndex: 0,
			colIndex : 7
		},
		configurator: function(cell){
			cell.text = "G";
		}
	}],
	// Creates a column where comboBoxes are placed in detail.
	detail: [{
		constraint: {
			rowIndex: 0,
			colIndex : 7
		},
		configurator: function(cell){
			cell.columnName = "G";
			cell.control = (function(){
				var comboBox_1 = new cpr.controls.ComboBox("cmb1");
				if(comboBox_1.isBindable("value")){
					comboBox_1.bind("value").toDataColumn("G");
				}
				return comboBox_1;
			})();
		}
	}]
});

// Columns can be inserted at specific positions in the grid.
// For insertColumn, colIndex must be written as 0 base.
grid.insertColumn({
	columnLayout: [{
		width: "100px"
	}],
	header: [{
		constraint: {
			rowIndex: 0,
			colIndex : 0
		},
		configurator: function(cell){
			cell.text = "E";
		}
	}],
	detail: [{
		constraint: {
			rowIndex: 0,
			colIndex : 0
		},
		configurator: function(cell){
			cell.columnName = "E";
		}
	}]
}, 1, false); // Write a parameter to which position the columns created with 0 base will be added.
// As in the example, when "insertColumnt(~, 1, false)" is input, the entered column is added before the cell whose header cellIndex is 1.

// Delete the column corresponding to the second header cell in the grid.
grid.deleteColumn(1);

Relevant APIs: InputBox API 전체보기 , InputBox.isBindable , InputBox.bind , ComboBox API 전체보기 , ComboBox.isBindable , ComboBox.bind , Bind.toDataColumn , Bind API 전체보기 , addColumn , deleteColumn , Grid API 전체보기

Export to Excel

Excel export is possible by receiving data that can be exported to Excel in the grid and passing it through submission.
Only the styles specified as inline styles are applied when currently creating Excel.
requires coding to create a file with the data on the server.

var grid = app. lookup("grd1");
// Get the data with grid style applied in json format.
var exportData = grid. getExportData(true);

// Create the submission.
var submission = new cpr.protocols.Submission("sub_excelExport");

// Set the file name to be downloaded.
// When accessing the rule from the server, the export logic must be ready to be executed.
submission.action = "/export/grid.xlsx";

// Set the media type to json.
submission.mediaType = "application/json";

// Set the response type to blob.
submission.responseType = "blob";

// Set grid data as request data.
submission.setRequestObject(exportData);

// Send data.
submission.send();