show or hide columns in kendo ui grid + angular js - angularjs

Question

I am using Kendo UI grid in angular js. Grid is displaying correctly.
but I want to hide a particular column based on user type.
I have tried like below, but its not working.
Here my angular controller code:
$scope.blogGridOptions = {
dataSource: {
pageSize: 10,
autoBind: false,
transport: {
read: function (e) {
$http.get('/Blog/GetAllBlogs')
.then(function success(response) {
if (response.data.success) {
e.success(response.data.blogs);
}
});
gridCallback = e;
}
}
},
sortable: true,
pageable: true,
resizable: true,
filterable: true,
columns: [{
field: "BlogTitle",
title: "Blog Title",
width: "300px",
filterable: false
}, {
field: "BlogContent",
title: "Blog Content",
width: "300px",
filterable: false
}, {
field: "ApprovalStatus.ApprovalStatus",
title: "Approval Status",
width: "300px",
filterable: false
}, {
field: "Actions",
width: "300px",
template: function (e) {
var str = '';
str = str + 'Edit';
str = str + ' | Delete';
return str;
},
filterable: false
}, {
hidden: function (e) { return e.userDetails.UserTypeId == 1 ? false : true; } ,
title: "Approve",
template: function (e) {
return '<button type="button" class="btn btn-success" ng-click="blog.approveBlogs(dataItem,2)"><i class="fa fa-check"></i></button> <button type="button" class="btn btn-danger" ng-click="blog.ignoreBlogs(dataItem,3)"><i class="fa fa-close "></i></button>';
}
}]
}
MVC View code:
<div kendo-grid="blogGrid" options="blogGridOptions" id="gridBlog"></div>
if usertypeid is 1, that column should show, for other users, it should be hidden.
PLease help to resolve this issue.

Answer 1

You can use hidecolumn in your dataBound event that is on the options of the grid. Not sure where you are getting the userTypeId from, but let's say it's bound to the controller and the column's name is 'approved'
dataBound: function(e) {
if(vm.userDetails.UserTypeId !== 1){
this.hideColumn('approved');
}
},