HtmlAttributes of ToolbarItem not working on Blazor Client (wasm) version 18.3.0.42.

Related to Blazor WebAssembly (so client side, not server side), latest version of Syncfusion (18.3.0.42)

When used in ToolbarItem, the HtmlAttributes parameter does no effects.

Example:
            <SfToolbar OverflowMode="OverflowMode.Popup">
                <ToolbarItems>
                    <ToolbarItem Text="@V["Save"]" Disabled="true"></ToolbarItem>
                    <ToolbarItem HtmlAttributes="@saveAttr" SuffixIcon="fa fa-check" TooltipText="@V["Save"]" Disabled="false"></ToolbarItem>
                </ToolbarItems>
            </SfToolbar>

@code
{
private Dictionary saveAttr = new Dictionary()
{
{"class","test_class" },
{"type","submit" }

};
}

The type of the button is still "button" and the class "test_class" is not appended to the class attribute of the resulting button.
This is against what documented at:

- https://blazor.syncfusion.com/documentation/toolbar/how-to/set-command-customization/
- https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_HtmlAttributes

(also please, update the last link listed above specifying which attributes can be modified using HtmlAttributes)


The same code used with an "SfButton" works:

            <SfToolbar OverflowMode="OverflowMode.Popup">
                <ToolbarItems>
                    <ToolbarItem Type="ItemType.Input">
                        <Template>
                            <SfButton Content="Save" HtmlAttributes="@saveAttr" IconCss="fa fa-check" />
                        </Template>
                    </ToolbarItem>
                </ToolbarItems>
            </SfToolbar>

In this case the HtmlAttributes are correctly used.

1 Reply 1 reply marked as answer

SK Satheesh Kumar Balasubramanian Syncfusion Team October 23, 2020 09:58 AM UTC

Dear customer, 
  
Greetings from Syncfusion Support. 
  
We have validated your reported problem query and let you know that the HtmlAttributes is applied only to toolbar item which is the default behaviour of toolbar. If you want to add HtmlAttributes value to button, we suggest you to define the button as template in toolbar item. 

Code snippet:  
@using Syncfusion.Blazor.Navigations 
@using Syncfusion.Blazor.Buttons 
  
<SfToolbar OverflowMode="OverflowMode.Popup"> 
    <ToolbarItems> 
        <ToolbarItem Type="ItemType.Input"> 
            <Template> 
                <SfButton Content="Save" HtmlAttributes="@saveAttr"/> 
            </Template> 
        </ToolbarItem> 
    </ToolbarItems> 
</SfToolbar> 
  
@code 
{ 
    private Dictionary<string, object> saveAttr = new Dictionary<string, object>() 
    { 
            {"class","test_class" }, 
            {"type","submit" } 
    }; 
} 
  
  
Regards, 
Satheesh Kumar B 


Marked as answer
Loader.
Up arrow icon