Grid datastatechange fires more than once on changes to grid

[schakravarty]

I use many grids throughout our application each have sorting and paging turned on and therefore instead of binding to the pageChange and sortChange events I bind to the dataStateChangeEvent. My grids are pretty much all set up the same whereby I bind the skip and sort to a kendo grid state object...example:

<kendo-grid
    #nameSearchResults
    [data]="gridDataResult"
    [loading]="isSearching"
    [pageSize]="state.take"
    [pageable]="{
      buttonCount: 5,
      info: true,
      type: pageableType,
      pageSizes: pageSizes,
      previousNext: true,
      position: 'both'
    }"
    [skip]="state.skip"
    [sort]="state.sort"
    [sortable]="true"
    [filter]="state.filter"
    filterable="menu"
    [resizable]="true"
    [reorderable]="true"
    [columnMenu]="true"
    [filterable]="showFilterMenu"
    (dataStateChange)="dataStateChange($event)"
    (columnResize)="onColumnResized($event)"
    (columnReorder)="onColumnReorder($event)"
    (columnVisibilityChange)="onColumnVisibilityChange($event)"
    [selectable]="selectableSettings"
    (selectionChange)="onNameSelectionChange($event)"
    (cellClick)="onGridCellClick($event)"
    kendoGridSelectBy="nameId"
    [(selectedKeys)]="selectedKeys"
  >

public gridDataResult: GridDataResult;
public pageableType: 'input' | 'input' = 'input';
public selectableSettings = this.isDialog  ? 'single' : 'multiple';
public state: State = {
    skip: 0,
    take: 100,
    sort: [ {field: 'scientificName', dir: 'asc'  } ]
  };

Inside the datastateChange event I first set the state to the state object passed to me and then perform a search which calls out to the server to get data.

dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    if (this.gridDataResult && this.gridDataResult.total > 0) {
      this.searchRequest.sortColumns = this.getGridSortColumns(this.state.sort);
      this.searchRequest.currentPage = (this.state.skip / this.state.take);
      this.searchRequest.pageSize = this.state.take;
      this._search();
    }
    
  }

The problem that I am seeing is that as soon as I set the state object, then the datastatechange event gets called a second time causing the code to make a second call to the server to get data. My grids have been coded this way for quite some time and I know that I was not getting this effect at an earlier date. I do not know what broke it but I just noticed this since my last update to the kendo packages. Has anyone else noticed this behavior? If so, is there a fix for it?

[Svet]

Hi Paul,

Thank you for the provided sample code. I did review it in detail but couldn't spot what causes the issue. I can confirm that we haven't made changes to the Grid that affect the behavior of the dataStateChange event. Thus there is something in the implementation that causes this behavior.

What I can suggest is to check if the nameSearchResults template variable does something that could trigger the event.

What else could be done in such cases is to remove pieces of code one by one and test the application until the root of the issue is located.