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

Personalize toolbar grid options



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

Best regards

1 Reply

BM Balaji Marimuthu Syncfusion Team May 15, 2015 01:56 PM UTC

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



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

.ToolbarSettings(toolbar =>


toolbar.ShowToolbar().ToolbarItems(items =>








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



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:

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

Balaji Marimuthu

Live Chat Icon For mobile
Up arrow icon