We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

enable disable grid view toolbar buttons as per requirement using angular js

Thanks for previous reply
Hi I want to disable enable grid view (header) toolbar button based on my requirement.

Technology which need to use angular,mvc
I have attached screen shot with this thread for your better understanding.

Thanks in advnace

Attachment: grid_49a9f77e.rar

1 Reply

MS Madhu Sudhanan P Syncfusion Team August 13, 2015 09:49 AM UTC

Hi Rakesh,

Thanks for using Syncfusion products.

We can disable or enable the toolbar items using the disableItem and enableItem method of the ejToolbar respectively. And we can use these public method to toggle the state of the grid`s toolbar items.

For your convenience we have created a simple sample in which grid is initialized through AngularJS. Please find the sample from the below link.

Sample Link: http://jsplayground.syncfusion.com/ipw5yxpt

In the above sample, we have used a checkbox to toggle the state of grid`s toolbar items. The ng-change of the checkbox is as follows.

<input type="checkbox" ng-model="add" ng-change="change('add')" />Add

<div id="grid" ej-grid e-datasource="data" e-allowpaging="true" . . . . . " e-toolbarsettings="tools">

                . . . . . .

$scope.change = function (e) {

            //Get toolbar

            var $toolbar = $("#grid_toolbarItems");

            //Get tool to toggle enable

            var li = $("#grid_" + e);

            //Check current status

            var toggle = li.hasClass("e-disable") ? "enable" : "disable";

            //Call enable or disable based on the status.

            $toolbar.ejToolbar(toggle + "Item", li);

And  also please refer the below help link for more information on using toolbar in grid.



Please let us know if you have any queries.

Madhu Sudhanan. P

Live Chat Icon For mobile
Up arrow icon