BUG: setting a kendo ToolBar item.hidden with type of separator does not work. The separator is still displayed. For example:
```
$("#mytoolbar").kendoToolBar({
    items: [
        {
            type: "button",
            text: "button 1",
            hidden: true
        },
        {
            type: "spearator",
            hidden: true
        }
    ]
});
```

In this case, the button is hidden but the separator is not.

In the KendoToolBar item configuration, there is currently a property called "overflow". The values of this property are: "never", "always", and "auto" (default). If the item.overflow value is set to "never" then the item remains in the toolbar and is not added to the overflow menu when the window shrinks. If the value is set to "always" or "auto", then the item is displayed in the overflow menu. The problem, however, is that sometimes you may want a toolbar item to disappear when the page shrinks, but you don't want or need it in the overlow menu.

A specific example is a toolbar item of type "separator". When the separator item.overflow is set to "auto", it adds a gap in the overflow menu between other items. I don't want this gap. Therefore, I set the separator item.overflow to "never". Unfortunately, this means that the separator remains on the toolbar. In the case where I have several separators in the toolbar with overflow set to "never", these all just stack up next to each other in the toolbar as the window is shrunk. I want them to disappear, but also not show up in the overflow menu. An overflow value of "hidden" could solve this problem.

Many Kendo UI Widgets support enabling/disabling animations via their options. In our case, we always disable them. As of R1 2023, the toolbar widget does not support customizing or turning off animations and always slides in/out the options of splitButtons or the overflow menu.

To maintain a consistent look&feel, disabling animations should by supported by the toolbar as well.

Do you have any suggestions how this could be fixed in the meantime?

Method to reset the menuButton items of a toolbar's splitbutton dynamically or to have a datasource that can be refreshed/reloaded.

Assume there is a Toolbar with a splitButton that has a subItem. Both the splitButton and the subItem have clickHandlers configured. As long as the splitButton is not in the toolbar's overflow, everything is working correctly. However, when overflown, clicking on the subItem executes the clickHandler of the splitButton instead of the clickHandler of the subItem.

This behavior can be reproduced in the following DOJO: https://dojo.telerik.com/enanUKan/3. Watch the console output when clicking the splitButton/its subItem.

Two more hints:

• The bug does not occur when using Kendo UI versions < 2021 R1 SP1 (2021.1.224).
• The bug does not occur when the splitButton has no clickHandler.

Unfortunately, both options are no viable solution for us. Any suggestions?

Hi Team,

I would like to request a built-in way to set the order of items for the overflow menu in a different manner compared to the non-overflow items in the toolbar.  

Thanks!

Good Day,

I believe it would be useful to update the `add` method to include the added items data Object, as you need to provide one to add it in the first place, to the options.items array in the widget itself. It would be consistent with the design of the widget in the first place and can allow dynamic code to iterate over newly added items without catering for specific bespoke IDs

Thankyou for your time,

Regards

Nathan

The Typescript definitions for Kendo UI define the kendo.ui.ToolBarOpenEvent as follows:

interface ToolBarEvent {
        sender: ToolBar;
        preventDefault: Function;
        isDefaultPrevented(): boolean;
}

interface ToolBarOpenEvent extends ToolBarEvent {
        SplitButton?: JQuery | undefined;
}

The event is also documented that way in https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/events/open. However, the corrersponding method in kendo-toolbar.js:446-453 does the following:

open: function (e) {
    var isDefaultPrevented = that.toolbar.trigger(OPEN, { target: element });
    if (isDefaultPrevented) {
        e.preventDefault();
        return;
    }
    that.adjustPopupWidth(e.sender);
},

The documentation at  https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items.menubuttons does not mention the children of a splitButton can have their own click handlers. It's not present in the typings either.

However, this does work: https://dojo.telerik.com/@GaloisGirl/UYeBewEX

Somewhat related is this bug: https://github.com/telerik/kendo-ui-core/issues/4542  . Documenting the behavior would be useful in accurately describing this bug.

Describe the bug
In IE11 on resizing horizontally the browser window, the text of the ToolBar's tools overlaps.

To reproduce
Steps to reproduce the behavior:

1. Open: dojo example in IE11.
2. Resize the browser window making it narrower.

The tools size is not properly calculated and text overlapping can be observed (see the screenshot linked below). Overflow hidden is not set to the button tool and the k-input elements are resized on resizing the browser window.

The following CSS rule can be used as a workaround:

.k-toolbar .k-button,
.k-toolbar .k-input {
  overflow: hidden;
  flex: 0 0 auto;
}

Expected behavior
The ToolBar tools should properly resize on browser window resize. No text overlapping should occur.

Screenshots
Screenshot.

Affected package (please provide)

• theme-default
• theme-bootstrap
• theme-material

Affected suites (please provide)

• Kendo UI for jQuery

Affected browsers (please provide)

• IE version: 11

Build system information (please provide)

• OS: Windows
• Node version: N/A
• NPM version: N/A

Additional context
N/A

I tested the toolbar example https://demos.telerik.com/kendo-ui/toolbar/keyboard-navigation with a keyboard and screen reader (NVDA) and found the following issues:

1. Buttons are rendered as links. The SR announces the first button as "Button visited link". Apparently, there is an undocumented option useButtonTag (https://github.com/telerik/kendo-ui-core/issues/4730) that's also missing from the typings. I have to manually add 'role: "button"' to every single button to make my toolbar compliant.

2. Toggle buttons state is not announced.
 
3. The overflow menu button has no caption and is announced by the SR as "blank".

4. The overflow menu button has no visible focus styling (screenshot attached).

5. Selecting an item from the overflow menu throws the focus out of the page.

Toolbar's show() and hide() method do not properly toggle items visibility in the overflow popup.

Case 1: https://dojo.telerik.com/aXEyIrEW/6

The 'Button' is visible in both the Toolbar and the overflow popup initially.

Case 2: https://dojo.telerik.com/erEnafir/39

When the Toolbar is resized so that the 'Dashboard' button is not visible, the 'Dashboard' button is also not visible in the overflow popup.

Hello,

Buttons and button groups support badges only if they are "standing alone". If buttons or button groups are part of a toolbar item collection, badge system is not working/implemented. I don't see any reason why this feature would be missing from toolbar items unless it was maybe overlooked :) For the sake of consistency and usability I think toolbar items (at least buttons) should behave the same across.

Demo: https://dojo.telerik.com/enOSuxEw/4

Best regards,

Peter