Add client OnClick event to PanelBar items

8 posts, 1 answers
  1. Doug
    Doug avatar
    13 posts
    Member since:
    Apr 2014

    Posted 13 Jul 2014 Link to this post

    I have a PanelBar on my page that populated with items via the Client API.  The functions that manipulate the PanelBar follow:

        function BuildPanelBar(sender) {
            var panelBar = sender;
            var menuJson = JSON.parse('<%=Model.MenuItems %>');

            panelBar.trackChanges();
            
            var items = panelBar.get_items();
            if (items.get_count() > 0) panelBar.get_items().clear();

            for (var i = 0; i < menuJson.length; i++) {
                var currentItem = menuJson[i];

                var rootItem = new Telerik.Web.UI.RadPanelItem();
                rootItem.set_text(currentItem.DisplayName);

                if (currentItem.IsRootNode) {
                    addItemsToRoot(currentItem, rootItem);
                }

                
                panelBar.get_items().add(rootItem);
                panelBar.commitChanges();
            }
        }

        function addItemsToRoot(currentItem, rootItem) {
            
            for (var i = 0; i < currentItem.ChildrenNodes.length; i++) {
                
                var newCurrentItem = currentItem.ChildrenNodes[i];
                
                var newItem = new Telerik.Web.UI.RadPanelItem();
                newItem.set_text(newCurrentItem.DisplayName);
                
                if (newCurrentItem.IsRootNode) {
                    addItemsToRoot(newCurrentItem, newItem);
                }
                rootItem.get_items().add(newItem);
            }
        }

    I need the individual items to call a different JavaScript when they are clicked, and not postback to the server.  I was hoping to do something like this:

                newItem.set_onclick(<function goes here>);

    but all I have found in the client api is the OnClientClick function that I declare at the PanelBar level.  While each item that isn't a root node would call the same function, the values that the items would provide to the function would be different.  Is there anyway to achieve what I am trying to do?
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jul 2014 in reply to Doug Link to this post

    Hi Doug,

    Please try the below approach to call a Click event for RadPanelItem.

    JavaScript:
    function pageLoad() {
        var newItem = new Telerik.Web.UI.RadPanelItem();
        newItem.set_text("Item1.1");
        newItem._click = childItemClick;
        var panelBar = $find("<%=rpanelBarDemo.ClientID%>");
        var rootItem = panelBar.findItemByText("Item1");
        panelBar.trackChanges();
        rootItem.get_items().add(newItem);
        panelBar.commitChanges();
    }
    function childItemClick() {
        alert("fired");
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Doug
    Doug avatar
    13 posts
    Member since:
    Apr 2014

    Posted 14 Jul 2014 in reply to Shinu Link to this post

    That did the trick.  Thanks!
  5. Doug
    Doug avatar
    13 posts
    Member since:
    Apr 2014

    Posted 14 Jul 2014 in reply to Shinu Link to this post

    So, it seems that this does work, but the click event fires during item creation.   I have this:

        function addItemsToRoot(currentItem, rootItem) {
            
            for (var i = 0; i < currentItem.ChildrenNodes.length; i++) {
                
                var newCurrentItem = currentItem.ChildrenNodes[i];
                
                var newItem = new Telerik.Web.UI.RadPanelItem();
                newItem.set_text(newCurrentItem.DisplayName);

                if (newCurrentItem.IsRootNode) {
                    addItemsToRoot(newCurrentItem, newItem);
                } else {
                    newItem._click = loadControl(newCurrentItem.DisplayName, newCurrentItem.Url);
                }
                
                rootItem.get_items().add(newItem);
            }
        }

    When the menu is built though, the loadControl method is being fired.  Is there anyway to prevent this?
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jul 2014 in reply to Doug Link to this post

    Hi Doug,

    In your scenario please try to assign the newCurrentItem.DisplayName and newCurrentItem.Url value in a global variable and then access that global variable in the loadControl method as follows.

    JavaScript:
    var displayName,itemUrl;
    function addItemsToRoot(currentItem, rootItem) {
       for (var i = 0; i < currentItem.ChildrenNodes.length; i++) {
           var newCurrentItem = currentItem.ChildrenNodes[i];
           var newItem = new Telerik.Web.UI.RadPanelItem();
           newItem.set_text(newCurrentItem.DisplayName);
           if (newCurrentItem.IsRootNode) {
               addItemsToRoot(newCurrentItem, newItem);
           } else {
                displayName=newCurrentItem.DisplayName;
                itemUrl=newCurrentItem.Url;
                newItem._click = loadControl;
           }
       rootItem.get_items().add(newItem);
       }
    }
    function loadControl(){
         alert(displayName);
         alert(itemUrl);
    }

    Thanks,
    Shinu.
  7. Doug
    Doug avatar
    13 posts
    Member since:
    Apr 2014

    Posted 16 Jul 2014 in reply to Shinu Link to this post

    Hi, Shinu.

    Using global variables isn't an option in this case; both the displayName and URL will be different for each 'newItem'.
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2014 in reply to Doug Link to this post

    Hi Doug,

    Please try the below approach which works fine at my end. Please provide your full code if it doesn't help.

    JavaScript:
    function pageLoad() {
        for (var i = 0; i < 2; i++) {
            var newItem = new Telerik.Web.UI.RadPanelItem();
            newItem.set_text("Item1." + i);
            newItem.set_navigateUrl("http://www.google.com");
            newItem._click = (function () {
                return function () {
                    childItemClick(this);
                }
            })();
            var panelBar = $find("<%=rpanelBarDemo.ClientID%>");
            var rootItem = panelBar.findItemByText("Item1");
            panelBar.trackChanges();
            rootItem.get_items().add(newItem);
            panelBar.commitChanges();
        }
    }
    function childItemClick(Item) {
        alert(displayName.get_text());
        alert(displayName.get_navigateUrl());
    }

    Thanks,
    Shinu.
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2014 in reply to Shinu Link to this post

    Hi Doug,

    Please do the following modification the above posted code.

    JavaScript:
    function childItemClick(Item) {
        alert(Item.get_text());
        alert(Item.get_navigateUrl());
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017