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.

Tips

Tips

• 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 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

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 Height	headerRowHeight	number
editable	boolean	- true - false	true
oneClickEdit	boolean	- true - false	false
pagination	boolean	- true - false	false
visibility	boolean	- true - false	true
exportToXlsxButton	boolean	- true - false	false
selection	string	- row - cell - complex - none	row
addButton	boolean	- true - false	true
deleteButton	boolean	- true - false	true
footer	boolean	- true - false	false
resizable	boolean	- true - false	false
leftSplit	number		0
pageSize	number		100
value	array of object
pageIndex	number
pagePreviousIndex	number
totalCount	number
selected	number
deleted	array of object

Tips

Tips

• 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"}]

Tips

Tips

• 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

Tips

Tips

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.

Tips

Tips

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 Properties	Action What to set in the initial display and search actions	Action What to set in the page event action	Data Grid Function Sorting	Data Grid Function Filtering	Data Grid Function Cell Editing	Data Grid Function Add Row	Data Grid Function Delete Row	Examples of usage scenarios
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