Open Split Button With JS

[Justavian]

I can't figure out how i might fly out a split button programmatically.  My toolbar has an "export" function that is controlled with a split button.  I want the user to be able to click on any part of the button to expand the options.  However, the out of the box functionality is set up to only show the options when the user clicks directly on the little arrow of the split button.

I've got a way to do it, but it feels a bit messy.  What i'm doing right now is detecting the click on the main body of the split button, and then i have to set a timeout and fire both mouse down and mouse up on the arrow:

var btnClicked = e.target.closest(".k-split-button");
var btnSplitParent = btnClicked.closest(".k-split-button");
if (btnSplitParent.length > 0 && !btnClicked.hasClass("k-split-button-arrow")) {
    setTimeout(function () {
        btnSplitParent.find(".k-split-button-arrow").mousedown();
        btnSplitParent.find(".k-split-button-arrow").mouseup();
    }, 100);

}

Is there a better way to accomplish this same thing?

[Matthew]

How does one:

 // find .k-split-button element


When the button is from a click event on a kendoToolBar?

[Martin]

Here is a small example how to open the popup in the described scenario. Let me know if that works for you.

[Alexander Valchev]

Hi Justavian,

The SplitButton itself does not have an open method, but the SplitButton's Popup component do have one.
You may use the following approach:

var element; // find .k-split-button element
var popup = element.data("kendoPopup");

if (popup) { popup.open() }

Regards,
Alexander Valchev
Telerik

 

 

[Naveen]

Do we have toggle() method there? if not how to check state of the popup?

[Aleksandar]

Hi Naveen,

The toggle event handler of the button for the Toolbar items is applicable only for commands of type button and togglable: true. For commands of type splitButton you can specify a click event handler via the toolbar.items.click configuration option.

Here is an example of how you can get the id of the clicked split button option.

I hope this helps.

Regards,
Aleksandar
Progress Telerik