Grids
This sample demonstrates the overview of basic grid features with its performance metrics of large data. To change datasource count, select rows and columns count from dropdown.
Employee ID Press Alt Down to open filter Menu. Press Enter to sort | Employee Name Press Alt Down to open filter Menu. Press Enter to sort | Designation Press Alt Down to open filter Menu. Press Enter to sort | Mail Press Alt Down to open filter Menu. Press Enter to sort | Location Press Alt Down to open filter Menu. Press Enter to sort | Status Press Alt Down to open filter Menu. Press Enter to sort | Trustworthiness Press Alt Down to open filter Menu. Press Enter to sort | Rating Press Alt Down to open filter Menu. Press Enter to sort | Software Proficiency | Current Salary Press Alt Down to open filter Menu. Press Enter to sort | Address Press Alt Down to open filter Menu. Press Enter to sort | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| No records to display |
name | Type | Description |
|---|---|---|
| queryCellInfo | Event | Triggered every time a request is made to access cell information, element, or data. This will be triggered before the cell element is appended to the Grid element. |
| dataSource | Object|DataManager|DataResult | It is used to render grid table rows.
If the
|
| enableVirtualization | boolean | If |
| allowFiltering | boolean | If
|
| allowSorting | boolean | If
|
| allowSelection | boolean | If |
| selectionSettings | SelectionSettingsModel | Configures the selection settings. |
| height | string|number | Defines the scrollable height of the grid content. |
| columns | Column[]|string[]|ColumnModel[] | Defines the schema of dataSource.
If the |
| dataBound | Event | Triggers when data source is populated in the Grid. |
| actionComplete | Event | Triggers when Grid actions such as sorting, filtering, paging, grouping etc. are completed. |
| load | Event | This event allows customization of Grid properties before rendering. |
The Grid is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull the data from a data source, such as an array of JSON objects, OData web services, or DataManager binding data fields to columns. Also, displaying a column header to identify the field with support for grouped records.
In this demo, Grid features such as Virtual Scrolling, Filtering, Sorting, Column Template etc... are used along with large data source.
You can follow the guidelines in this documentation to get around the browser height restriction when loading and viewing millions of records.
More information on the Grid instantiation can be found in this documentation section.