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

Combine build-in toolbar item with Custom Item

Thread ID:

Created:

Updated:

Platform:

Replies:

140871 Nov 12,2018 02:43 PM UTC Nov 15,2018 09:52 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Kenneth Tang
Asked On November 12, 2018 02:43 PM UTC

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 [Syncfusion]
Replied On 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 


Kenneth Tang
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon