Add menuButtons dynamically with Javascript

[Robert Madrian]

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

[Neli]

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

[Robert Madrian]

Hello Neli,

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

robert

[Robert Madrian]

Please help!

[Neli]

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

[Robert Madrian]

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

[Neli]

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

[Robert Madrian]

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

robert

[Dimitar]

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

[Robert Madrian]

Ok thanks - I remove existing entries with

$("#SplitButton_optionlist").children().remove();

[Mark Kornhauser]

Coming in late ... this worked for me.

My split button is called "sbGroupBy":

// This only returns the first split button if there are multiple within the toolbar.
var sbFirst = $('.k-split-button').data('splitButton');  
sbFirst.options.menuButtons = [{ id: "AAA", text: "New Button" }];
sbFirst.createMenuButtons();

// This works for a specifically named split button ('sbGroupBy' in this example).
var uid = $("#sbGroupBy_wrapper").data("uid");
var element = $("[data-uid=" + uid + "]");
var sbGroupBy = element.data('splitButton');
sbGroupBy.options.menuButtons = [{ id: "XXX", text: "Hello World" }];
sbGroupBy.createMenuButtons();

[Stoyan]

Hi Mark,

Thank you very much for your feedback!

[Robert Madrian]

Hello, 

after upgrading to the latest version to call the createMenuButtons(); results in an error:

ncaught TypeError: r.createMenuButtons is not a function
    at Object.<anonymous> (50233004-8284-4f0a-856c-e67353227831:466:3990)
    at Function.each (jquery.js?v=H-K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk:385:19)
    at Object.success (50233004-8284-4f0a-856c-e67353227831:466:3753)
    at fire (jquery.js?v=H-K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk:3500:31)
    at Object.fireWith [as resolveWith] (jquery.js?v=H-K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk:3630:7)
    at done (jquery.js?v=H-K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk:9796:14)
    at XMLHttpRequest.<anonymous> (jquery.js?v=H-K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk:10057:9)

is there a new method for adding menuButtons to a splitbutton in a Kendo Toolbar?

robert

[Aleksandar]

Hello Robert,

With Kendo UI R2 2022 SP1 (version 2022.2.621) there are dedicated SplitButton and DropDownButton widgets. The wrappers for the same components are available as of Telerik UI for ASP.NET Core v2022.2.802. You can therefore now use the dedicated component and its API.

[Robert Madrian]

Hi Aleksandar,

ok but how to add now MenuButtons with Javascript to a SplitButton in a Toolbar (see picture) ?

[Aleksandar]

The Toolbar API Demo show how you can add a SplitButton to the Toolbar. The SplitButton client-side API does not expose a dedicated method that would allow you to add/remove buttons after initialization. The approach I can suggest is using the setOptions method and setting the desired options, if they need to change dynamically:

@Html.Kendo().Button().Name("btn").Content("Update SplitButton").Events(ev=>ev.Click("onClick"))
@(Html.Kendo().ToolBar()
.Name("toolbar")
.Items(items =>
{
    items.Add().Type(CommandType.SplitButton).Text("Insert").MenuButtons(menuButtons =>
    {
        menuButtons.Add().Text("Insert above").Icon("insert-up");
        menuButtons.Add().Text("Insert between").Icon("insert-middle");
        menuButtons.Add().Text("Insert below").Icon("insert-down");
    });
})
)
<script>
    function onClick(){
        var toolbar = $("#toolbar").getKendoToolBar();
        var sb = $("#"+toolbar.options.items[0].uid).getKendoSplitButton()
        var sbOptions = sb.options;
        sbOptions.items.push({icon: 'settings', text: 'New Option', click:function(){kendo.alert('new option selected!')}})
        sb.setOptions(sbOptions)
    }
</script>

[Robert Madrian]

Ok thanks - but if a add buttons like this the "click" event is not fired for that - how to add it so that also the

normal click event is fired as for all other toolbar buttons?

[Momchil]

Hello Robert,

By "normal click event", do you mean the one fired when the SplitButton itself is clicked, and not just the dynamically added option, as demonstrated in Aleksandar's demo? If that is the case, then to handle it, you can use the "Click" configuration option as shown on the ToolBar Events demo page.

@(Html.Kendo().ToolBar()
.Name("toolbar")
.Items(items =>
{
    items.Add().Type(CommandType.SplitButton).Text("Insert")
    .Id("mainButton")
    .Click("splitButtonClickHandler")
    .MenuButtons(menuButtons =>
    {
        menuButtons.Add().Text("Insert above").Icon("insert-up").Id("insertAbove");
        menuButtons.Add().Text("Insert between").Icon("insert-middle").Id("insertBetween");
        menuButtons.Add().Text("Insert below").Icon("insert-down").Id("insertBelow");
    });
})
)
<script>
    function splitButtonClickHandler(e) {
        kendo.alert("SplitButton event: " + e.id + " is clicked.");
    }
</script>

Here is a modified version of the aforementioned demo, for reference.

In case my understanding of the question is incorrect, could you please send a code snippet or a runnable sample that illustrates the issue, so that I can get a better idea of the matter at hand?

Thank you for your cooperation, in advance.

[Robert Madrian]

I mean the existing "click" event handler I use for not the dynamically added items - it works not for the new items added by code:

        $("#tlbAktenverwaltung").data("kendoToolBar").bind("click",
            function (e) {

                if (e.id === "Aktenzugriff") {
                    if (mitgliedakttypid === true) {
                        jsGpdb.kendoWindow.createSideBarWindow("frmMitgliedaktzugriff",
                            "Rechte für " + aktentyp,
                            "/Aktenverwaltung/Zugriff/EditMitgliedaktzugriff?aktentypid=" + aktentypid);
                    } else {
                        jsGpdb.kendoWindow.createSideBarWindow("frmGeschaeftspartneraktzugriff",
                            "Rechte für " + aktentyp,
                            "/Aktenverwaltung/Zugriff/EditGeschaeftspartneraktzugriff?aktentypid=" + aktentypid);
                    }
                }

 });

is it necessary to add the  "Click" configuration option for that new items or can I handle that items also with the existing one?

robert

[Momchil]

Hi Robert,

Thank you for clarifying things.

The reason the above handler ( $("#tlbAktenverwaltung").data("kendoToolBar").bind("click", ...) ) does not work for the dynamically added SplitButton options is that it is attached to the ToolBar instead of the SplitButton, as shown in my previous reply, and the ToolBar is not updated dynamically as the SplitButton changes.

To illustrate this, the following screenshot shows the options of the ToolBar after adding a new item to the SplitButton.

A feature request regarding this matter is logged in our feedback portal, where you can vote to increase its priority.

That being said, one possible workaround is to dynamically remove the SplitButton from the Toolbar using the "remove" method and add a new one containing the new options using the "add" method. However, this approach will always move the SplitButton to the final position in the ToolBar (right-most), and every other item following it will need to be re-added the same way, in order to retain the original order. 

This is why, I would suggest utilizing a separate "click" handler for the SplitButton to resolve the issue, instead. The following is an example using the Kendo Observable "bind" method.

    $(document).ready(function() {
        $("#toolbar").data("kendoToolBar").bind("click", toolbarClick);
        $("#sbMainButton").data("kendoSplitButton").bind("click", splitButtonClick);
    })

    function toolbarClick(e){
        if (e.id.startsWith("sb")){
            e.preventDefault();
            return;
        }
        kendo.alert("ToolBar Click Event: " + e.id + " is clicked.");
    }

    function splitButtonClick(e){
        kendo.alert("SplitButton Click Event: " + e.id + " is clicked.");
    }

Here is a REPL sample that illustrates the above, for reference.

Please keep in mind that, since this is considered a custom approach, I cannot guarantee that no future drawbacks will arise when using any of the above workarounds.

I hope you find this information useful.

[Robert Madrian]

OK thank's

robert