How would I add Custom AND Standard Tools to the same Toolbar?

[Christine Romano]

I need to have both custom and standard toolsets. Could you provide an example with both?                           

@(Html.EJ().Grid<ItemsViewModel>("ProductGrid")

.CssClass("customGridClass")

.Datasource((IEnumerable<object>)Model.Items)

.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.ExcelExport);

items.AddTool(ToolBarItems.PdfExport);

items.AddTool(ToolBarItems.Search);

//custom Tool

}))

.AllowPaging()

.PageSettings(settings => settings.PageSize(15).PageCount(7))

[Ragavee U S]

Hi Christine,

Thanks for your interest in Syncfusion products.

Based on your requirement, we have created a sample with both the standard and custom toolbaritems. The sample can be downloaded from the below location.

Sample Link:  http://www.syncfusion.com/downloads/support/directtrac/118293/GridSample-1223699484.zip

In the above sample, we have rendered both custom and standard toolbar as in the below code snippet.

@(Html.EJ().Grid<object>("Grid")

        . . . . .

        .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 = "#Details" } });

        })

        . . . . .

        .ClientSideEvents(eve=>eve.Create("create").ToolbarClick("ToolBarClick"))

)

<script type="text/x-jsrender" id="Details">

    <button class="details">Details</button>

</script>

With the CustomToolbarItems API of Grid ToolbarSettings, we can add custom elements to the toolbar of the grid. In the above sample, we have added a button to the toolbar which when clicked, an alert message is displayed stating the customToolbar item is clicked.

Please refer the below code snippet.

<script type="text/javascript">

    function create(args) {

        $(".details").ejButton({ text: "Details" });

    }

    function ToolBarClick(sender) {

        if ($target.hasClass("details")) {

           alert("CustomToolbar item clicked");

        }

    }

</script>

For more information on the customToolbarItems API of Grid ToolbarSettings, please refer the below online links.

Online documentation link: http://help.syncfusion.com/ug/js/default.htm#!documents/toolbar1.htm

Class reference link: http://help.syncfusion.com/UG/JS_CR/ejGrid.html#toolbarSettings->customToolbarItems

Online Sample Link: http://mvc.syncfusion.com/demos/web/grid/toolbartemplate

Please try the sample and get back to us if you need any further assistance.

Regards,

Ragavee U S