How can I set class on custom toolbar item ?

[Tomasz S.]

I can't set specific class (for example e-primary) for button, because it adds a div level higher and does not work on the button

Example for Grid Toolbar. 

var items = new List<object>();
items.Add("Search");
items.Add("ColumnChooser");


items.Add(new ItemModel
    {
        Id = "AddBtn",
        Text = "Dodaj",
        PrefixIcon = "e-icons e-plus",
        Type = ItemType.Button,
        CssClass = "e-primary",
        Disabled = IsAddButtonDisabled
    });

[Guhanathan Ramanathan]

Hi Tomasz s  ,

Based on your query, we understand that you are trying to use the CssClass property to apply custom styling to the toolbar buttons. To achieve this, we suggest targeting the .e-btn class in your CSS, postfixed with your custom class name, as shown in the below code snippet. This ensures that the styles are properly applied to the toolbar button elements.

Code Snippet:

<SfGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" Height="200" Toolbar=@Toolbaritems>

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>

    <GridGroupSettings Columns=@GroupColumn></GridGroupSettings>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="120"></GridColumn>

</SfGrid>

<style>

/* Style the actual button inside */

.e-toolbar-item.custom-add-btn .e-btn {

    background-color: red;

    color: white;

}

.e-toolbar-item.custom-add-btn .e-btn:hover {

    background-color: red;  /* your preferred hover color */

    color: white;               /* keep text visible */

}

</style>

@code {

 

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

        Toolbaritems.Add(new ItemModel() { Text = "Expand all", TooltipText = "Expand all", PrefixIcon = "e-expand", CssClass = "custom-add-btn" });

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

    }

  

}

ScreenShot:

We have also attached the corresponding sample for your reference. Please check it from your end and let us know if the behavior meets your requirement.

Sample: https://blazorplayground.syncfusion.com/embed/hXLRZTNqLviEhtLf?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2

Please get back to us if you need further assistance.

Regards,
Guhanathan R 

[Tomasz S.]

But I don't want to set the color, but rather use a class, such as e-primary. 

This class may have a different color in different themes.

[Guhanathan Ramanathan]

Hi Tomasz s ,

Based on your query, we understand that you would like to apply the e-primary styling to your Toolbar items. However, since the CssClass property on a ToolbarItem applies to the wrapper <div> rather than the inner button element, the primary styling is not automatically inherited by the button. To enforce the style, you can target the .e-btn class in your CSS, postfixed with your custom class name and achieve your requirement which was already suggested in our previous update.

 

Alternatively, you can use the Template property in the item model to render a SfButton directly with CssClass set to e-primary. This ensures the primary styling is applied to the button itself. Please refer the code snippet and attached sample for your reference.

Code Snippet:

<SfGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" Toolbar=@Toolbaritems Height="100%">

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>

    <GridGroupSettings Columns=@GroupColumn></GridGroupSettings>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="120"></GridColumn>

        . . . . 

        . . . . 

        <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

 

 

@code {

 

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

        Toolbaritems.Add(new ItemModel() {  TooltipText = "Expand all", PrefixIcon = "e-expand", CssClass = "custom-add-btn",  Template = @<SfButton CssClass="e-primary custom-add-btn" Content="Expand all"></SfButton> });

        Toolbaritems.Add(new ItemModel() { Text = "Collapse all", TooltipText = "Collapse all", CssClass = "custom-add-btn1", PrefixIcon = "e-collapse-2", Align = (Syncfusion.Blazor.Navigations.ItemAlign.Right) });

    }

 

}

Screenshot:

 

Sample:https://blazorplayground.syncfusion.com/embed/rXLHXJDGKbFFAWAh?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2

 

Please get back to us if you need any further assistance.

Regards,

Guhanathan R

[Tomasz S.]

But icon is not visible.

[Naveen Palanivel]

Hi Tomasz,

We checked your query and it seems that the Expand All button icon is missing. To add the expand icon inside the button, please use the IconCss property with the icon name and set the position of the icon to either Left or Right using the IconPosition property. Please refer to the below code snippet, image, and sample for your reference.

Sample : https://blazorplayground.syncfusion.com/VDVdjpNPUfcMGZcA

   protected override void OnInitialized()

   {

       Orders = OrderData.GetAllRecords();

       Toolbaritems.Add(new ItemModel()

       {

           TooltipText = "Expand all",

           Text = "Expand all",

           CssClass = "custom-add-btn",

           Template = @<SfButton CssClass="e-primary" IconCss="e-icons e-expand"

                                 IconPosition="IconPosition.Left"

                                 Content="Expand all">

           </SfButton>

       });

       Toolbaritems.Add(new ItemModel() { Text = "Collapse all", TooltipText = "Collapse all", CssClass = "custom-add-btn1", PrefixIcon = "e-collapse-2", Align = (Syncfusion.Blazor.Navigations.ItemAlign.Right) });

   }

 

Regards,
Naveen

[Tomasz S.]

How can I identify which button was pressed if there is more than one?

[Prathap Senthil]

Based on your query to identify which toolbar button was clicked when multiple buttons are present in the DataGrid toolbar, you can handle the OnToolbarClick event and check the properties of the clicked item from the event arguments. In this event, the specific button can be identified using values such as args.Item.Text, args.Item.TooltipText, or args.Item.CssClass. When toolbar buttons are added using templates, checking the Id or Text property is the most convenient and reliable approach to determine which button was pressed and perform the corresponding action. Kindly refer to the below code snippet and sample for your reference.

Code Snippet:

 

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

        Toolbaritems.Add(new ItemModel()

        {

            TooltipText = "Expand all",

            Text = "Expand all",

            CssClass = "custom-add-btn",

            Template = @<SfButton CssClass="e-primary" IconCss="e-icons e-expand"

                                  IconPosition="IconPosition.Left"

                                  Content="Expand all">

            </SfButton>

        });

        Toolbaritems.Add(new ItemModel()

        {

            TooltipText = "Expand 1",

            Text = "Expand 1",

            CssClass = "custom-expand-btn",

            Template = @<SfButton CssClass="e-primary"

                                  IconPosition="IconPosition.Left"

                                  Content="Expand 1">

            </SfButton>

        });

        Toolbaritems.Add(new ItemModel() { Text = "Collapse all", TooltipText = "Collapse all", CssClass = "custom-add-btn1", PrefixIcon = "e-collapse-2", Align = (Syncfusion.Blazor.Navigations.ItemAlign.Right) });

    }

 

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Text == "Expand all")

        {

            Console.WriteLine("Expand all");

           // await this.Grid.ExpandAllGroupAsync();

        }

        if (args.Item.Text == "Collapse all")

        {

            Console.WriteLine("Collapse all");

            //await this.Grid.CollapseAllGroupAsync();

        }

        if (args.Item.Text == "Expand 1")

        {

          Console.WriteLine("Expand 1");

         

        }

   

Sample: https://blazorplayground.syncfusion.com/embed/rjhdNejchmhisaJs?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2