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	• apple • grape • melon	• apple • grape • melon	apple
Multi-Select	string(comma seperated)	multiple selection unfilterable	• apple • grape • 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

Tips

Tips

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

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Label	string
Width	number		100
Column Type	select	Text Input Combo Box Multi-Select Checkbox Date Picker Button	Input Text
Button Color	string color picker
Button Label Color	string color picker
Horizontal Position	Select	Automatic Left Center Right	Automatic
Number Format	string	None #,#.## #,#.00	None
Date Format	string	yyyy/MM/dd MM/dd/yyyy dd/MM/yyyy	yyyy/MM/dd
Visibility	boolean	on off	on
Filter	boolean	on off	off
Footer	select	none text sum avg max min count	None
FooterText	string
Options	table
Click Event	select	NONE ACTION	NONE
Change Event	select	NONE ACTION	NONE

Action

項目	Properties	Data Type	Options	Default value
ID	id	string		automatic
Label	label	string
Width	width	number		100
Column Type	-
Button Color	buttonColor	string
Button Label Color	buttonLabelColor	string
Horizontal Position	hAlign	string	auto left center right	auto
Number Format		none #,#.## #,#.00		none
Date Format	dateFormat		yyyy/MM/dd MM/dd/yyyy dd/MM/yyyy	yyyy/MM/dd
Visibility	visibility	boolean	true false	true
Filter	filter	boolean	true false	false
Footer	footer	string	none text sum avg max min count	none
FooterText	footerText	string
Options	options	string array
Click Event	-
Change Event	-

Tips

Tips

• Do not define [id] as the ID of a datagrid column. [id] is a reserved word used internally in the system.
• 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	• Combobox • Multi-select
Button Color	Button
Button Label Color	Button

Tips

• Footers are not calculated for non-numeric cells.
• The "Options" property that can be set and retrieved when the column type "Combo Box" or "Multi-Select" is selected is in the form of a string array. [“option1”,“option2”]
• Column type "Combo Box" 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.	• Text input • Combobox • Multi-select • Checkbox • Date picker
onclick	Occurs when a component in a cell is clicked.	• Push button