Customizing the Grid Toolbar

[Fabio Melendez]

What is the best approach to customize the Grid Toolbar. For example I have users that will have permissions to Add rows to the grid and others that won't

I have already created the ToolbarSettings for the grid , but need to be able to make visible or enable/disable one of the buttons (ToolbarItems.Add)

My User Role is determined in the ViewBag, so for example

@if (ViewBag.LoggedUser.CanAdd)

{

        //Enable toolBarItems.Add button in grid

}

[Mohammed Farook J]

Hi Fabio,

Thanks for using Syncfusion products.

 

Based on your request , we have created a sample and the same can be downloaded from the following link:

 

Sample: customToolbar.zip

 

Please find the code snippet for custom button with enable and disable toolbar option in grid.

 

@(Html.EJ().Button("btn").ClientSideEvents(c => c.Click("enableToolBar")).Text("EnableToolBar"))

@(Html.EJ().Button("btn1").ClientSideEvents(c => c.Click("disableToolBar")).Text("DisableToolBar"))

@(Html.EJ().Grid<MvcApplication50.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

       

         .AllowPaging()    /*Paging Enabled*/

        .Columns(col =>

        {

                . . .

       }))

<script type="text/javascript">

    function enableToolBar(args) {

 

        $("#FlatGrid").ejGrid("option", { toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, })

 

    }

 

    function disableToolBar(args) {

        $("#FlatGrid").ejGrid("option", { toolbarSettings: { showToolbar: false}})

           

    }

</script>

 

Please let us know if you have any queries.

 

Regards,

J.Mohammed Farook