Grid sorting, filtering, paging not working properly

[Carla]

Hi,

I am not sure what I'm doing wrong. I pass my data to the grid this way: [data]="rowData$ | async". I define this in my component as such: 

rowData$: Observable<any>;
ngOnInit() {this.rowData$ = this.requestService.getData}

I would not want to modify this code, or my service code, so I need to know how to use the grid features when passing the data to the grid this way.

Also in the grid I have the following:

[sortable]="true"
[pageable]="true"
[filter]="state.filter"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"

For filtering, I can see the filters textfields and filter buttons but when I type something, the data does not change.

For sorting, nothing happens when I click in the column header.

For paging, I see the number of pages and items at the bottom but the functionality does not work. I set to have only 12 items per page, and I see '1-12 items of 17' but all items are shown on the 1st page.  I see the grid has 2 pages, but clicking on page 2 does not work, probably because all items are already displayed in the 1st page.

Also, I need to have a column with a filter always set, unless the user removes it. My idea was to use a kendo-switch to switch between group 1 and group 2, but this is not working for me either. Is it possible to have longer text instead of on/off?

I'm guessing my problem is coming from not understanding how to handle the data after the grid is initialized.

Thanks in advanced,

Carla

[Ivan]

Hi Carla,

Not sure what exactly causes this faulty behavior, it would be really helpful if you provide working stackblizt sample. The easiest way to do this is to start from one of our grid demos.
Meanwhile you can refer to this stackblitz sample, which demonstrates grid with async pipe , all queries ( sort , filter ) are handled in northwind.service.ts.

Please do not hesitate to ask, if you have any further questions regarding this issue.

Regards,
Ivan
Progress Telerik

[Carla]

Hi Ivan,

I apologize for my delayed response, but I was on vacation.

I have spent some time analyzing the stackblitz sample you gave me, and came to realize that I need to dynamically build my query to grab data from the database in order to have sort, paging and filtering working. Here is where I see this happening in the sample code: .get(`${this.BASE_URL}${tableName}?${queryStr}`)

I have sorting working, but the rest requires a lot more work that I thought would get for free from using the Kendo Grid. Specially filtering would require a lot of work and calls to the database every time a user types a search parameter. Is there a way to use a dictionary or any other way to have this working without having to customize my db query?  

Thanks,

Carla

 

[Ivan]

Hello Carla,

In this case, it is more suitable to use the Kendo Angular Grid with the Built-In Directive. Please check the example demonstrated in this section of our docs. Please do note how local data is passed to the grid, which can be easily modified to async|remote data retrieval via Obesrvable.

Hope this will help you.

Regards,
Ivan
Progress Telerik

[Carla]

Thanks Ivan this is working fine for me. I now have to have one column filtered on grid load.

I am confused as how to do this since the filtering examples I find do not use Built-in directives with Observables. For example this sample (https://www.telerik.com/kendo-angular-ui/components/grid/filtering/#toc-filter-row) is filtering by the product name, Chef. I need something similar.

I tried using similar code from this switch filter example because it seemed simpler: https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-customizing-filter-rows. But I get stuck on what to do with this function because filterBy does not take Observables, the example is using an array sampleProducts where I would pass an Observable:

    public filterChange(filter: CompositeFilterDescriptor): void {
        this.filter = filter;
        this.gridData = filterBy(sampleProducts, filter);
    }

Please I need advice on how to do this. 

Regards,

Carla

 

[Ivan]

Hello Carla,

If I understood you right, you just need to subcribe to an Observable. Please refer to the updated stackblitz example, which demonstrates, how to get an initial grid state from an Observable in exact same fashion.
​

const obs: Observable = of({
      skip: 0,
      take: 5,

      // Initial filter descriptor
      filter: {
        logic: 'and',
        filters: [{ field: 'ProductName', operator: 'contains', value: 'Chef' }]
      }
    });

    obs.subscribe((res) => this.state = res);

With the of operator we are creating Observable from static data and then we can subscribe ( and get resolved ) right away. Note that this is just an example with a demonstration purpose. The developer is in control of creating the required Observable, (it can wrap a remote HTTP request ) so that once new data arrives it is released automatically by the Observable. 
You can find more detailed information on Observables in the following article from the official Angular documentation:
https://angular.io/guide/observables#observables

or on RXJS's official documentation:
https://rxjs-dev.firebaseapp.com/guide/observable

It is up to developer to handle the async data and to pass it to the grid in a proper way.

In the provided example we use the process function to process the data of the grid on dataStateChange event (it emits an object of type State on each paging, filtering, sorting, or ordering operation). The process functions accepts two parameters - data and state. The state should be of type State.

Similarly, if you want to handle the filterChange event (it fires every time we filter the grid) and use the filterBy function to filter the data, then we need to pass two parameters to the filterBy function - data and descriptor. The descriptor should be of type CompositeFilterDescriptor or FilterDescriptor.

I hope this helps. Let me know in case I can provide any additional information on this case.

Regards,
Ivan
Progress Telerik