Data Grid
Last updated
Last updated
The Data Grid component is used to represent data in tabular form. Data Grid is also known as 'Grid View' as the data will be displayed within a grid.
To view data in numerical format.
To show alerts.
Users can also change the height, width, top, left, points, and chart type.
The user needs to put a checkmark for the Initial Visibility option to avail of the preview for the first time.
Use a checkmark in the Fit Columns to auto-fit the size of the columns.
Check out the given illustration on how to use the Column Rearrange property in the Data Grid.
The user can change the background color of the chart, can get the border for the chart and can change the border color, can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
The user can change Title Name, Font color, size, style, etc.
The user can enable the subtitle to display the second title. The user can change the Name, Font color, size, style for the subtitle.
The user can change the header text color, font size, font style, and background color.
Enable the Show Checkbox property from the General section and provide the "allowmultipleselection = true" in the Dashboard script to avail the checkboxes in the preview mode of the Data Grid.
Check out the given illustration on accessing checkboxes for the multi-selection of the Grid Rows.
The user can change the font size, font color, text decoration, and enable the text wrap. The user can also increase the row height.
The users can set various display styles for the data grid using these fields.
Roll Over Color: The Roll Over Color property allows customization of the color change when a user hovers over an interface element. This provides visual feedback and helps in highlighting interactive components.
Selection Color: The Selection Color property determines the color displayed when an element or text is selected. It helps distinguish the selected items from the rest, facilitating easier navigation and interaction.
Horizontal Grid Lines: The Horizontal Grid Lines property allows users to enable or disable horizontal lines across the interface. These lines can aid in aligning and organizing content effectively, and their color can be customized to blend with the overall design.
Horizontal Line Color: The Horizontal Line Color refers to the color of the horizontal grid lines that can be displayed across the interface. This color can be customized to fit the design palette of the application seamlessly.
Vertical Line Color: The Vertical Line Color is the color assigned to the vertical grid lines. Users can adjust this color to help differentiate vertical separations on the interface, enhancing visual organization.
Grid Colors: Grid Colors encompass horizontal and vertical line colors, offering comprehensive customization options for both components. Adjusting these colors allows users to create a coordinated look that complements the interface design.
The Export Options also helps to provide heading, subheading, file name. The user can also select an option for Global Export Type.
The user can enable the Enable Context Menu from the preview section to download the reports in downloaded chart and the name of the downloaded file can be changed from this section.
The Data Grid component supports the date columns with the following types of date-time formats:
a. YYYY-MM-DD HH:MM:SS
b. MM/DD/YYYY HH:MM:SS
c. DD-MM-YYYY HH:MM:SS
d. ISO 8601 format (e.g., 2023-08-23T14:30:00Z)
e. Time formats such as 12-hour and 24-hour clocks (HH:MM)
Check out the illustration displaying the support for the various date-time formats inside the Data Grid component.
Please Note:
The user needs to select the Column Type as Numeric for the selected Data Grid fields using the Properties tab provided for the Dataset, to make it responsive to the changes that the user sets using the Indicator tab.
Refer to the Alerts in Grids page under the Configurations section to understand how to insert Alerts in a Grid component.
The user can also enable or disable Scroll View. In this case, the selected scroll view is 'Disable'.
