Open Split Button With JS

2 posts, 0 answers
  1. Justavian
    Justavian avatar
    23 posts
    Member since:
    Aug 2010

    Posted 10 Nov 2014 Link to this post

    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?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 12 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top