This is a migrated thread and some comments may be shown as answers.

Grid Filter with Angular

7 Answers 297 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mario
Top achievements
Rank 1
mario asked on 24 Apr 2017, 03:55 PM

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.

7 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 26 Apr 2017, 06:29 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
mario
Top achievements
Rank 1
answered on 26 Apr 2017, 08:45 AM

That was exactly it, works great now,

Thank you very much, you guys are great.

0
mario
Top achievements
Rank 1
answered on 26 Apr 2017, 02:14 PM

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? 

0
Rosen
Telerik team
answered on 27 Apr 2017, 06:21 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
mario
Top achievements
Rank 1
answered on 27 Apr 2017, 09:00 AM

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?

0
Rosen
Telerik team
answered on 27 Apr 2017, 10:21 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
mario
Top achievements
Rank 1
answered on 27 Apr 2017, 10:23 AM

Hello Rosen,

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

Tags
Grid
Asked by
mario
Top achievements
Rank 1
Answers by
Rosen
Telerik team
mario
Top achievements
Rank 1
Share this question
or