Programmatic changes to the Overflow parameter of ToolBar items do not take effect until the user resizes the browser window. This is because the internal item collections are updated only during initialization and window resize.

A possible workaround is to recreate the ToolBar items when making changes to them.

Test Page with the workaround:

<TelerikToolBar Adaptive="true">
    @if (ShouldRenderToolBarItems)
    {
        <ToolBarButton>Foo</ToolBarButton>
        <ToolBarButton Overflow="@PrintOverflow">Print</ToolBarButton>
        <ToolBarButton>Bar</ToolBarButton>
    }
</TelerikToolBar>

<TelerikButton OnClick="TogglePrint">Toggle Print</TelerikButton>

@code {
    private ToolBarButton printButton = default!;
    private TelerikToolBar toolbar = default!;

    private ToolBarItemOverflow PrintOverflow { get; set; } = ToolBarItemOverflow.Auto;

    private bool ShouldRenderToolBar { get; set; } = true;
    private bool ShouldRenderToolBarItems { get; set; } = true;

    private async Task TogglePrint()
    {
        // Uncomment to enable the workaround
        //ShouldRenderToolBarItems = false;

        await Task.Delay(1);

        if (PrintOverflow == ToolBarItemOverflow.Always)
        {
            PrintOverflow = ToolBarItemOverflow.Auto;
        }
        else
        {
            PrintOverflow = ToolBarItemOverflow.Always;
        }

        ShouldRenderToolBarItems = true;
    }
}

Where there is a spacer inside the ToolBar or when there are no items that should be hidden anymore, the overflow anchor overlay with the other items.

#1563693

When Adaptive = true, changing the collection of buttons seems to "break" the adaptive calculation. The Toolbar fails to determine what are the buttons to show in the main element and what are the buttons to show in the pop-up: https://blazorrepl.telerik.com/wSubOWlS08FLz7aZ54

===

ADMIN EDIT

For the time being, a possible workaround is to force the component to refresh when you change the buttons. For that purpose, you can dispose it and re-initialize it after some delay. Here is a runnable sample: https://blazorrepl.telerik.com/QIOFuCvS400o5tfL34.

lm applying class like this :

<TelerikToolBar>
            <ToolBarButton Class="my-custom-class" ...  />
            <ToolBarTemplateItem Class="my-custom-class">
...
            </ToolBarTemplateItem>
</TelerikToolBar>

But the resulting div for the ToolBarITemplateItem does not get class applied to it.

=====ADMIN EDIT=====

A possible workaround for the time being is to use different CSS selectors in order to style the specific elements:

<style>
    .second-template-item {
        border: solid;
        border-color: limegreen;
    }

    .my-group button:nth-child(1) {
        border: solid;
        border-color: red;
    }

    .my-group button:nth-child(3) {
        border: solid;
        border-color: blue;
    }
</style>

<TelerikToolBar>
    <ToolBarButtonGroup Class="my-group">
        <ToolBarButton>Bold</ToolBarButton>
        <ToolBarButton>Italic</ToolBarButton>
        <ToolBarButton>Underline</ToolBarButton>
    </ToolBarButtonGroup>
    <ToolBarSeparator />
    <ToolBarTemplateItem>
        <TelerikDropDownList Data="@Roles" @bind-Value="@SelectedRole" />
    </ToolBarTemplateItem>
    <ToolBarTemplateItem>
        <TelerikDropDownList Class="second-template-item" Data="@Roles" @bind-Value="@SelectedRole" />
    </ToolBarTemplateItem>
</TelerikToolBar>

@code {
    public string SelectedRole { get; set; }

    public List<string> Roles { get; set; } = new List<string>()
    {
         "Manager", "QA", "Developer", "Support"
    };

    protected override void OnInitialized()
    {
        SelectedRole = Roles.FirstOrDefault();
    }
}

Description

The AdaptiveToolBar does not display all items in the overflow section (more buttons) when there are Buttons with Visibility set to false.

Reproduction (if bug)

1. Run the REPL snippet

2. Shrink the window size so that the toolbar is narrower and some buttons are hidden

3. Open the Overflow list

4. Refresh and Refresh All buttons are missing from the list

Current (if bug)

Buttons with Visible=false parameter should not affect the overflowed button collection.

Expected (if bug)

All buttons that are Visible=true and overflowed should be available in the more buttons section.

Browser (if bug)

All

Project type (if bug)

All

The ToolBarButton is missing the ability to set the "aria-label".

When attempting to just add it directly, I get the following error:

• Missing overflow hamburger functionality. When small devices some item should move to the hamburger overflow.
• Floating items left or right as on kendo ui toolbar.

Use a ToolBar with its ToolBarTemplateItem (with DropDownList inside of the template) in a separate component. Try to switch values in the DropDownList with the arrows of the keyboard. The value in the DropDownList does not change until you move away from it with a right arrow. This only happens when the template with the dropdown inside is in a separated component.

-------------------- ADMIN EDIT --------------------

The workaround for such a scenario is to export the DropDownList too onto a separated component and then call it in the ToolBarTemplateItem. See the attached sample project.