Declined
Last Updated: 01 Aug 2024 10:09 by ADMIN
Alistair
Created on: 24 Jul 2024 10:34
Category: Toolbar
Type: Bug Report
0
The click event of the overflow SplitButton in the Toolbar does not trigger

### Bug report

The click event of the SplitButton in the Toolbar does not trigger when displayed in the overflow menu.

**Regression introduced with R1 2023**

### Reproduction of the problem

1. Open the ToolBar Events demo.
2. Resize the Toolbar to render the SplitButton in the overflow menu.
3. Open the overflow menu and click a specified SplitButton item.

### Current behavior

The "splitButtonClickHandler" handler does not fire.

### Expected/desired behavior

The SplitButton click event must fire when the button is rendered in the Toolbar overflow menu.

### Environment

* **Kendo UI version: 2024.2.514
* **Browser: [all] 

1 comment
ADMIN
Mihaela
Posted on: 01 Aug 2024 10:09

Hello,

The development team confirmed that the separate click handlers of SplitButton's sub-items are not documented, and they were not intended to work when the SplitButton is displayed in the overflow menu. For this reason, at this stage, the issue is converted to a feature request. For more information, check out the comments in the following item:

https://feedback.telerik.com/kendo-jquery-ui/1546592-toolbar-subitem-clickhandlers-do-not-work-when-overflown

Meanwhile, I would suggest using the Click event of the Toolbar to access the "id" of the selected SplitButton item or subscribing to the "click" event of the items with jQuery:

  • Using the Toolbar Click() event:
@(Html.Kendo().ToolBar()
            .Name("ToolBar")
            .Items(items =>
            {
                items.Add().Type(CommandType.SplitButton).Text("Split Button").Id("splitBtn")
                .MenuButtons(menuButtons =>
                {
                    menuButtons.Add().Text("Action 1").Id("splitBtn_action1");
                    menuButtons.Add().Text("Action 2").Id("splitBtn_action2");
                    menuButtons.Add().Text("Action 3").Id("splitBtn_action3");
                });
                items.Add().Type(CommandType.Separator);
                items.Add().Type(CommandType.Button).Text("Overflow button").Id("overflowButton").Overflow(ShowInOverflowPopup.Always);
            })
            .Events(e => e.Click("onClick"))
)

<script>
    function onClick(e) {
        var targetElement = e.target;
        var targetElementId = e.id;
    }
</script>

 

  • Handling the "click" event of the items with jQuery:
<script>
$(document).ready(function(){
    $("[data-role='contextmenu'] li[id^='splitBtn'], [data-role='buttonmenu'] li[id^='splitBtn']").on("click", function(){
        console.log($(this).attr("id"));
    });
})
</script>

REPL sample: https://netcorerepl.telerik.com/QeuVmAlo17vx6l9P51

If you have any suggestions or concerns, don't hesitate to share them.

 

Regards,
Mihaela
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024