1. Home
  2. Forum
  3. Blazor
  4. ToolbarItem OnClick

ToolbarItem OnClick

how can I add an OnClick-Eventhandler to the ToolbarItem.

Like:
var item = new ToolbarItem
{
     Text = "Save",
     OnClick=.... //how can I add an handler here?
}


all your examples are without the click-handlers.

3 Replies
AK Alagumeena Kalaiselvan Syncfusion Team March 13, 2020 05:44 AM UTC

Hi Tobias, 

Greetings from Syncfusion support! 

We have validated your reported case and you can add the OnClick event handler to the toolbar item by the defining the event inside the element of ToolbarItem. We have prepared a sample based on your requirement and refer the below code for that 

@using Syncfusion.EJ2.Blazor.Navigations 
 
<EjsToolbar Width="400px"> 
    <ToolbarItems> 
        <ToolbarItem Text="Cut" OnClick="ItemClick"></ToolbarItem> 
        <ToolbarItem Text="Copy"></ToolbarItem> 
        <ToolbarItem Text="Paste"></ToolbarItem> 
        <ToolbarItem></ToolbarItem> 
        <ToolbarItem Text="Bold"></ToolbarItem> 
        <ToolbarItem Text="Underline"></ToolbarItem> 
    </ToolbarItems> 
</EjsToolbar> 
 
@code{ 
    public void ItemClick(ClickEventArgs args) 
    { 
        // Triggers whenever the toolbar item has been clicked 
    } 
} 

Also, you can get this sample using the below link 

Note:  We will include the Toolbar sample with click handlers in the documentation site which can be available for our upcoming bi-weekly patch release. 


Kindly get back to us, If you need further assistance. 

Regards 
Alagumeena.K 


TK Tobias Koller March 13, 2020 07:24 AM UTC

hi Alagumeena,

thank you for the provided sample.
But I need to add the OnClick-Handler in code and not directly as an attribute.

like:
var item = new ToolbarItem
{
     Text = "Save",
     OnClick=.... //how can I add an handler here?
}

_itemList.Add(item);

AK Alagumeena Kalaiselvan Syncfusion Team March 17, 2020 12:32 PM UTC

Hi Tobias, 

Thanks for your patience! 

Currently it is not feasible to achieve your case in Toolbar. By alternate, you can use the Toolbar Clicked event for further customization. Refer the below code for that 

<EjsToolbar Items="Toolbaritems"> 
    <ToolbarEvents Clicked="ItemClick"></ToolbarEvents> 
</EjsToolbar> 
 
@code { 
 
    public List<ToolbarItem> Toolbaritems = new List<ToolbarItem>() 
{ 
        new ToolbarItem() { Text = "Cut" }, 
        new ToolbarItem() { Text = "Copy" }, 
        new ToolbarItem() { Text = "Paste" }, 
        new ToolbarItem() { Type = ItemType.Separator }, 
        new ToolbarItem() { Text = "Undo" }, 
        new ToolbarItem() { Text = "Redo" } 
    }; 
    public void ItemClick(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args) 
    { 
        // Here you can customize your code based on the args.Item value 
    } 
} 

Please let us know, If you need further assistance. 

Regards 
Alagumeena.K 


Loader.
Up arrow icon