Data Operations
The data operations represent the Grid features that help the user modify the displayed data set through the UI.
The Grid supports the following data operations:
Paging—Splits the data into pages and renders a pager control at the bottom of the Grid.Sorting—Allows you to order the Grid data by single or multiple fields.Filtering—Allows you to filter the data by one or more fields. The filter functionality renders different filter controls based on the concrete field type.Grouping—Allows you to group the data by single or multiple fields. The created groups are expandable.
Configuration
To enable a specific data operation, follow the steps below:
-
Set the respective option of the Grid. By default, all four data operations are disabled.
Option Accepted Values pageableboolean—If set totrue, the Grid will display a default responsive pager with up to 10 numeric buttons, prev/next buttons, and current page information.PagerSettings—Allows manual customization of each pager section.
sortableSortSettings—A configuration parameter which can be:filterableFilterableSettings—A configuration parameter which can be:boolean'row''menu''menu,row'
groupableboolean—If set totrue, the Grid can be grouped by dragging the column header cells.GroupableSettings—Allows manual customization of the grouping functionality
-
Depending on the concrete requirements, handle the data operations. You can achieve this in two ways:
- By using the
Data-Binding directive—Allows you to perform the desired data operations automatically without manually processing the data in event handlers. This approach is faster for implementation, because the directive encapsulates the repetitive boilerplate code. - By handling data operation events—Provides full control over the data processing. The developer needs to manually handle all relevant events and process the data. This approach is suitable for scenarios involving custom logic alongside the data operations.
- By using the
Using the Data-Binding Directive
The built-in DataBindingDirective encapsulates the logic for handling data operations. This significantly reduces the repetitive boilerplate code and helps you to implement complex Grids with less manual coding.
<kendo-grid
[kendoGridBinding]="gridData"
[pageable]="true"
[groupable]="true">
<kendo-grid-column field="Id" title="ID">
</kendo-grid-column>
<kendo-grid-column field="ContactName" title="Name">
</kendo-grid-column>
</kendo-grid>The following example demonstrates the kendoGridBinding directive in action.
Handling Data Operation Events
Each time when a user interacts with the Grid, a corresponding event is triggered. These events provide the information necessary to process the Grid data and configure the data operations. By handling these events, you can apply custom logic as necessary.
If you work with a scenario that involves a single data operation, handle only the corresponding event:
pageChange—Triggers when the page is changed.sortChange—Triggers when the sorting of the data is changed.filterChange—Triggers when the built-in filter UI controls are used to filter the data.groupChange—Triggers when the Grid data is grouped.
For example, if your application requires only paging with no sorting, filtering, or grouping, then handle only the pageChange event.
When the application requires you to enable multiple data operations, handle the dataStateChange event. The dataStateChange event triggers after each data operation. This allows you to manipulate the data in a single event handler instead of handling all events separately.
To process the Grid data according to the applied data operation, use the built-in functions of the Data Query package. After handling the necessary event, use any of the following built-in methods:
| Method | Description | Arguments | Usage |
|---|---|---|---|
process() | Applies the specified descriptors to provided data. |
| process(data, state) |
orderBy() | Orders the provided data according to the specified sort descriptors. |
| orderBy(data, sortDescriptor) |
filterBy() | Filters the provided data according to the specified filter descriptors. |
| filterBy(data, filtertDescriptor) |
groupBy() | Groups the provided data according to the specified group descriptors. |
| groupBy(data, groupDescriptor) |
Once the Data Query methods process the data, update the Grid through the respective input properties:
pageSize—Defines how many items will be rendered per page.skip—Defines the number of records that the pager must skip, that is, the items from the previous pages.sort—Binds a collection of descriptors by which the Grid orders the data.filter—Binds a collection of descriptors by which the Grid filters the data.group—Binds a collection of descriptors by which the Grid groups the data.
Handling Single Data Operation
When you enable a single data operation, handle the event that the Grid triggers for the selected data operation. Inside the handler, use the corresponding Data Query method.
The following example demonstrates how to enable filtering by handling the filterChange event and using the filterBy() method.
Handling Multiple Data Operations
When you enable multiple data operations, handle the dataStateChange to manipulate the data in a single event. Use the process() method of the Data Query package to apply the specified descriptor.
The following example demonstrates the dataStateChange event and process() method in action.
Processing Data on the Server
When the data has to be processes on the server side:
- Handle the corresponding event.
- Send the necessary descriptors to the server.
The following example demonstrates how to process multiple data operations when using remote data.