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
close icon

Combine build-in toolbar item with Custom Item

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

3 Replies

MS Madhu Sudhanan P Syncfusion Team November 13, 2018 09:49 AM UTC

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() 



Regards, 
Madhu Sudhanan P 



KT Kenneth Tang November 14, 2018 05:15 AM UTC

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


TS Thavasianand Sankaranarayanan Syncfusion Team November 15, 2018 09:52 AM UTC

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> 



Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon