Hi,
In my project, I'd like to be able to customize the item template this way. I'll explain with the PanelBar on the page of the following link:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/simple/defaultcs.aspx
For each panel item (no matter it's root item such as "Mail", or sub-item such as "Personal Folders"), I'd like to display a control (for example a label or a link button) which is on the same horizontal level as the item. So it will look something like this:
Mail [29 items]
Personal Folders [3 items]
Deleted Items [6 items]
......
One more requirement: I need to bind the data dynamically in the code behind; not some pre-defined items in aspx page.
Can someone please tell me how to achieve this?
Thanks a lot!
Gary
In my project, I'd like to be able to customize the item template this way. I'll explain with the PanelBar on the page of the following link:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/simple/defaultcs.aspx
For each panel item (no matter it's root item such as "Mail", or sub-item such as "Personal Folders"), I'd like to display a control (for example a label or a link button) which is on the same horizontal level as the item. So it will look something like this:
Mail [29 items]
Personal Folders [3 items]
Deleted Items [6 items]
......
One more requirement: I need to bind the data dynamically in the code behind; not some pre-defined items in aspx page.
Can someone please tell me how to achieve this?
Thanks a lot!
Gary
2 Answers, 1 is accepted
0
Accepted
Hi Gary,
Please find below a sample code snippet that show the needed approach.
Greetings,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Please find below a sample code snippet that show the needed approach.
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <style type="text/css"> |
| div.RadPanelBar .rpItem |
| { |
| position: relative; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadPanelBar ID="RadPanelBar1" runat="server"> |
| <ItemTemplate> |
| <div style="position: absolute; top: 1px; left: 210px"> |
| 123 |
| </div> |
| </ItemTemplate> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1"> |
| <Items> |
| <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1"> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2"> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelBar> |
| </form> |
| </body> |
| </html> |
Greetings,
Paul
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Gary
Top achievements
Rank 1
Rank 1
answered on 15 Jun 2009, 07:44 PM
Paul,
Thank you for the post. The code snippet works well.
However, the absolute positioning makes it not align properly. Since the height of the RadPanelItem of each level is different, we cannot make all the levels align correctly. I wonder if there is any other way to do that.
Thank you.
Gary
Thank you for the post. The code snippet works well.
However, the absolute positioning makes it not align properly. Since the height of the RadPanelItem of each level is different, we cannot make all the levels align correctly. I wonder if there is any other way to do that.
Thank you.
Gary