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

[Rakesh Advani]

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

[Madhu Sudhanan P]

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">

                . . . . . .
</div>

$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.

http://helpjs.syncfusion.com/js/api/ejtoolbar#methods:disableitem

http://helpjs.syncfusion.com/js/grid/toolbar

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P