Add client OnClick event to PanelBar items

[Doug]

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?

[Shinu]

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.

[Doug]

That did the trick.  Thanks!

[Doug]

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?

[Shinu]

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.

[Doug]

Hi, Shinu.

Using global variables isn't an option in this case; both the displayName and URL will be different for each 'newItem'.

[Shinu]

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.

[Shinu]

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.