Dynamically adding buttons to toolbar with click handlers

3 posts, 0 answers
  1. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 09 Oct 2014 Link to this post

    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. Kyle Smith
    Kyle Smith avatar
    42 posts
    Member since:
    Feb 2012

    Posted 10 Oct 2014 in reply to Kyle Smith Link to this post

    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!&
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 13 Oct 2014 Link to this post

    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.

     
Back to Top