Duplicated
Last Updated: 18 Sep 2024 08:32 by ADMIN
Created by: Constantinos Petridis
Comments: 1
Category: ToolBar
Type: Feature Request
7

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

Completed
Last Updated: 04 Sep 2024 10:32 by ADMIN
Release 2024 Q4 (Nov)

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;
    }
}

Completed
Last Updated: 05 Aug 2024 13:30 by ADMIN
Release 6.1.0

The "Bold" button in the code snippet below remains visible despite the fact that it's Visible property is false

<TelerikToolBar>

    <ToolBarButtonGroup>
        <ToolBarButton Icon="@SvgIcon.Bold" Visible="false">Bold</ToolBarButton>
        <ToolBarButton Icon="@SvgIcon.Italic">Italic</ToolBarButton>
        <ToolBarButton Icon="@SvgIcon.Underline">Underline</ToolBarButton>
    </ToolBarButtonGroup>
</TelerikToolBar>

 

Unplanned
Last Updated: 22 Feb 2024 06:57 by Michal

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.

Unplanned
Last Updated: 01 Sep 2023 12:54 by Benjamin

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();
    }
}

Unplanned
Last Updated: 11 Aug 2023 13:45 by Pavel

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

Completed
Last Updated: 21 Mar 2023 14:05 by ADMIN
Release 4.2.0 (26/04/2023)
If I have a ToolBarItem set to Overflow.Auto and vertically shrink the screen the item is duplicated both in the Overflow popup and in the visible portion of the toolbar. 
Completed
Last Updated: 06 Dec 2022 09:38 by ADMIN
Release 4.0.0 (18 Jan 2023) (R1 2023)
Created by: Rick
Comments: 1
Category: ToolBar
Type: Feature Request
1

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

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

Unplanned
Last Updated: 22 Jun 2022 06:07 by Miroslav
Created by: Miroslav
Comments: 0
Category: ToolBar
Type: Feature Request
2
It seems that the tooltip for the "More tools" button (with three vertically aligned dots) on the right side of toolbars is hardcoded and cannot be localized, can you check that, please?
Completed
Last Updated: 12 Apr 2022 11:53 by ADMIN
Release 3.2.0
Created by: Marc
Comments: 3
Category: ToolBar
Type: Feature Request
18
  • 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.
Completed
Last Updated: 02 Feb 2022 11:01 by ADMIN
Release 3.1.0
Unlike the TelerikButtons, ToolbarButtons do not have appearance settings options - for example ThemeColor, FillMode, Size etc.
Unplanned
Last Updated: 15 Jun 2021 16:15 by ADMIN

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.