New to Kendo UI for Angular? Start a free 30-day trial

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:

  • PagingSplits the data into pages and renders a pager control at the bottom of the Grid.
  • SortingAllows you to order the Grid data by single or multiple fields.
  • FilteringAllows you to filter the data by one or more fields. The filter functionality renders different filter controls based on the concrete field type.
  • GroupingAllows 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:

  1. Set the respective option of the Grid. By default, all four data operations are disabled.

    OptionAccepted Values
    pageable
    • booleanIf set to true, the Grid will display a default responsive pager with up to 10 numeric buttons, prev/next buttons and current page information.
    • PagerSettingsAllows manual customization of each pager section.
    sortableSortSettingsA configuration parameter which could be:
    filterableFilterableSettingsA configuration parameter which could be:
    • boolean
    • 'row'
    • 'menu'
    • 'menu,row'
    groupable
    • booleanIf set to true, the Grid can be grouped by dragging the column header cells.
    • GroupableSettingsAllows manual customization of the grouping functionality
  2. Depending on the concrete requirements, handle the data operations. This could be achieved in two ways:

    • By using the Data-Binding directiveAllows 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 eventsProvides 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.

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.

Example
View Source
Change Theme:

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:

  • pageChangeTriggers when the page is changed.
  • sortChangeTriggers when the sorting of the data is changed.
  • filterChangeTriggers when the built-in filter UI controls are used to filter the data.
  • groupChangeTriggers 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:

MethodDescriptionArgumentsUsage
process()Applies the specified descriptors to provided data.
  • Array data to be processed
  • State
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:

  • pageSizeDefines how many items will be rendered per page.
  • skipDefines the number of records that the pager must skip i.e. the items from the previous pages.
  • sortBinds a collection of descriptors by which the Grid orders the data.
  • filterBinds a collection of descriptors by which the Grid filters the data.
  • groupBinds 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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

Processing Data on the Server

When the data has to be processes on the server side:

  1. Handle the corresponding event.
  2. Send the necessary descriptors to the server.

The following example demonstrates how to process multiple data operations when using remote data.

Example
View Source
Change Theme: