Add menuButtons dynamically with Javascript

10 posts, 1 answers
  1. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 02 Jun 2018 Link to this post

    Hello,

    I want to add and clear menuButtons with javascript on the client but there is no Api for that. To add items with append like this shows the items but on click nothing happens (no close and no Event)

    $("#Berichte_optionlist").append("<li><a href='' tabindex='0' title='test' class='k-button k-button-icontext' id="test" data-overflow='auto'>test</a></li>

     

    How to add menuButtons the Right way so that the click Event works?

    robert

  2. Neli
    Admin
    Neli avatar
    221 posts

    Posted 04 Jun 2018 Link to this post

    Hello Robert,

    You can use the ToolBar add and remove methods in order to add/remove commands dynamically. As you will see in the examples, you need to get a reference to the widget and then use the respective method. 
    var toolbar = $("#toolbar").data("kendoToolBar");
    toolbar.remove($("#btn2"));
    Here is a Dojo example, where the commands can be added or removed through button click. 

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 04 Jun 2018 in reply to Neli Link to this post

    Hello Neli,

    I know that but I'm Talking About add and remove commands from SplitButton (menuButtons ) - see Picture

    robert

  4. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 07 Jun 2018 in reply to Neli Link to this post

    Please help!
  5. Neli
    Admin
    Neli avatar
    221 posts

    Posted 07 Jun 2018 Link to this post

    Hi Robert,

    The API does not provide a method for adding an item to a SplitButton. A possible approach is to get a reference to the splitButton. Then you can add a new object to the menuButtons and invoke createMenuБuttons method.
    Please note, that data-uid is not created for the newly added buttons, so I could not confirm if the solution will work in all scenarios.
    var sb = $('.k-split-button').data('splitButton')
    sb.options.menuButtons = [{ id: "option5", text: "New Button"}];
    sb.createMenuButtons()

    Here is a Dojo example where an item is added dynamically to the SplitButton in ToolBar.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 07 Jun 2018 in reply to Neli Link to this post

    I think that solution does not work because without data-uid the click event is not raised and also the popup doesn't close…

    robert

  7. Neli
    Admin
    Neli avatar
    221 posts

    Posted 07 Jun 2018 Link to this post

    Hi Robert,

    I have added a click handler for the ToolBar and for the splitButton. As you will see on the linked screencast the events are triggered correctly on my end and the popup is closed, no matter if clicking on the 'New button' or on those created initially. 
    Please check the enclosed Dojo.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 07 Jun 2018 in reply to Neli Link to this post

    Thank you that works - what's the best way to remove/clear existing menuButtons?

    robert

  9. Answer
    Dimitar
    Admin
    Dimitar avatar
    732 posts

    Posted 12 Jun 2018 Link to this post

    Hello Robert,

    In general, the SplitButton is not part of the public API and does not provide suitable method that could be used to remove items from its menuButtons list dynamically. With the current implementation, the SplitButton is actually an inner widget of the ToolBar and its functionality is limited.

    The SplitButton could be improved by defining it outside of the ToolBar scrope as a separate widget. Therefore, I have logged an enhancement task in the official Kendo UI GitHub repository for exposing the widget and improving the discussed functionality. You can start tracking the progress that we make on it from issue #4305.

    As an alternative, I would suggest integrating a Kendo UI DropDownList in the Toolbar as shown in the Basisc Usage Demo. This way, you will be able to dynamically add/remove items from the DropDownList through the dataSource's add() and remove() methods.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 12 Jun 2018 in reply to Dimitar Link to this post

    Ok thanks - I remove existing entries with

    $("#SplitButton_optionlist").children().remove();
Back to Top