Add/Remove Toolbar Items in Blazor Toolbar Component

10 Oct 20254 minutes to read

Toolbar items can be added or removed dynamically by updating the underlying data collection, which is then iterated to render the Toolbar component.

In the following demo, the ToolbarItems collection initially contains five items, resulting in five toolbar items being rendered. Clicking the Add Item button adds a new item to the ToolbarItems collection, which then renders as a sixth toolbar item in the Toolbar component. Clicking the Remove Item button removes the first item from the ToolbarItems collection, consequently removing the first toolbar item from the Toolbar component.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="AddItemClick" Content="Add Item"></SfButton>
<SfButton @onclick="RemoveItemClick" Content="Remove Item"></SfButton>
<br />
<br />

<SfToolbar>
    <ToolbarItems>
        @foreach (ToolbarData Item in ToolbarItems)
        {
            <ToolbarItem PrefixIcon=@(Item.PrefixIcon) Text=@(Item.Text) TooltipText=@(Item.TooltipText)></ToolbarItem>
        }
    </ToolbarItems>
</SfToolbar>

@code {
    public class ToolbarData
    {
        public string PrefixIcon { get; set; }
        public string Text { get; set; }
        public string TooltipText { get; set; }
    }
    List<ToolbarData> ToolbarItems = new List<ToolbarData>()
    {
        new ToolbarData
        {
        PrefixIcon = "e-icons e-cut",
        Text = "Cut",
        TooltipText = "Cut"
        },
        new ToolbarData
        {
        PrefixIcon = "e-icons e-copy",
        Text = "Copy",
        TooltipText = "Copy"
        },
        new ToolbarData
        {
        PrefixIcon = "e-icons e-paste",
        Text = "Paste",
        TooltipText = "Paste"
        },
        new ToolbarData
        {
        PrefixIcon = "e-icons e-bold",
        Text = "Bold",
        TooltipText = "Bold"
        },
        new ToolbarData
        {
        PrefixIcon = "e-icons e-underline",
        Text = "Underline",
        TooltipText = "Underline"
        }
    };
    void AddItemClick()
    {
        ToolbarItems.Add(new ToolbarData
        {
            PrefixIcon = "e-icons e-italic",
            Text = "Italic",
            TooltipText = "Italic"
        });
    }
    void RemoveItemClick()
    {
        if (ToolbarItems.Count > 0)
        {
            ToolbarItems.RemoveAt(0);
        }
    }
}