Combine build-in toolbar item with Custom Item

[Kenneth Tang]

Dear all,

Please advance that how we could define a toolbar with custom option with existing build-in function by using EJ2 MVC, thx.

KennethT

[Madhu Sudhanan P]

Hi Kenneth, 

Thanks for contacting Syncfusion support. 

We can provide both built in and custom toolbar items in a single grid as follows. 

    @{ 

        List<object> toolbarItems = new List<object>(); 

        toolbarItems.Add("Search"); 

        toolbarItems.Add(new { text = "Expand All", tooltipText = "Expand All", prefixIcon = "e-expand", id = "expandall" }); 

        toolbarItems.Add(new { text = "Collapse All", tooltipText = "Collapse All", prefixIcon = "e-collapse", id = "collapseall", align = "Right" }); 

    } 

    @Html.EJS().Grid("Grid").. 

    . . .  

    .Toolbar(toolbarItems).Render() 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/tool-bar#custom-toolbar-items 

Regards, 

Madhu Sudhanan P 

[Kenneth Tang]

Dear Madhu,

Thank for reply.

After we apply the syntax from below

@{

    List<object> toolbarItems = new List<object>();

    toolbarItems.Add("Add");

    toolbarItems.Add("Edit");

    toolbarItems.Add("Delete");

    toolbarItems.Add("Update");

    toolbarItems.Add("Cancel");

    toolbarItems.Add(new { text = "<", tooltipText = "Last Week", id = "lastweek", align = "Center" });

    toolbarItems.Add(new { text = "Calendar", tooltipText = "Calendar", id = "calendar", align = "Center" });

    toolbarItems.Add(new { text = ">", tooltipText = "Next Week", id = "nextweek", align = "Center" });

    toolbarItems.Add(new { text = "Sumbit", tooltipText = "Sumbit", id = "sumbit", align = "Right" });

}

and using the following script to test

<script>

        function toolbarClick(args) {

            if (args.item.id === 'lastweek') {

                alert("ok");

            }

            if (args.item.id === "nextweek") {

                alert("ok2");

            }

        }

</script>

nothing happen when we click on the toolbar with '<' or '>'

Please advance, thx.

KennethT

[Thavasianand Sankaranarayanan]

Hi Kenneth, 

We suspect that you may have missed to bind the toolbarClick event in Grid component. We have prepared a simple sample based on your code example. Please refer to the below code example, Documentation link and sample link. 

[index.cshtml] 

@{ 

    List<object> toolbarItems = new List<object>(); 

    .  .  . 

    toolbarItems.Add(new { text = "<", tooltipText = "Last Week", id = "lastweek", align = "Center" }); 

} 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).ToolbarClick("toolbarClick").Columns(col => 

{ 

 

.   .   . 

 

}).AllowPaging().PageSettings(page => page.PageCount(2)).Toolbar(toolbarItems).Render() 

 

<script> 

    function toolbarClick(args) { 

 

        if (args.item.id === 'lastweek') { 

            alert("ok"); 

        } 

        if (args.item.id === "nextweek") { 

            alert("ok2"); 

        } 

 

    } 

</script> 

Documentation : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/tool-bar#custom-toolbar-items  

Sample                : http://www.syncfusion.com/downloads/support/directtrac/general/ze/custom-toolbar-1906610296  

Regards, 

Thavasianand S.