or

public class TelerikTemplates{ public class PanelTemplate : ITemplate { private readonly Label title; private readonly LinkButton totalButton; public PanelTemplate(string pTitle, int pTotal, string pId, System.Action<string> callback) { title = new Label(); title.CssClass = "panelTitle"; title.Text = pTitle; totalButton = new LinkButton(); totalButton.CssClass = "totalButton"; totalButton.Text = pTotal.ToString(); totalButton.Click += delegate(object sender, System.EventArgs e) { callback(pId); }; } public void InstantiateIn(Control pContainer) { pContainer.Controls.Add(title); pContainer.Controls.Add(totalButton); } }}protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { } using (DataTable data = GetData()) { foreach (DataRow dr in data.Rows) { RadPanelItem titlePanel = new RadPanelItem(); titlePanel.HeaderTemplate = new TelerikTemplates.PanelTemplate((string)dr["RuleName"], (int)dr["AccountTotal"], (string)dr["RuleId"], populateGrid); RadPanelItem subPanel = new RadPanelItem(); subPanel.ContentTemplate = new TelerikTemplates.ChartAndTableTemplate(dr); titlePanel.Items.Add(subPanel); panelBar.Items.Add(titlePanel); } }}public void populateGrid(string pId){ grid.DataSource = GetGridData(pId); grid.Rebind();}<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content=""> <meta name="description" content="Demo site for home page."> <title>Demo: Home (PanelBar)</title> <link href="~/Content/less/css/styles.css" rel="stylesheet" /></head><body> <form id="form1" runat="server"> <asp:Label ID="lblTest" runat="server" Text="Test"></asp:Label> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> //Put your JavaScript code here. </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="grid" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="grid"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="grid" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <section> <div> <telerik:RadPanelBar Runat="server" Width="100%" ExpandMode="SingleExpandedItem" ID="panelBar"> <Items> </Items> </telerik:RadPanelBar> </div> <div> <telerik:RadGrid ID="grid" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" /> </div> </section> </form></body></html>
.upper_nav .RadMenu li { border: none; padding: 0; position: relative;}.upper_nav .RadMenu .rmHorizontal,.upper_nav .RadMenu .rmVertical { padding: 0;}.upper_nav .RadMenu .rmRootLink { font-size: 12px;}.upper_nav .RadMenu .rmRootLink:link,.upper_nav .RadMenu .rmRootLink:visited { color: #536ba2;}.upper_nav .RadMenu .rmRootLink:hover,.upper_nav .RadMenu .rmRootLink:active,.upper_nav .RadMenu .rmRootLink:focus { color: #3c3d5e; background: none; border: none;}.upper_nav .RadMenu .rmSlide { position: absolute; display: none;}.upper_nav .RadMenu .rmVertical .rmItem { display: block;}.upper_nav .RadMenu .rmVertical .rmItem span { width: 100% !important;}if(typeof(HTMLAudioElement) !== 'undefined' && HTMLAudioElement.prototype && HTMLAudioElement.prototype.canPlayType) { var org = HTMLAudioElement.prototype.canPlayType; HTMLAudioElement.prototype.canPlayType = function(typeString) { var result = ""; try{ result = org(typeString); } catch(e) { } return result; }}