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.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Header Color	string color picker		#f7f7f7
Width	number		565
Height	number		230
X	number
Y	number
Header Adjustment	Select	All Header Data Off	Off
Header Wrap	select	Normal Off	Off
Header Font Size	Number		14
Header Row Height	number		40
Editable	boolean	on off	on
One Click Edit	boolean	on off	off
Pagination	boolean	on off	off
Visibility	boolean	on off	on
Export To XlSX Button	boolean	on off	off
Select	select	ROW CELL COMPLEX NONE	ROW
Add Row	boolean	on off	on
Delete Row	boolean	on off	on
Footer	boolean	on off	off
Resizable	boolean	on off	off
Left Split	number		0
Page Size	number		100
Value	table[details 1]
Page Event	Select	NONE ACTION	NONE
Page Index
Page Previous Index
Total Count
Selected
Deleted

Action

Item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Header Color	headerColor	string
Width	width	number		565
Height	height	number		230
X	x	number
Y	y	number
Header Adjustment
Header Word Wrap	headerWordWrap	string	off normal	Off
Header Font Size	headerFontSize	number		14
Header Row Height	headerRowHeight	number
Editable	editable	boolean	true false	true
One Click Edit	oneClickEdit	boolean	true false	false
Pagination	pagination	boolean	true false	false
Visibility	visibility	boolean	true false	true
Export To XlSX Button	exportToXlsxButton	boolean	true false	false
Select	selection	string	row cell complex none	row
Add Row	addButton	boolean	true false	true
Delete Row	deleteButton	boolean	true false	true
Footer	footer	boolean	true false	false
Resizable	resizable	boolean	true false	false
Left Split	leftSplit	number		0
Page Size	pageSize	number		100
Value	value	array of object
Page Event
Page Index	pageIndex	number
Page Previous Index	pagePreviousIndex	number
Total Count	totalCount	number
Selected	selected	number
Deleted	deleted	array of object

Note

• The "id", "pagePreviousIndex"and "selected" property cannot be set by an action.
• Properties related to headers are not available in the action.
• 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 Wrap setting is only enabled when Header Adjust is "Off".
  • Normal（not call back）
  • Off（not call back）
• 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

The deleted 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.

Event

None