Search code examples
javascriptangularjskendo-uikendo-gridkendo-ui-grid

How to bind kendo grid data to scope variable in angularjs?


I have following kendo grid in html:

<div #grid kendo-grid="kendoGrid" k-data-source="DataSource" k-resizable='true' k-scrollable='true' k-pageable='true' k-columns="gridColumns" k-editable="true" k-sortable="true" k-toolbar="toolBar" k-column-menu="true" k-filterable="true">

and following buttons defined as template in angular js controller:

this.$scope.toolBar = [
        {
            template: "<a class='k-button k-button-icontext' ng-click='saveEdits(data)')>Save Changes</a>"                                 
        },
        {
            name: "cancel"
        }
]

The saveEdits(data) is a method in the same angular js which I want to call on button click. What parameter to pass with this method that contains grid data?


Solution

  • After a lot of research, I found out that a scope variable in angularjs can be bound with kendo grid data with following syntax:

    this.$scope.gridData = angular.element("#kendoGrid").data("kendoGrid").dataSource._data;
    

    The scope variable gridData actually becomes array of rows of kendo grid, where each row is an array of columns(fields).