Data Grid Column

Data grid columns are the individual column components that make up the data grid. It is not independent as a component but exists as a child element of the data grid. Columns can be added using the [+] button in the upper right corner of the data grid properties.

The columns added here are datagrid columns. Data grid columns are arranged in tabular form in the data grid properties. Click on a tab element to access the properties of the corresponding datagrid column. Data grid columns are divided into the following column types. Cell input specifications change depending on the column type.

Column Type	Data Type	Cell input mood	Cell options	Display format	Value sample
Text input	string	direct input			apple
Combobox	string	single selection filterable	1. apple 2. grape 3. melon	1. apple 2. grape 3. melon	apple
Multi-Select	string(comma seperated)	multiple selection unfilterable	1. apple 2. grape 3. melon	apple, grape	apple, grape
Checkbox	boolean	check		check	true
Date Picker	string	date picker	calendar	2019/08/01	2019-08-01
Button	string			button	Edit button label

Note

• Actions can be set for data grid columns. The event is "onchange" or "onclick" depending on the column type. The Action Editor is accessed from the context menu of the data grid by selecting "Actions" "Data Grid Columns".
• Access to datagrid columns in the Action Editor is done directly by specifying the ID of the datagrid column as follows. Example: $ui.data_grid_column_id.label
• The order of the data grid columns can be changed by dragging the tabs of the data grid columns and dropping them on the destination.
• Column type"Text Input" only supports single-line data.
  Line break data is not supported.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string		Unique identifier for the column
2	Label	String		label	string		Column header label
3	Width	Number	100	width	number	100	Column width
4	Column Type	Selection 1. Text Input 2. Combobox 3. Multi-Select 4. Checkbox 5. Date Picker 6. Button	Text Input				Column input type (no action property)
5	Button Color	String Color Picker		buttonColor	string		Button color
6	Button Label Color	String Color Picker		buttonLabelColor	string		Button label color
7	Halign	Selection 1. Automatic 2. Left 3. Center 4. Right	Automatic	hAlign	string	auto	Horizontal alignment of cell content
8	Number Format	String 1. None 2. #,# 3. #,#.00	None	numberFormat		none	Number display format
9	Date Format	String 1. yyyy/MM/dd 2. MM/dd/yyyy 3. dd/MM/yyyy	yyyy/MM/dd	dateFormat		yyyy/MM/dd	Date display format
10	Editable	Boolean	ON	editable	boolean	true	Enable cell editing per column Added in v4.2.0.
10	Visibility	Boolean	ON	visibility	boolean	true	Column display state
11	Column Filter	Boolean	OFF	filter	boolean	false	Enable filter functionality
12	Footer	Selection 1. none 2. text 3. sum 4. avg 5. max 6. min 7. count	None	footer	string	none	Footer aggregation type All records bound to the data grid are included in the aggregation.
13	Footer Text	String		footerText	string		Text to display in footer
14	Options	Table format		options	string array		Selection options
15	Click Event	Selection 1. None 2. UI Script 3. Action	None				Event on click UI Script became selectable in v4.2.0.
16	Change Event	Selection 1. None 2. UI Script 3. Action	None				Event on value change UI Script became selectable in v4.2.0.

Note

• Do not define [id] as the ID of a datagrid column. [id] is a reserved word used internally in the system.
• If the data grid’s own [Editable] property is disabled, the [Editable] property of each column will also be disabled.
• To disable only specific columns, you need to configure the settings as follows:
  • Data grid itself: Enable [Editable]
  • Specific column: Disable [Editable]
• The following properties can be set by selecting a column type. The relationship between configurable properties and column types is as follows:

Property	Column type
Number format	Text input
Date format	Date picker
Options	1. Combobox 2. Multi-select
Button Color	Button
Button Label Color	Button

Note

• Footers are not calculated for non-numeric cells.
• The "Options" property that can be set and retrieved when the column type "Combobox" or "Multi-Select" is selected is in the form of a string array. [“option1”,“option2”]
• Column type "Combobox" cannot be left blank after selecting a value from the options. If no selection is required, provide an empty choice.

Event

Event name	Description	Column Type
onchange	Occurs when a cell value change is made and the cursor is moved out of the cell.	1. Text input 2. Combobox 3. Multi-select 4. Checkbox 5. Date picker
onclick	Occurs when a component in a cell is clicked.	1. Button