For example, when the OverflowMode of a Toolbar is set to ToolBarOverflowMode.None/Scroll, changing a tool’s parameters programmatically can cause overflowed tools to disappear.
Reproduction example: https://blazorrepl.telerik.com/mzYKQEYM23bGXmvN56
In the meantime, a possible alternative is to use Adaptive="false" instead OverflowMode="ToolBarOverflowMode.None"
Description
Adaptive Toolbar buttons do not appear in the overflow popups when expected.
Steps To Reproduce
https://demos.telerik.com/blazor-ui/toolbar/adaptive
https://blazorrepl.telerik.com/mTuAEzPe41y4e7y637
Use the slider to reduce the witdh of the toolbars
Actual Behavior
Visible buttons that disappear from the toolbar do not appear in the two popups.
Expected Behavior
Visible buttons that disappear from the toolbar should appear in the overflow popup.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
8.1.1
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;
}
}
The "Bold" button in the code snippet below remains visible despite the fact that it's Visible property is false
<TelerikToolBar>
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();
}
}
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.