Dynamically adding buttons to toolbar with click handlers

[Kyle Smith]

Hi,

I'm a longtime user of the UI for ASP.NET AJAX. I recently grabbed the demo of the UI for ASP.NET MVC and started playing around with it as I have a need for using MVC.

I have a toolbar on a page defined as follows:

@(Html.Kendo().ToolBar()
    .Name("toolbar")
)

I have a script that is calling a controller to load information on what toolbar items should be made available:

<script>
    $(document).ready(function() {
        $.post("/FileReview/DisplayToolbar/" + @ViewBag.FileReviewID + "/", function(buttonsToAdd) {
            var toolbar = $("#toolbar").data("kendoToolBar");

            for (var i = 0; i < buttonsToAdd.length; i++) {
                toolbar.add({
                    type: "button",
                    text: buttonsToAdd[i].Text,
                    imageUrl: buttonsToAdd[i].ImageUrl,
                    url: buttonsToAdd[i].NavigateUrl,
                    click: buttonsToAdd[i].ClickAction
                });
            }
        });
    });
</script>

The controller builds an array of ToolBarButtonModel:

public class ToolBarButtonModel
{
    public string Text { get; set; }

    public string ImageUrl { get; set; }

    public string ClickAction { get; set; }

    public string NavigateUrl { get; set; }
}

This works great for buttons that use the NavigateUrl. Buttons that use the click action are not working. I am guessing it is because I am passing a string of the function name to be called when adding the button on client side (the function to be called exists on the view already). It seems I must add a direct reference to a function here. Is there a way I can do this? Or perhaps there is a better approach for dynamically adding toolbar buttons?

[Kyle Smith]

Solved this myself.  This link was helpful:
http://www.sitepoint.com/call-javascript-function-string-without-using-eval/

Changed my toolbar add to this:

toolbar.add({
    type: "button",
    text: buttonsToAdd[i].Text,
    imageUrl: buttonsToAdd[i].ImageUrl,
    url: buttonsToAdd[i].NavigateUrl,
    click: window[buttonsToAdd[i].ClickAction]
});

Hope this helps someone else.

If someone comes up with a better solution, please let me know!&

[Alexander Valchev]

Hi Kyle,

You are correct - the click configuration option expects a function:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items.click

Thank you for sharing your solution for this case.

Regards,
Alexander Valchev
Telerik