custom toolbar mixed with default toolbar items

[Stanislav Gordenko]

I have a task to keep all default grid toolbar items, but to add 2 new buttons and one drop-down list. I do not want to write again standard toolbar items with all their behavoir.

In your documentation I found that it is possible to mix standard and custom items this way:

private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel", new ItemModel() { Text = "Click", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" } };

I studied ItemModel properties and found Template. Could you make a sample of using Template for one custom toolbar element? For example with DropDownList inside?

All standard toolbar items should be saved.

[Kuralarasan Muthusamy]

Hi Stanislav, 

 

Thanks for contacting Syncfusion support. 

 

From your query, we found that you want to render the dropdown list component with built-in Grid toolbar items. But in blazor Grid, we can render only button or text by using this built-in custom toolbar items option. So, If you need to render other than these elements, then you can use the below suggested way to achieve this requirement. But while using this way you need to render built-in toolbar by your own. 

 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar-with-dropdown-list 

Regards, 

Kuralarasan M 

[Helvio]

Hi Stan, I am trying to do the same. I need to add a button with a before icon for a grid beside the standard buttons of add, edit, update, cancel.

I used the same function ItemModel(). The button was added and is working well, but the e-click icon is not appearing.

Did you solve this issue?

Thanks

[Renjith Singh Rajendran]

Hi Helvio, 

Greetings from Syncfusion support. 

We suggest you to ensure to define the style for the e-click class to apply icons in toolbar, as like the code provided in the below documentation. 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/?#built-in-and-custom-items-in-toolbar 

Please ensure to add the below style in your application. 

<style> 

    .e-click::before { 

        content: '\e525'; 

    } 

</style> 

We have also prepared a sample with the codes from above documentation. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerSample-698045341 

And also please refer the below documentation for the available icons. 

https://blazor.syncfusion.com/documentation/appearance/icons/ 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran