Custom Grid

The Custom Grid is a component that allows you to add and customize grid item components as grid items.
Actions from added components can also be executed.
This component was added in v3.4.0.

Note

• When handling large amounts of records, payload limitations and client load can increase.
• The following components can be added:

No	List Item Component
1	Text Field
2	Text Area
3	Number Field
4	Big Number
5	Search Field
6	Password
7	Select
8	Combobox
9	Date Picker
10	Date Time Picker
11	Time Picker
12	Radio Button
13	Radio Button Group
14	Checkbox
15	Checkbox Group
16	Switch
17	Rating
18	Slider
19	Button
20	Typography
21	Rich Text
22	Image
23	External Resource
24	Link
25	Box
26	Divider

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-set	id	string	Auto-set	The [id] property cannot be set by actions.
2	Width	String	672 390 [Mobile]	width	string	672 390 [Mobile]	Component width
3	Height	String	672 570 [Mobile]	height	string	672 570 [Mobile]	Component height
4	X	String		x	string		X coordinate position
5	Y	String		y	string		Y coordinate position
6	Top	Number	10	paddingTop	number	10	Top padding between custom grid and grid items Negative values are treated as default values
7	Right	Number	10	paddingRight	number	10	Right padding between custom grid and grid items Negative values are treated as default values
8	Bottom	Number	10	paddingBottom	number	10	Bottom padding between custom grid and grid items Negative values are treated as default values
9	Left	Number	10	paddingLeft	number	10	Left padding between custom grid and grid items Negative values are treated as default values
10	Grid Item Width	Number	320 365 [Mobile]	gridItemWidth	number	320 365 [Mobile]	Grid item width Empty values are treated as default values
11	Grid Item Height	Number	320 230 [Mobile]	gridItemHeight	number	320 230 [Mobile]	Grid item height Empty values are treated as default values
12	Columns	Number	2 1 [Mobile]	cols	number	2 1 [Mobile]	Number of columns in the custom grid
13	Gap	Number	10	gap	number	10	Distance between grid items
14	Scroll Bar	Boolean	OFF	scrollBar	boolean	false	ON: Display scroll bar when components placed from grid items overflow OFF: Hide overflowing parts when components placed from grid items overflow
15	Background Color	String Color Picker		backgroundColor	string		Custom grid background color
16	Border	Boolean	OFF	border	boolean	false	Custom grid border display setting
17	Border Width	Number	1	borderWidth	number	1	Custom grid border width
18	Rounded Size	Number	0	roundedSize	number	0	Custom grid border roundness
19	Border Color	String Color Picker		borderColor	string		Custom grid border color
20	Border Opacity	Number	100	borderOpacity	number	100	Custom grid border opacity
21	Border Style	Selection 1. Solid 2. Dashed 3. Dotted	Solid	borderStyle	string	solid	Custom grid border style
22	Grid Item Background Color	String Color Picker		gridItemBackgroundColor	string		Grid item background color
23	Grid Item Border	Boolean	ON	gridItemBorder	boolean	true	Grid item border display setting
24	Grid Item Border Width	Number	1	gridItemBorderWidth	number	1	Grid item border width
25	Grid Item Rounded Size	Number	0	gridItemRoundedSize	number	0	Grid item border roundness
26	Grid Item Border Color	String Color Picker		gridItemBorderColor	string		Grid item border color
27	Grid Item Border Opacity	Number	100	gridItemborderOpacity	number	100	Grid item border opacity
28	Grid Item Border Style	Selection 1. Solid 2. Dashed 3. Dotted	Solid	gridItemborderStyle	string	solid	Grid item border style
29	Elevation	Number	0	elevation	number	0	Grid item z-axis height
30	Visibility	Boolean	ON	visibility	boolean	true	Component visibility setting
31	Value	Table format [Details 1]		value	array of object		Custom grid value
32	Click Event	Selection 1. None 2. Action	Action				[When Click Event is None] Only actions within grid item components are enabled. [When Click Event is Action] Only actions on grid cell click are enabled.
33	Selected Value			selected	object		Data of the selected grid item The [selected] property cannot be set by actions.

Note

• The following can be entered for [Width] and [Height] property values: For px display, enter only numbers; for % display, specify % in the unit.
  Operation with inputs other than the following is not supported.
  • Number
  • Number%
  • calc() function
• The following can be entered for [X] and [Y] property values:
  For px display, specify only numbers.
  Operation with inputs other than the following is not supported.
  • Number
  • calc() function
• The calc() function is a CSS function that enables calculations. (Example: calc(100% - 30px))
  Units that can be used in the calc() function are "%" and "px". Other units (e.g., em, rem) are not supported.
• When specifying size using the calc() function, the display in the editor and the appearance in the app may differ.
  Please check using preview.
• The following values can be set for [Border Style] and [Grid Item Border Style] from actions:
  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

[Details 1] Value (value)

Gets and sets the value of the entire table in the custom grid. The value format is an array of objects representing rows.
The default state is registered as follows. Register each row using the [Add Row] button.
To delete, select the checkbox and click the [Delete] button.

text_field_1	button_1	rating_1
Text_1	Button_1	5
Text_2	Button_2	3
Text_3	Button_3	4
Text_4	Button_4	5

When handling data with actions, you can display data in each component of the custom grid by setting the value (value) in array of objects format as shown in the example below. Similarly, the value (value) contains the current display data state of the table in array of objects format.

[
    {"button_1":"Button_1","text_field_1":"Text_1","rating_1":"5"},
    {"button_1":"Button_2","text_field_1":"Text_2","rating_1":"3"},
    {"button_1":"Button_3","text_field_1":"Text_3","rating_1":"4"},
    {"button_1":"Button_4","text_field_1":"Text_4","rating_1":"5"}
]

Note

• The grid item component types and the properties of each component corresponding to value are as follows:

No	Grid Item Component	Corresponding Property
1	Text Input	value
2	Text Area	value
3	Number Input	value
4	High Precision Number	value
5	Search Field	value
6	Password Input	value
7	Select Box	value
8	Combo Box	value
9	Date Picker	value
10	DateTime Picker	value
11	Time Picker	value
12	Radio Button	value
13	Radio Button Group	value
14	Checkbox	value
15	Checkbox Group	value
16	Switch	value
17	Rating	value
18	Slider	value
19	Button	label
20	Typography	value
21	Rich Text	value
22	Image	value
23	External Resource	value
24	Link	label
25	Box	-
26	Divider	-

[Details 2] Getting the Clicked Grid Item from Grid Item Actions

With the custom grid’s click action and actions of components within grid items, you can obtain the grid item where the event occurred through the selected value (selected) property.
The selected value (selected) is a property that can retrieve the selected grid item data.
In custom grid events, one grid item object can be obtained through the selected value (selected) property.

Note

Even from actions of components other than the custom grid, you can obtain the grid item data where the event occurred by referencing the selected value (selected) property of the custom grid.

Events

Event Name	Description
onclick	Triggered when a grid item is clicked.