Grid Filter with Angular

[mario]

Hello, i'm implementing a grid with filters in angular 4.0 using Kendo-ui-angular.

I been trying to automatically bind my source of data (API) into the grid data like so:

Service for the API: 

public query(state: any): void {
       this.getAll(state)
           .subscribe(x => super.next(x));
   }

private getAll(state: any): Observable<GridDataResult> {
       return this.http
           .post(this.BASE_URL + 'getall', state)
           .map(response => response.json())
           .map(response => (<GridDataResult>{
               data: response.result.data,
               total: response.result.total
           }));
   }

 

And my component:

public ngAfterViewInit(): void {
       this.grid.dataStateChange
           .do(({ skip, take }: DataStateChangeEvent) => {
               this.gridConfig.skip = skip;
               this.gridConfig.pageSize = take;
           })
           .do(x => console.log(x))
           .subscribe(x => this.hrtypeService.query(x));
   }

 

My view:

<kendo-grid
[data]="listHrType | async"
[pageSize]="gridConfig.pageSize"
[scrollable]="'virtual'"
[skip]="gridConfig.skip"
[sort]="gridConfig.sort"
[rowHeight]="15"
[height]="300"
[selectable]="true"
[filter]="gridConfig.filter"
[filterable]="true"
[groupable]="gridConfig.groupable"
 >

But i'm having an issue with the filters, everytime i try to filter one of the columns, the object returns just one single colum, and overlaps the remaining one's.

i add 1 filter to the field test_1 and i get

field: "teste_1"
operator:"contains"
value:"teste_value_1"

and once i fill out test_2 with a second filter, it overwrites the first object in the array, instead of adding a second filter

field: "teste_2"
operator:"contains"
value:"teste_value_2"

Opposed to

[field: "teste_1"
operator:"contains"
value:"teste_value_1"]
[field: "teste_2"
operator:"contains"
value:"teste_value_2"]

 

I'm not manipulating the data, just return what i get from the kendo-ui into my API, what configuration did i missuse?

Apologies beforehead if i made my issue unclear.

[Rosen]

Hello mario,

Looking at the snippets you have pasted, I suspect that the described behavior is due to not updating the Grid component state. The dataStateChange handler should also update the sort and filter fields of the gridConfig object. Similar to the following:

public ngAfterViewInit(): void {
  this.grid.dataStateChange
      .do((state: DataStateChangeEvent) => {
          this.gridConfig = state;
      })
      .do(x => console.log(x))
      .subscribe(x => this.hrtypeService.query(x));
}

Regards,
Rosen
Telerik by Progress

[mario]

That was exactly it, works great now,

Thank you very much, you guys are great.

[mario]

I have another question still regarding the grid filters of the kendo for angular 2.

From what i noticed, the object returned by kendo in angular 1 would indicate what type of filter field i'm using, date, numeric, boolean, string, and in the angular 2 version this reference is missing.

Is there a way to know what type of field i'm filtering? 

[Rosen]

Hello mario,

I'm afraid I'm not sure I understood your question. To which object you are referring to, FilterDescriptor or something else? Some code snippets of 'before'-'after' may be helpful. 

Regards,
Rosen
Telerik by Progress

[mario]

Hello Rosen, sorry for the the lack of details.

I meant in the CompositeFilterDescriptor actually.

Currently it returns a logic, and array of filters. Each filter tells me the field, the operator and the value.

My question is, how do i know if the field i'm filtering is a string, integer or boolean? 

I need to know what type of field it was so i can apply specific logic on the API side, is it possible to obtain such information?

[Rosen]

Hello Mario,

I'm afraid that such information is not available on the FilterDescriptor nor such is available with when using K1 filter descriptors. If you need to find the type of the value you will have to directly check the value field's type of FilterDescriptor instance.

Regards,
Rosen
Telerik by Progress

[mario]

Hello Rosen,

Thank you for the replay, i'll make do with what i can.