kendo angular 2 grid cusomized data binding issue when service call picks new data will not binding

Question

https://www.telerik.com/kendo-angular-ui/components/grid/columns/#toc-auto-generated-columns

Here Dynamically columns binding is missing:

The First time data binding correctly. The second time onwards it's not binding why?

this.gridData ---> is the Api response data

 this.gridView = {enter code here
          data: this.gridData,
          total: this.petService.pets.length
        };

Answer 1

What do you mean by "the second tume onwards"? How exactly is the Grid supposed to be updated?

If the object the Grid is bound to is updated each time new data arrives, the Grid will be rerendered accordingly with the latest data, e.g.:

ngOnInit() {
      this.interval = setInterval(() => {
        const rnd = Math.floor(Math.random()*sampleCustomers.length);
        this.gridData = sampleCustomers.slice(rnd, rnd + 10)
      }, 1000);
    }

EXAMPLE