ToolbarItem OnClick

[Tobias Koller]

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.

[Alagumeena Kalaiselvan]

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 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Toolbar-1126156756  

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 

[Tobias Koller]

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

[Alagumeena Kalaiselvan]

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