Data Grid

The data grid is the component that displays and inputs tabular data. The data grid consists of a data grid as the main body and data grid columns as column components. Data grid columns can be added/removed at will from the data grid properties.

Note

• The data grid is a component available only for desktop applications.
• When handling large numbers of records, payload limitations and client load can be significant. The system may become unstable if the number of records displayed at one time exceeds 10,000.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by actions.
2	Width	Number	565	width	number	565	Component width
3	Height	Number	230	height	number	230	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		Y coordinate position
6	Editable	Boolean	ON	editable	boolean	true	Enable/disable cell editing
7	One Click Edit	Boolean	OFF	oneClickEdit	boolean	true	Enable/disable one-click editing
8	Pagination	Boolean	OFF	pagination	boolean	false	Enable/disable pagination functionality
9	Visibility	Boolean	ON	visibility	boolean	true	Show/hide component
10	XLSX To Export	Boolean	OFF	exportToXlsxButton	boolean	false	Show/hide XLSX export button
11	Selection	Selection 1.Row 2.Cell 3.Complex 4.None	Row	selection	string	row	Selection mode setting
12	Header Adjust	Selection 1.All 2.Header 3.Data 4.Off	Off				Header auto-adjustment setting
13	Header Row Height	Number	40	headerRowHeight	number		Header row height
14	Header Font Size	Number	14	headerFontSize	number	14	Header font size
15	Header Word Wrap	Selection 1.Normal 2.Off	Off	headerWordWrap	string	Off	Header word wrap setting
16	Label Color	String Color Picker		labelColor	string		Label text color
17	Header Color	String Color Picker		headerColor	string		Header background color
18	Add Button	Boolean	ON	addButton	boolean	true	Show/hide add row button
19	Delete Button	Boolean	ON	deleteButton	boolean	true	Show/hide delete row button
20	Even Background Color	String Color Picker [Details 6]		evenBackgroundColor	string		Background color for even rows Added in "v3.3.0"
21	Odd Background Color	String Color Picker [Details 6]	#f7f7f7	oddBackgroundColor	string	#f7f7f7	Background color for odd rows Added in "v3.3.0"
22	Row Style	JSON [Details 6]	[]	rowStyle	array of object	[]	Style specification for each row Added in "v3.3.0"
23	Cell Style	JSON [Details 6]	[]	cellStyle	array of object	[]	Style specification for each cell Added in "v3.3.0"
24	Footer	Boolean	OFF	footer	boolean	false	Show/hide footer
25	Resizable	Boolean	OFF	resizable	boolean	false	Enable/disable resize functionality
26	Left Split	Number	0	leftSplit	number	0	Number of left split columns
27	Page Size	Number	100	pageSize	number	100	Number of rows displayed per page
28	Value	Table format [Detail 1]	[Detail 1]	value	array of object	[Detail 1]	Data grid value
29	Page Event	Selection 1.None 2.Action	None				Event setting for page changes
30	Page Index			pageIndex	number		Current page index
31	Page Previous Index			pagePreviousIndex	number		Previous page index
32	Total Count			totalCount	number		Total number of records
33	Selected			selected	object		Data of selected row
34	Deleted			deleted	array of object		Data of deleted rows

Note

• The "id", "pagePreviousIndex" and "selected" property cannot be set by an action.
• The [rowStyle] and [cellStyle] properties cannot be retrieved via actions.
• The cell widths are automatically adjusted when a header adjustment is specified. If Off, it can be set in the width property of the data grid column.
• Header Word Wrap setting is only enabled when Header Adjust is "Off".
  • Normal（not call back）
  • Off（not call back）
• Header word wrap can be set from actions with the following values:
  • normal
  • off
• Cells can be put into edit mode by double-clicking on them. Single-click is also possible in the settings.
• Pagination allows you to set the number of pages per page.
• When pagination is set to On, the Add Row and Delete Row buttons are not given. The row add and row delete property settings are disabled.
• If "Export To XLSX Button" is set to On, a button to export a file in XLSX format will appear at the top of the data grid.
• See "[Detail 5] Data Output from XLSX File Export" below for information on data output from XLSX file export.
• The Header Font Size setting is valid only when Header Adjust is “Off”.

[Details 1] Value

Gets and sets values for the entire table of data grid. The format of the values is an array of objects representing rows. The default status is registered as follows. Register each row from the [Add Row] button. To delete a row, click on the row to be deleted and then click the “Delete Row” button.

<DatagridID>_month	<DatagridID>_companyA	<DatagridID>_companyB	<DatagridID>_companyC	<DatagridID>_companyD
02	20	52	72	34
03	5	33	90	55
04	55	30	81	66
05	30	11	62	22

When handling data in an action, data can be displayed on the data grid by setting the value (value) in the form of an array of objects, as shown in the following example. Similarly, the value (value) contains the current display data state of the data grid in the form of an array of objects.

[
  {
    "month": "02",
    "companyA": 20,
    "companyB": 52,
    "companyC": 72,
    "companyD": 34,
    "id": "u1677456694544"
  },
  {
    "month": "03",
    "companyA": 5,
    "companyB": 33,
    "companyC": 90,
    "companyD": 55,
    "id": "u1677456694545"
  },
  {
    "month": "04",
    "companyA": 55,
    "companyB": 30,
    "companyC": 81,
    "companyD": 66,
    "id": "u1677456694546"
  },
  {
    "month": "05",
    "companyA": 30,
    "companyB": 11,
    "companyC": 62,
    "companyD": 22,
    "id": "u1677456694547"
  }
]

Note

• The row data identifier (id) is data used internally in the system. Do not edit the row data identifier (id).
• When the order of the data grid columns is changed, there is the following difference in the value (value) displayed on the property screen between the data registered before the change and the data registered after the change. However, the data displayed in the data grid is not affected, only the order of the object keys is different.
  • For data that was registered before the change, the order of the object’s keys will be in the order they were in before the change.
  • For newly added data after the change, the order of the object’s keys will be in the order after the change.
• If you add a row or update a cell value on the data grid, you can get the row status ($status) property by value (value). The $status property value is as follows
  • If you add a line: added
  • If the row is updated: updated
• The row status ($status) property is status data used internally. Do not edit the row status ($status).

[Details 2]When updating from actions outside the data grid

If you want to collectively update changes in the data grid from an external button without setting an action for each data grid column, the method differs between “Add Row/Update Row” and “Delete Row”.

For adding or updating rows
For adding and updating rows, use the value (value) property. It is also possible to set up an action on a datagrid column and send a request to update it each time a cell is edited, but this method will consume fewer requests. Each object of value ($value) represents row data, but it also carries information indicating the identifier (id) and status ($status) of the row data.

Operation	$status value
row addition	added
row update	updated

Note

The row data identifier (id) is data used internally in the system. Do not edit the row data identifier (id).

In case of line deletion
For row deletion, use the delete value (deleted) property. The deleted value (deleted) property allows you to retrieve the row data where the row deletion took place. Data can be retrieved by specifying something like $ui.data_grid.deleted.

Note

• If a row is deleted from outside the data grid, the deletion value (deleted) is not reflected.
• The deletion value (deleted) property stacks the objects in the deleted row. Since the data will continue to grow unless explicitly cleared, it is necessary to assign null or an empty array[] to the deleted value property to clear it. Example）$ui.data_grid.deleted=null or $ui.data_grid.deleted=[]

[Details 3]When updating from a datagrid column action

In a datagrid column action, the row where the event occurs can be retrieved by the selected property. The selection value (selected) is a property that allows you to get the row data that is selected in the data grid. Depending on the column type, datagrid column events can be change events (onchange) or click events (onclick), both of which can be retrieved from the row object via the selected property.

[Details 4]Classification by data loading and display

The classification of data loads, characteristics, settings to make each classification and the data grid features available at each classification are described below.

Type	Characteristic	UI Dialog	Action		Data Grid Function					Examples of usage scenarios
		Properties	What to set in the initial display and search actions	What to set in the page event action	Sorting	Filtering	Cell Editing	Add Row	Delete Row
Bulk Loading	Collect all data and display all	Pagination: Off Page Event:None	value=All data to be displayed	-	○	○	○	○	○	If you want to add or delete rows
Pagination (Bulk Loading)	Collect data and display it page by page	Pagination: on Page Event:None	value = All data to be displayed	-	○	○	○	-	-	When there are many lines to display but scrolling is to be avoided as much as possible
Pagination (Lazy Loading)	Get data page by page and display page by page	Pagination: on Page Event:Action	value=data for 1 page pagetotalCount= number of rows of all data to display	value= data for 1 page	-	-	-	-	-	To reduce the amount of data exchanged in an action

Warnings on Pagination (Lazy Loading)

• When a loaded page is redisplayed, no action is performed.
• If the value set in the action is as follows, the data will be treated as the first page of the new list.
  • When pageIndex is set to 0 and value is set to new data
  • If totalCount is changed

[Details 5] Data Output from XLSX File Export

Classification of data loading “Bulk Loading” and “Pagination” (Bulk Loading)

• All data bound to the data grid will be output.
• If data is extracted with a filter, the extracted data will be output.
• If a footer is set, footer information is output for all data output at the bottom.

For data loading classification “Pagination”(Lazy Loading)

• A button to export a file in XLSX format is displayed, but the output data is not supported.

[Details 6] Data Grid Style

The following properties can be used to apply styles to even rows, odd rows, and individual rows and cells.
In combination with actions, you can implement behavior such as changing styles only for specific conditions.

• "Even Background Color"
• "Odd Background Color"
• "Row Style"
• "Cell Style"

How to set even/odd background colors

Even background color/Odd background color specify the background color as a string or using the color picker.
When setting from an action, set the background color as a string to the "evenBackgroundColor"/"oddBackgroundColor" action properties.

$ui.<DataGridID>.evenBackgroundColor = "red";
$ui.<DataGridID>.oddBackgroundColor = "#039BE5"

Note

The first row is row 0 and is treated as an even row.

How to set row style/cell style

Row style/Cell style are set in JSON format as follows:

Row style:

[
  {"row": "0", "backgroundColor": "blue"},
  {"row": "1", "backgroundColor": "#ffffffff"}
]

Cell style:

[
  {"row": "0", "column": "month", "backgroundColor": "blue", "color": "white"},
  {"row": "1", "column": "companyA", "backgroundColor": "#ffffff", "color": "#039BE5"}
]

When setting from an action, set styles as an array of objects to the "rowStyle"/"cellStyle" action properties.

$ui.<DataGridID>.rowStyle = [
  {row: 0, backgroundColor: "blue"},
  {row: 1, backgroundColor: "#ffffffff"}
];

$ui.<DataGridID>.cellStyle = [
  { row: 0, column: "month", backgroundColor: "blue", color: "white"},
  { row: 1, column: "companyA", backgroundColor: "#ffffff", color: "#039BE5"}
]

Object properties are as follows:

Setting Target	Object Property	Description
rowStyle	row	1. Specify the row to apply style to as a number or string 2. The first row is treated as row 0
	backgroundColor	1. Background color of the data grid row 2. Specify by color name or 6-digit (8-digit) code
cellStyle	row	1. Specify the row of the cell to apply style to as a number or string 2. The first row is treated as row 0
	column	1. Specify the column of the cell to apply style to by column ID
	color	1. Text color of the data grid cell 2. Specify by color name or 6-digit (8-digit) code
	backgroundColor	1. Background color of the data grid cell 2. Specify by color name or 6-digit (8-digit) code

Note

• The display priority for each style is as follows:
  1. Cell style
  2. Row style
  3. Even/Odd row background color
• Styles other than color and backgroundColor are not supported.

How to clear set styles

Setting Target	Value to Set	Result
evenBackgroundColor and oddBackgroundColor	One of the following values: 1. null 2. ""	evenBackgroundColor and oddBackgroundColor are cleared, and the even and odd row background colors set in the data grid are removed.
rowStyle and cellStyle	One of the following values: 1. [] 2. null 3. ""	rowStyle and cellStyle are cleared, and the row and cell styles set in the data grid are removed.

Event

None