Personalize toolbar grid options

[Juan Peiró Llobet]

 

Hi

We are using version 12.4.0.30 of MVC and we would like to know, how is possible personalize the toolbar grid (ToolBarItems) and add new functions.

Best regards

[Balaji Marimuthu]

Hi Juan,

Thanks for using Syncfusion Products.

We have achieved your requirement by using the CustomToolbarItem property in Grid.

Please find the sample and code snippet below.
Sample: GridMvc_-customize_toolbar.zip

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

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

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Delete);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

})

.CustomToolbarItems(new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Refresh" } });

})

. . . . .

.ClientSideEvents(eve => { eve.ToolbarClick("onToolBarClick"); })

)

<script type="text/javascript">

function onToolBarClick(sender) {

var tbarObj = $(sender.target);

if (tbarObj.hasClass("refresh"))

this.refreshContent(); // bindng function to the custom toolbar items

}

</script>

<script id="Refresh" type="text/x-jsrender"> @*Render custom toolbar*@

<a id="refreshButton" class="e-toolbaricons e-icon">

<img class="refresh" src="../../Content/ej/images/refresh.png" width="20" height="24" />

</a>

</script>

By using Custom Toolbar we can customize the toolbar elements and the corresponding actions are performed in the ToolbarClick event.

Please refer the online documentation for further details regarding customize the toolbar items from the following link:
http://www.syncfusion.com/kb/2491/how-to-customize-toolbar-with-button-icon-and-link

Please let us know if you require further assistance on this.

Regards,
Balaji Marimuthu