Telerik RadPanelBar

Question

Hi All,

I am using Telerik RadPanelBar with XML file for panel items. Can someone help me for XML format for the PanelItem? I want to include OnClick event in XML file. Is it possible? If yes, can you please tell me the XML tag for that. The format I am using is as follows:

<PanelItem ToolTip="" Height="22" ID="Panel3_1" Text="Search" NavigateUrl = "#"  ImageCollapsed="/_Common/Images/bullet.gif" ImageExpanded="/_Common/Images/bullet.gif" />

My question is, how do I capture OnClick event of the PanelItem?

Thanks.

Answer 1

It seems that the control exposes an 'OnClientItemClicked' event handler and can be implemented like this:

 <script>                     
   function OnClientItemClicked(sender, args)
   {
      alert("The " + args.get_item().get_text() + " item has been clicked");
   }            
</script>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemClicked="OnClientItemClicked" >
 ...
</telerik:RadPanelBar> 

As far as storing the onClick event in the XML, you may want to get a little creative. Instead of storing the onClick event, you can store a custom attribute which then you can later retrieve in the OnClientItemClicked event:

 <script>                     
   function OnClientItemClicked(sender, args)
   {
      var item = args.get_item();
      var myCustomAttribute = item.get_attributes().getAttribute("myCustomAttribute");
   }            
</script>

... if your XML was structured like this:

<Item Text="Products" Expanded="True" myCustomAttribute="1">
 <Item Text="RadEditor" myCustomAttribute="2" />
 <Item Text="RadPanelBar" myCustomAttribute="3" />
 <Item Text="RadMenu" myCustomAttribute="4" />
 <Item Text="RadTabStrip" myCustomAttribute="5" />
</Item>

Additionally, here is Telerik's (awesome) documentation: http://www.telerik.com/help/aspnet-ajax/panel%5Fclientsidebasics.html

I hope I answered your question! Cheers :D

Answer 2

I don't believe that you can have a separate OnClick event per specific panel bar item. Instead you need to define an OnItemClick Server side event for the whole PanelBar and then in that event you can then do whatever you need to based on that items value?

eg declarative:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnItemClick="RadPanelBar1_ItemClick">
 ...
</telerik:RadPanelBar> 

Code behind

protected void RadPanelBar1_ItemClick(object  sender, RadPanelBarEventArgs e)
{
   RadPanelItem ItemClicked = e.Item;
   Response.Write("Server event raised -- you clicked: " + ItemClicked.Value);
} 

Answer 3

As for the XML format - check this help topic http://www.telerik.com/help/aspnet-ajax/panel_datahierarchicaldatasourcecomponents.html

And Sean is right - you can define a global ItemClick server event which will fire for all panelbar items. More information is available here: http://www.telerik.com/help/aspnet-ajax/panel_panel_itemclick.html