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.
Unfortunately, activation email could not send to your email. Please try again.

Personalize toolbar grid options

Thread ID:

Created:

Updated:

Platform:

Replies:

119149 May 14,2015 11:59 AM May 15,2015 09:56 AM ASP.NET MVC 1
loading
Tags: Grid
Juan Peiró Llobet
Asked On May 14, 2015 11:59 AM

 

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 [Syncfusion]
Replied On May 15, 2015 09:56 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;