Grid Filter with Angular

8 posts, 0 answers
  1. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 24 Apr 2017 Link to this post

    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.

  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 26 Apr 2017 Link to this post

    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.
  3. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 26 Apr 2017 in reply to Rosen Link to this post

    That was exactly it, works great now,

    Thank you very much, you guys are great.

  4. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 26 Apr 2017 Link to this post

    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? 

  5. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 27 Apr 2017 Link to this post

    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.
  6. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 27 Apr 2017 in reply to Rosen Link to this post

    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?

  7. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 27 Apr 2017 Link to this post

    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.
  8. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 27 Apr 2017 in reply to Rosen Link to this post

    Hello Rosen,

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

Back to Top