Kendo UI for Angular: Sorting, Grouping and Virtual Scrolling

Question

I'm trying to use all 3 functionality together. For the sorting this is what's used to sort the data:

this.gridView = {
    data: orderBy(this.products, this.sort),
    total: this.products.length
};

For grouping this is what's used:

this.gridView = process(products, { group: this.groups });

And,for virtual scrolling this is what's used:

this.gridView = {
    data: this.data.slice(this.skip, this.skip + this.pageSize),
    total: this.data.length
};

How do I use all 3 together? When I add the code for the grouping it breaks the grouping. If I click on a column header to sort it thinks I want to drag the column header. When the code is added for the sorting the virtual scrolling stops working. Is there an order of precedence for which function should be called when using all 3 functionality?

Answer 1

I was able to find what I needed to do. For anyone else who wants to also use all of the querying features just use this property binding:

[kendoGridBinding]="gridData"

That will handle the grouping, paging, sorting and filtering. By using the kendoGridBinding directive the grid will handle everything for you.