Remove single item in Kendo UI Grid using AngularJs

Question

I have a Kendo UI Grid on a site with AngularJs. How can I update/add/delete one single array item inside a the DataSource and have the Grid update without refreshing the entire grid?

If I try just replacing the DataSource object, the grid sure enough updates, but all grouping, column ordering and sorting gets reset.

Update #1 - Persistent Scroll Position

I achieved this by reading this post: http://www.telerik.com/forums/kendo-grid-how-to-keep-scoll-position-after-calling-sync-(with-batch-property-set-to-true) ending up with this code:

$scope.activityGridOptions = {
  scrollable: true,
  dataBound: function(e) {
    restoreScrollState();
  },
  dataBinding: function(e) {
    saveScrollState();
  }
  // ...
}

function saveScrollState() {
  $("#kendogrid .k-grid-content").scroll(function () {
    webStorage.local.add("gridScrollTop", $(this).scrollTop());
    webStorage.local.add("gridScrollLeft", $(this).scrollLeft());
  });
}

function restoreScrollState() {
  // Restore scroll state
  $("#kendogrid .k-grid-content").scrollTop(webStorage.local.get("gridScrollTop"));
  $("#kendogrid .k-grid-content").scrollLeft(webStorage.local.get("gridScrollLeft"));
}

Update #2: Angular ui-grid

After struggeling with Kendo UI Grid for two weeks, I finally abandonned the entire framework yesterday evening. Then I picked one of the top other Grids - and ended up with Angular ui-grid which I was able to program to replace Kendo UI Grid after about 7 hours of work.

I am not saying Kendo UI is bad software, but to me it doesn't seem to speak Angular well. At least not with my specific requirements.

Sergiu Paraschiv Sergiu Paraschiv · Accepted Answer · 2015-04-10T12:08:39

DataSource exposes the following methods you can use: - add - at - get - insert - remove

With these you can update/add/delete items in the DataSource without replacing it entirely. All of these methods set the DataSource as "dirty" so the UI is automatically updated.

Remove single item in Kendo UI Grid using AngularJs

1 Answers