Kendo-angular: Grid: Automatic Paging and Sorting

[jongunter]

For the data grid, are there plans to put in automatic paging and sorting, without having to handle the logic ourselves?

I understand there's lots a situations (server-side) where we'd want to have custom paging/sorting logic, but many times I just want to put a quick data grid together, feed it an array, and not have to re-write some boilerplate paging/sorting code.

[rkonstantinov]

We believe that data processing such paging, sorting filtering etc. implementation should not be part of the Grid component. Its only concern should be to visualize the data and provide UI for the user to work with it.

However, we also recognize that writing sorting/paging/filtering logic is a bit boring. This is why we provide a set of functions to help with this.

Here is a basic code required for sorting and paging:

import { Component } from '@angular/core';

import {
  GridDataResult
} from '@progress/kendo-angular-grid';

import {
  State,
  process
} from '@progress/kendo-data-query'

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid
          [data]="gridView"
          [sort]="state.sort"
          [pageSize]="state.take"
          [skip]="state.skip"
          [pageable]="true"
          [height]="300"
          (dataStateChange)="dataStateChange($event)"
        >
      </kendo-grid>
  `
})
export class AppComponent {
    private gridView: GridDataResult;

    private state: State = {
     skip: 0,
     take: 10
    };

    protected dataStateChange(state): void {
        this.state = state;
        this.loadProducts();
    }

    private loadProducts(): void {
        this.gridView = process(this.products, this.state);
    }

    private products: any[] = Array(100).fill({}).map((x, idx) => ({
        "ProductID": idx,
        "ProductName": "Product" + idx,
        "Discontinued": idx % 2 === 0
    }));

    constructor() {
        this.loadProducts();
    }
}

And of course it is possible to further extract the handling into a separate reusable "wrapper" component which to receive only the data and encapsulate the paging/sorting state and logic.

[tsvetomir]

Note that the Data Query documentation is updated and will be published later today.

[shivanisilicus]

Hi @rkonstantinov,

Paging is working but sorting is not.
Can you guide or provide code for sorting too along with paging?

[shivanisilicus]

I have added [sortable]="true". Now it is working.
Thanks @rkonstantinov

[sukhjeet81]

Hello @rkonstantinov need a help in the pagination of Kendo UI grid,
I am using the kendo-grid with [pageable]="{info: true, type: 'input', pageSizes: false, previousNext: true}"
option in which the pagination is with input type.
But issue is with the input tag in pagination, when there is no data in the gridView it still show the Page 1 of 0 in the Pagination.

Can you help me with the making 0 when there is no data
Thanks

[rkonstantinov]

Hey @sukhjeet81,
The behavior you have described has been addressed with the latest dev version of the kendo-angular-grid package.

[sukhjeet81]

@rkonstantinov Thank you so much for the help,
It really worked for me.
Just a small query when this feature is going to be in the production mode.
it completely works in the dev mode.

[rkonstantinov]

There is no strict schedule when an official version of the package is released. Usually this happens when sufficient fixes are accumulated - once per week or two.

[sukhjeet81]

@rkonstantinov Thanks man. !