CODEWITHSUNDEEP
angularjskendo-uikendo-grid
ps0604
ps0604

Reputation: 1071

How to refresh columns of KendoUI/Angular grid

According to Kendo UI/Angular documentation (see here), the grid does not support re-defining the columns after the widget is instantiated. That's why Kendo provides a k-ng-delay keyword. This works fine, however I need to re-define grid columns many times, not only once. Is there a way to recreate the grid programmatically in Angular? Or any other ideas on how to re-define the grid columns several times?

Upvotes: 2

Views: 5261

Answers (2)

Mark G
Mark G

Reputation: 342

Just to expand on Paulo Soto's answer (Thank you!)

I'm auto-generating columns and this is how i rebind to a completely new resultset + column schema:

var grid = $("#grid").data("kendoGrid"); $scope.mainGridOptions.columns = columnSchema.COLUMNS; $scope.mainGridOptions.dataSource.schema = columnSchema.SCHEMA; $scope.mainGridOptions.dataSource.data = data;

Grid looks like this:

<kendo-grid id="grid" class="qs-site-plannerGrid" k-options="mainGridOptions" k-rebind="mainGridOptions">    </kendo-grid>

Upvotes: 0

Paulo Soto
Paulo Soto

Reputation: 371

You should use the k-rebind attribute to get the widget automatically updated when some scope variable changes:

For example:

<div kendo-grid="grid" k-options="gridOptions" k-rebind="gridOptions">
</div>

In this case, I have specified that if the gridOptions scope variable is updated, the grid needs to be destroyed and recreated.

I've created a demo: http://plnkr.co/edit/sMaIMfrEw5hFRLzFpXvn

More information about k-rebind

Hope this helps!

Upvotes: 6

Related Questions