In Blazor DataGrid, adding custom icon in Toolbar is not working.

[Syncfusion Support]

Answer:

We suggest you to follow the guidelines provided in the documentation for custom Toolbar items and ensure that you have added the new item with proper icon css class defined in the PrefixIcon attribute. Here is the code snippet for your reference,

<SfGrid @ref="Grid" ID="Grid" DataSource="@Employees" Toolbar="Toolbaritems"> 

    <GridEvents DetailDataBound="DetailDataBound" DataBound="DataBound" TValue="EmployeeData">GridEvents> 

    <GridTemplates> 

        . . . 

SfGrid> 

 

@code{ 

    SfGrid Grid; 

    . . . 

   protected override void OnInitialized() 

    { 

        . . . 

 

        Toolbaritems.Add(new ItemModel() { Text = "Expand all", TooltipText = "Expand all", PrefixIcon = "e-click" }); 

        Toolbaritems.Add(new ItemModel() { Text = "Collapse all", TooltipText = "Collapse all", PrefixIcon = "e-click", Align = (Syncfusion.Blazor.Navigations.ItemAlign.Right) }); 

    } 

    . . . 

} 

 

<style> 

    . . . 

   .e-click::before { 

        content: '\e525'; 

    } 

style> 

You can get the sample for custom icon in Toolbar from here.