The following HTML / JavaScript explains how to dynamically change Kendo UI grid columns, by using the Kendo – Angular directives.

 

<!doctype html> <html ng-app="researchApp"> <head> <meta charset="utf-8"> <title>Dynamically change Kendo grid columns.</title> <link href="/Client/Libraries/Kendo/css/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="/Client/Libraries/Kendo/css/kendo.silver.min.css" rel="stylesheet" type="text/css" /> <script src="/Client/Libraries/Kendo/js/jquery.min.js"></script> <script src="/Client/Libraries/Angular/angular.js"></script> <script src="/Client/Libraries/Angular/angular-route.js"></script> <script src="/Client/Libraries/Angular/angular-sanitize.js"></script> <script src="/Client/Libraries/Kendo/js/kendo.all.min.js"></script> <script src="/Client/Libraries/Angular/angular-kendo.js"></script> <script src="/Client/Libraries/Q/q.min.js"></script> <script src="/Client/Libraries/Breeze/breeze.debug.js"></script> </head> <body ng-controller="researchCtrl"> <button ng-click="execute1($event)">Execute 1</button> <button ng-click="execute2($event)">Execute 2</button> <!-- By supplying the string "grid" to the kendo-grid directive, the kendo grid will be made available

to the $scope as $scope.grid. --> <!-- All initial configuration of the kendo grid is provided by the $scope.gridOptions. --> <!-- The kendo grid will "refresh" / "rebind" itself, when the $scope.selectedType changes. --> <div kendo-grid="grid" k-options="gridOptions" k-rebind="selectedType"></div> <script> // Main entry point of the application. // Kendo - Angular needs the ["kendo.directives"] to be injected. var researchApp = angular.module("researchApp", ["kendo.directives"]); researchApp.controller('researchCtrl', function ($scope) { var GridModel1 = kendo.data.Model.define({ id: 'Id', fields: { company: { type: 'string' }, os: { type: 'string' } } }); var GridModel2 = kendo.data.Model.define({ id: 'Id', fields: { FirstName: { type: 'string' }, LastName: { type: 'string' }, Description: { type: 'string' } } }); var gridOptions1 = { dataSource: new kendo.data.DataSource({ data: new kendo.data.ObservableArray([ new GridModel1({ Id: 1, company: 'Apple', os: 'OSX' }) ]), schema: { model: GridModel1 } }) }; var gridOptions2 = { dataSource: new kendo.data.DataSource({ data: new kendo.data.ObservableArray([ new GridModel2({ Id: 1, FirstName: 'John', LastName: 'Do', Description: "My test description." }) ]), schema: { model: GridModel2 } }) }; // Selected type is used to rebind the kendo ui grid. $scope.selectedType = ""; $scope.gridOptions = gridOptions1; $scope.execute1 = function (e) { // Switch $scope.gridOptions = gridOptions1; $scope.selectedType = "Software"; }; $scope.execute2 = function (e) { $scope.gridOptions = gridOptions2; $scope.selectedType = "Employee"; }; }); </script> </body> </html>

Initial screendump:

image

 

Screendump after clicking on the “Execute 2” button:

image

One Comment

  1. Hi,
    What is the data source was in the form of:


    var ds = new kendo.data.DataSource({
    transport: {
    read: function(options) {
    esWebApiService.fetchPublicQuery(GroupID, FilterID, {})
    .success(function(pq) {
    options.success(pq);
    $log.info(“Executed”);
    });
    }
    },
    schema: {
    data: “Rows”,
    total: “Count”
    },
    serverPaging: true,
    pageSize: 5
    });

    It seems that k-ng-delay on options with conjunction to k-rebind does not work as it does with static models.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.