This is a migrated thread and some comments may be shown as answers.

Dynamically adding buttons to toolbar with click handlers

2 Answers 357 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Kyle Smith
Top achievements
Rank 1
Kyle Smith asked on 09 Oct 2014, 08:16 PM
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?

2 Answers, 1 is accepted

Sort by
0
Kyle Smith
Top achievements
Rank 1
answered on 10 Oct 2014, 11:41 AM
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!&
0
Alexander Valchev
Telerik team
answered on 13 Oct 2014, 04:05 PM
Hi Kyle,

You are correct - the click configuration option expects a function:
Thank you for sharing your solution for this case.

Regards,
Alexander Valchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Toolbar
Asked by
Kyle Smith
Top achievements
Rank 1
Answers by
Kyle Smith
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or