row reordering not working on Kendo UI grid for angular

Question

I am trying to implement the row reordering using Kendo UI grid for angular and I was following this https://www.telerik.com/kendo-angular-ui/components/grid/how-to/row-reordering/ document. When I hardcode the grid data on the ts file itself then grid reordering is working with drag and drop. But when I use the rxjs to fetch the data then same functionality is not working.

Not working when I do this. If I moved data fetch logic to Resolve then it will work.

 ngOnInit() {
   this.dataService.GetData().subscribe(data => {
      this.gridData = process(data, {});
     }
   });
 }

But When I do this it is working

ngOnInit() {
    const exampleData = [{id: 1,task: "Initiation3",Flow: 1},
                        {id: 2,task: "Initiation3",Flow: 1},
                        {id: 3,task: "Initiation3",Flow: 1}]
    this.gridData = process(exampleData , {});
}

Is there specific thing I need to do to implement this when I get grid data from service call?

yes, dataService is fetching correctly. In fact it is displaying on UI also but when reorder the row by drag and drop it is not working. Same works with hardcoded data like I mention in question. Also, same logic will work if I move the data fetch logic from OnInit to resolve. I am guessing data fetch should be completed before rendering the view. — LilRazi
Could you prepare a reproducible example in stackblitz? I've tried to re-create this situation, but can't. — igg

Shai Shai · Accepted Answer · 2020-01-13T10:01:16

One difference that jumps out is that fetching the data is asynchronous so you need to tell the change detector to do its job manually.

Add the change detector to your constructor:

constructor(private changeDetector: ChangeDetectorRef) {
    // ...
}

Tell the change detector it has to check for changes:

this.dataService.GetData().subscribe(data => {
    this.gridData = process(data, {});

    this.changeDetector.markForCheck();
});

row reordering not working on Kendo UI grid for angular

1 Answers