Kendo Grid How to hide column in Angular scope function?

Question

I would like to ask, how to hide dynamically column in Kendo Grid in the Scope Angular JS function?

I tried to do by using this Fiddle:

http://jsfiddle.net/OnaBai/XNcmt/

But if i'm trying to do same function in Angular scope function after ng-click:

$scope.hideColumn = function () {
            console.log("Hidding");
            grid.hideColumn("user_role");
};

I get error:

TypeError: undefined is not a function
    at Scope.$scope.hideColumn

How can i do it properly (not only hidding, but locking, etc..) ?

Thans for any advice.

Answer 1

If you have a kendo grid name set by Kendo, you can access that from the $scope in your controller.

eg

    <div id="someId" data-kendo-grid="accessMeFromTheControllerID"
    k-auto-bind="false" 
    k-data-source-init={... removed for brevity...}
    k-columns="[
        { field: 'id', title: 'Id' },
        { field: 'columnToBeHidden', title: 'I should be hidden!' }
       ]"
    ></div>

You can access this from the controller and hide the column using:

$scope.accessMeFromTheControllerID.hideColumn('columnToBeHidden');

If you want to use JQuery (not angular-ish but can be good to know)

$("#accessMeFromTheControllerID").data("kendoGrid").hideColumn('customerName');