Kendo-angular: [GRID] grid not refreshed once grid data property is updated

[xiaowvmware]

The step to reproduce the issue:

• Go to http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/ and open the first example in Built-In Directive as plunker

• Replace app/app.component.is with the following code

`
import { Component } from '@angular/core';
import { customers } from './customers';

@Component({
selector: 'my-app',
template: <div><button (click)="reload()">reload</button></div> <kendo-grid [kendoGridBinding]="gridData" [pageSize]="20" [pageable]="true" [sortable]="true" [scrollable]="'virtual'" [groupable]="true" [rowHeight]="50" [height]="510"> <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column> <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column> <kendo-grid-column field="City" [width]="100"></kendo-grid-column> <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column> </kendo-grid>
})
export class AppComponent {
private gridData: any[] = customers;

reload() {
  this.gridData = this.gridData.slice(0, 10);
}

}
`

• Once the grid is displayed, scroll down > 40 rows
• Click reload button and the function will update griddata with the first 20 consumer entries
• Grid shows not data and I expect to see the the first 20 consumer entries.
• Scroll up then I will see the first 20 consumer entries

[xiaowvmware]

app.component.ts.txt

The code is reformatted by editor in the bug report. Upload the code sample in txt file instead.

[rkonstantinov]

As you are resetting the data you will need also to manually reset the skip. To do so you will need to get reference to DataBindingDirective similar to the following:

import { Component, ViewChild } from '@angular/core';
import { customers } from './customers';
import { DataBindingDirective } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
        <div>
          <button (click)="reload()">reload</button>
        </div>   
        <kendo-grid
            [kendoGridBinding]="gridData"
            [pageSize]="20"
            [pageable]="true"
            [sortable]="true"
            [scrollable]="'virtual'"
            [rowHeight]="35"
            [height]="510">
            <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column>
            <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column>
            <kendo-grid-column field="City" [width]="100"></kendo-grid-column>
            <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;

    private gridData: any[] = customers;

    reload() {
      this.gridData = this.gridData.slice(0, 10);
      this.dataBinding.skip = 0;
    }

}

[tsvetomir]

A similar problem can be seen in this plunkr. The recommended workaround for the moment is to reset the skip value, as suggested above.

[saikiranmarripati]

@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;

You made my day. the document was missing this part @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective

[pedy711]

I want to use similar use case as the following link, but with "kendoGridBinding" instead of "data" to be able to use sorting, filtering and other options available in "kendoGridBinding":

Link to stackblitz

but I get the following error:

ERROR
Error: e.slice is not a function

any idea why?

[tsvetomir]

@pedy711 please open a support ticket for assistance with specific component usage.

[pedy711]

I can't open the link. Seems to be broken. Can I open a new issue here in Github?

[tsvetomir]

@pedy711 Apologies for the broken link, I've updated it to the correct URL.

Issues logged here should include enough detail for us to reproduce a particular bug.