You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/en/docs/marketplace/platform-supported-content/modules/data-widgets/data-grid-2-properties.md
+27-23Lines changed: 27 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ description: "This document describes the properties of the Data Grid 2 and thei
5
5
#If moving or renaming this doc file, implement a temporary redirect and let the respective team know they should update the URL in the product. See Mapping to Products for more details.
6
6
---
7
7
8
-
## Introduction
8
+
## Introduction
9
9
10
10
This guide lists all the properties of the Data Grid 2 widget located inside the [Data Widgets](/appstore/modules/data-widgets/) module. Because data grids also contain columns and rows, properties for those [columns](#columns) and [rows](#rows) are also described below.
11
11
@@ -51,6 +51,10 @@ This property is available only when **Selection method** is set to **Checkbox**
51
51
52
52
When set to **Yes**, the data grid displays a checkbox in the header that, when selected, selects all visible rows. Clearing it will clear the selected rows.
53
53
54
+
#### Loading Type
55
+
56
+
Controls how loading states are displayed during data operations such as pagination, filtering, and refresh. Available options include spinner (rotating overlay) and skeleton (placeholder content). Loading indicators automatically appear during initial data load, pagination navigation, filter operations, sorting, and export operations. The system includes smart timing to prevent flickering on fast operations and provides appropriate timeout handling for slow operations.
57
+
54
58
### Columns Tab {#columns}
55
59
56
60
#### Columns
@@ -79,6 +83,10 @@ When the property is set to **Virtual scrolling**, then the navigation buttons a
79
83
80
84
This property controls the visibility of navigation buttons. If set to "Auto", navigation buttons are only visible when the number of elements in the data source exceeds the page size.
81
85
86
+
#### Show Number of Rows
87
+
88
+
Displays the total number of rows in the pagination area, providing users with context about the dataset size. When enabled, shows information like "1 to 20 of 150". Works with virtual scrolling, load more pagination, and standard pagination modes. On large datasets, the total count calculation may impact initial load time.
89
+
82
90
#### Empty List Message
83
91
84
92
Sets a custom message to be displayed when there is no data in the data source, or the filter result is empty.
@@ -91,7 +99,7 @@ An expression that returns the CSS class for the row. The data source entity is
91
99
92
100
#### On Click Trigger
93
101
94
-
This property determines how the click action is triggered.
102
+
This property determines how the click action is triggered.
95
103
96
104
The default option is **Single click**, which triggers the action on a single click on a row. If set to **Double click**, the action is triggered when the row is double-clicked.
97
105
@@ -103,6 +111,10 @@ This property sets the action to be performed when the row is clicked.
103
111
104
112
This property sets the action to be performed when the row is selected or unselected.
105
113
114
+
#### Filters Placeholder
115
+
116
+
Container for filter widgets that operate on the entire grid. This placeholder provides a designated area for placing filter widgets (Text Filter, Date Filter, Number Filter, Drop-down Filter) that filter across all grid data rather than being limited to individual columns. Filter widgets placed here automatically link to the grid's datasource, and changes immediately affect the grid data. Still, widget should be configured to work properly. Multiple filters work together using AND logic by default.
117
+
106
118
### Column Capabilities Tab
107
119
108
120
#### Sorting
@@ -123,6 +135,10 @@ This flag controls column hiding for the entire data grid. If set to **No**, the
123
135
124
136
### Configuration Tab
125
137
138
+
#### Store Filters in Personalization
139
+
140
+
Controls whether filter states are saved as part of user personalization settings. When enabled, the system preserves filter input values, selected filter types, applied filter combinations, filter visibility states, and custom filter configurations in the user's personalization profile. Filter states can be stored in browser localStorage or database attributes depending on personalization configuration. When enabled, users' filter preferences persist across sessions and page refreshes. When disabled, filters reset to default values on every page load, useful for shared screens, dashboards, or public interfaces.
141
+
126
142
#### Attribute
127
143
128
144
This property sets the entity attribute that is used to store custom visual settings for the data grid.
@@ -133,12 +149,8 @@ This property sets the action to be performed when the **Attribute** value is ch
133
149
134
150
### Grid Wide Filtering
135
151
136
-
#### Filters
137
-
138
-
A list of filters that can be used in the header of the data grid. Each filter defines an attribute that is used as part of a joined query to select data from the data source.
139
-
140
-
{{% alert color="info" %}}
141
-
This property requires advanced knowledge of data grid widget. Please read [Grid Wide Filtering](/appstore/modules/data-grid-2/#grid-wide-filtering) and view its examples for additional guidance.
152
+
{{% alert color="warning" %}}
153
+
Grid Wide Filtering has been deprecated and removed. Use the Filters Placeholder along with dedicated filter widgets (Text Filter, Date Filter, Number Filter, Dropdown Filter) for filtering functionality.
142
154
{{% /alert %}}
143
155
144
156
### Aria Labels
@@ -159,6 +171,10 @@ Defines a string value that labels the cancel export button of the export dialog
159
171
160
172
Defines a string value that labels the checkbox of the row when the selection is enabled. Used by assistive technologies and screen readers.
161
173
174
+
#### Select All Rows
175
+
176
+
Provides accessible label for the "Select All" checkbox in the grid header. This ARIA label is announced by screen readers when users navigate to the select all checkbox. The label integrates with three-state checkbox functionality (unchecked, checked, indeterminate) and supports localization through text templates. Screen readers announce appropriate state changes when the checkbox is toggled, improving accessibility compliance for bulk selection operations.
177
+
162
178
## Column Properties {#column-properties}
163
179
164
180
You can easily see these properties by opening up the property dialog box of Data Grid 2, then clicking **Columns** > **New**.
@@ -183,18 +199,6 @@ Text to be displayed in the column header.
183
199
184
200
Text to display when hovering over column header.
185
201
186
-
#### Reference
187
-
188
-
This property is used to select the reference entity that can be used for association filtering. Useful only in conjunction with the dropdown filter widget.
189
-
190
-
#### Data Source
191
-
192
-
A data source that should return a list of entities selected in the reference property. All items in this list will be available in the dropdown filter.
193
-
194
-
#### Option Caption
195
-
196
-
An expression used to create a caption for each reference. This text is then visible as an option in the dropdown filter.
197
-
198
202
#### Visible
199
203
200
204
A Boolean expression that controls the visibility of columns in the data grid. If the expression returns **false**, then the column is hidden and remains hidden unless the expression value is changed to **true**.
@@ -215,9 +219,9 @@ If set to **Yes**, then the column position in the grid can be changed by the us
215
219
216
220
#### Can Hide
217
221
218
-
If set to **Yes**, the column can be hidden in the view settings.
222
+
If set to **Yes**, the column can be hidden in the view settings.
219
223
220
-
If hidden by default, column is hidden on first render and can be shown using view settings.
224
+
If hidden by default, column is hidden on first render and can be shown using view settings.
221
225
222
226
If set to **No**, column cannot be hidden in view settings.
223
227
@@ -227,7 +231,7 @@ If set to **No**, column cannot be hidden in view settings.
227
231
228
232
This property controls how the column width is calculated.
229
233
230
-
**Auto-fill** fills the available space. **Auto-fit content** uses just enough space to display the column content. **Manual** is used to set the number for the flex-grow CSS property.
234
+
**Auto-fill** fills the available space. **Auto-fit content** uses just enough space to display the column content. **Manual** is used to set the number for the flex-grow CSS property.
0 commit comments