I have a hierarchical PanelBar that uses the OnClick event handler to post back to the server. The server uses this information as parameters for a SQL query whose results will be shown on the next page. When the user clicks the actual panel bar itself (in the text area), this works fine. However, if the user clicks the Expand/Collapse arrow, the event is not triggered and no postback occurs. I noticed this same behavior in the PanelBar Server-Side Demo here: http://demos.telerik.com/aspnet-ajax/panelbar/examples/serverside/serversideevents/defaultcs.aspx
I've looked around the forums and have seen solutions that completely remove the Expand/Collapse image using CSS, but I still want the image there so the user knows if there are child items that can be viewed.
Is there a way to either catch this click on the client-side and force the event to trigger, or is there a setting that I'm missing? Or, how can I have that arrow appear while using the <ItemTemplate>?
I'm using Telerik Version: "Telerik.Web.UI, v.2011.3.1305.40"
Here's the markup (note that the items are created programatically on the server-side in Page_Load):
<div id="accountPanelBarDiv" style="float:left;width:215px">
<telerik:RadAjaxPanel ID="accountAjaxPanel" runat="server" LoadingPanelID="accountLoadingPanel">
<telerik:RadPanelBar ID="accountPanelBar" runat="server" Width="200px"
onitemclick="accountPanelBar_ItemClick" PersistStateInCookie="true"
ExpandMode="SingleExpandedItem" AllowCollapseAllItems="true"
ExpandAnimation-Duration="1000">
</telerik:RadPanelBar>
</telerik:RadAjaxPanel>
</div>
<telerik:RadTabStrip ID="RadTabEntity" runat="server" MultiPageID="RadMultiPageEntity" SelectedIndex="0"> <Tabs> <telerik:RadTab Text="Name & Address"> </telerik:RadTab> <telerik:RadTab Text="Profile"> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="RadMultiPageEntity" runat="server" SelectedIndex="0"> <telerik:RadPageView ID="RadNameAddressPageView" runat="server"> <table width="100%" style="border: Solid 3px #4b6c9e; width: 100%; height: 100%" cellpadding="0" cellspacing="0"> <tr> <td> <div> <asp:Literal runat="server" EnableViewState="true" ID="ltrMessagePopup"></asp:Literal> <table> <tr> <td align="right"> <asp:Literal ID="ltrIndividual" runat="server" Text="Type : "></asp:Literal> <asp:HiddenField ID="hdnfldEntityId" runat="server" Value="0" /> <asp:HiddenField ID="hdnfldCompanyId" runat="server" Value="0" /> <asp:HiddenField ID="hdnfldParentId" runat="server" Value="0" /> </td> <td> <telerik:RadComboBox ID="ddlIndvComp" runat="server" OnSelectedIndexChanged="ddlIndvComp_SelectedIndexChanged" AutoPostBack="true"> <Items> <telerik:RadComboBoxItem Value="False" Text="Company" Selected="true" /> </Items> <Items> <telerik:RadComboBoxItem Value="True" Text="Individual" /> </Items> </telerik:RadComboBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrTitle" runat="server" Text="Title :" Visible="false"></asp:Literal> </td> <td> <telerik:RadComboBox ID="ddlTitle" runat="server" Visible="false"> <Items> <telerik:RadComboBoxItem Text="Select Title" Selected="true" /> </Items> <Items> <telerik:RadComboBoxItem Value="Mr." Text="Mr." /> </Items> <Items> <telerik:RadComboBoxItem Value="Ms." Text="Ms." /> </Items> <Items> <telerik:RadComboBoxItem Value="Mrs." Text="Mrs." /> </Items> </telerik:RadComboBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrFName" runat="server" Text="Name :"></asp:Literal> </td> <td> <asp:TextBox ID="txtFName" runat="server" MaxLength="200" Width="250px"></asp:TextBox> <asp:CustomValidator runat="server" ID="cvFName" Display="None" ValidationGroup="popup"></asp:CustomValidator> <%--<asp:RequiredFieldValidator runat="server" ID="cvFName" Display="None" ControlToValidate="txtFName" ValidationGroup="popup"></asp:RequiredFieldValidator>--%> <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="vceFName" TargetControlID="cvFName" HighlightCssClass="validatorCalloutHighlight" /> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrMName" runat="server" Text="Middle Name :" Visible="false"></asp:Literal> </td> <td> <asp:TextBox ID="txtMName" runat="server" MaxLength="50" Width="250px" Visible="false"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrLName" runat="server" Text="Last Name :" Visible="false"></asp:Literal> </td> <td> <asp:TextBox ID="txtLName" runat="server" MaxLength="50" Width="250px" Visible="false"></asp:TextBox> </td> </tr> </table> </div> </td> </tr> <tr> <td> <div> Address Details <asp:HiddenField runat="server" ID="hdnfldAddressId" Value="0" /> <table> <tr> <td align="right"> Active From : </td> <%--<td><asp:TextBox runat="server" ID="txtFromDate"></asp:TextBox></td>--%> <td> <telerik:RadDatePicker ID="txtFromDate" runat="server" AllowEmpty="true"> </telerik:RadDatePicker> </td> <td align="right"> Inactive : </td> <td> <asp:CheckBox runat="server" ID="chkInactiveAddress" /> <telerik:RadDatePicker ID="txtToDate" runat="server" AllowEmpty="true" Visible="false"> </telerik:RadDatePicker> <%-- <asp:TextBox runat="server" ID="txtToDate" Visible="false"></asp:TextBox>--%> </td> </tr> <tr> <td align="right"> <asp:Literal runat="server" ID="ltrAddressType" Text="Address Type :"></asp:Literal> </td> <td> <telerik:RadComboBox ID="ddlAddressType" runat="server"> <Items> <telerik:RadComboBoxItem Text="Office" Value="OFFICE" Selected="true" /> </Items> <Items> <telerik:RadComboBoxItem Text="Current Residence" Value="CUR_RES" /> </Items> <Items> <telerik:RadComboBoxItem Text="Permanent Residence" Value="PER_RES" /> </Items> </telerik:RadComboBox> </td> </tr> <tr> <td align="right"> Address1 : </td> <td> <asp:TextBox runat="server" ID="txtAddress1" MaxLength="100" Width="250px"></asp:TextBox> </td> </tr> <tr> <td align="right"> Address2 : </td> <td> <asp:TextBox runat="server" ID="txtAddress2" MaxLength="100" Width="250px"></asp:TextBox> </td> </tr> <tr> <td align="right"> Address3 : </td> <td> <asp:TextBox runat="server" ID="txtAddress3" MaxLength="100" Width="250px"></asp:TextBox> </td> </tr> <tr> <td align="right"> Country : </td> <td> <telerik:RadComboBox ID="ddlCountry" DataTextField="CountryName" DataValueField="CountryId" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" AutoPostBack="true"> </telerik:RadComboBox> </td> </tr> <tr> <td align="right"> <asp:Literal runat="server" ID="ltrState" Text="State :"></asp:Literal> </td> <td> <telerik:RadComboBox ID="ddlState" DataTextField="StateName" DataValueField="StateId" runat="server" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" AutoPostBack="true" OnLoad="ddlState_SelectedIndexChanged"> </telerik:RadComboBox> </td> </tr> <tr> <td align="right"> <asp:Literal runat="server" ID="ltrCity" Text="City :"></asp:Literal> </td> <td> <telerik:RadComboBox ID="ddlCity" DataTextField="CityName" DataValueField="CityId" runat="server" AutoPostBack="true"> </telerik:RadComboBox> </td> </tr> <tr> <td align="right"> Pincode : </td> <td> <asp:TextBox runat="server" ID="txtPincode" MaxLength="15" Width="120px"></asp:TextBox> </td> </tr> </table> </div> </td> </tr> </table> </telerik:RadPageView> <telerik:RadPageView ID="RadProfilePageView" runat="server"> <%--OnLoad="PageView_DataBind"--%> <table width="100%" style="border: Solid 3px #4b6c9e; width: 100%; height: 100%" cellpadding="0" cellspacing="0"> <tr> <td> <table> <tr> <td align="right"> <asp:Literal ID="ltrPAN" runat="server" Text="PAN No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtPAN" runat="server" Width="200px"></asp:TextBox> </td> </tr> <%--<asp:RegularExpressionValidator ID="regExTextBox1" runat="server" ControlToValidate="txtPAN" ErrorMessage="Should be 16 Characters" ToolTip="Should be 16 Characters" ValidationExpression=".{16}." />--%> <tr> <td align="right"> <asp:Literal ID="ltrPFNo" runat="server" Text="PF No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtPFNo" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrLST_TinNo" runat="server" Text="Local Tin No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtLST_TinNo" runat="server" MaxLength="16" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrLST_Tin_Date" runat="server" Text="Local Tin No. Date :"></asp:Literal> </td> <td> <telerik:RadDatePicker ID="txtLST_Tin_Date" runat="server" AllowEmpty="true"> </telerik:RadDatePicker> </td> </tr> <%--<td align="right">Local Tin No. Date :</td> <td><asp:TextBox ID="txtLST_Tin_Date" runat="server" MaxLength="11" Width="200px"></asp:TextBox></td></tr>--%> <tr> <td align="right"> <asp:Literal ID="ltrCST_TinNo" runat="server" Text="CST Tin No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtCST_TinNo" runat="server" MaxLength="16" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrCST_Tin_Date" runat="server" Text="CST Tin No. Date : "></asp:Literal> </td> <td> <telerik:RadDatePicker ID="txtCST_Tin_Date" runat="server" AllowEmpty="true"> </telerik:RadDatePicker> </td> </tr> <%--<td align="right">CST Tin No. Date :</td> <td><asp:TextBox ID="txtCST_Tin_Date" runat="server" MaxLength="11" Width="200px"></asp:TextBox></td></tr>--%> <tr> <td align="right"> <asp:Literal ID="ltrST_No" runat="server" Text="ST No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtST_No" runat="server" MaxLength="16" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrST_Reg_Date" runat="server" Text="ST Reg. Date :"></asp:Literal> </td> <td> <telerik:RadDatePicker ID="txtST_Reg_Date" runat="server" AllowEmpty="true"> </telerik:RadDatePicker> </td> </tr> <%--<td align="right">ST Reg. Date :</td> <td><asp:TextBox ID="txtST_Reg_Date" runat="server" MaxLength="11" Width="200px"></asp:TextBox></td></tr>--%> <tr> <td align="right"> <asp:Literal ID="ltrECC_No" runat="server" Text="ECC No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtECC_No" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrPLA_No" runat="server" Text="PLA No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtPLA_No" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrTan_No" runat="server" Text="TAN No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtTan_No" runat="server" MaxLength="16" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrCIN_No" runat="server" Text="CIN No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtCIN_No" runat="server" MaxLength="18" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrIEC_No" runat="server" Text="IEC No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtIEC_No" runat="server" MaxLength="10" Width="200px"></asp:TextBox> </td> </tr> </table> </td> <td> <table> <tr> <td align="right"> <asp:Literal ID="ltrExc_No" runat="server" Text="Excise No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtExc_No" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrExc_Reg_Date" runat="server" Text="Excise Reg. Date :"></asp:Literal> </td> <td> <telerik:RadDatePicker ID="txtExc_Reg_Date" runat="server" AllowEmpty="true"> </telerik:RadDatePicker> </td> </tr> <%--<td><asp:TextBox ID="txtExc_Reg_Date" runat="server" MaxLength="11" Width="200px"></asp:TextBox></td></tr>--%> <tr> <td align="right"> <asp:Literal ID="ltrExc_Division" runat="server" Text="Excise Division :"></asp:Literal> </td> <td> <asp:TextBox ID="txtExc_Division" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrExc_Range" runat="server" Text="Excise Range :"></asp:Literal> </td> <td> <asp:TextBox ID="txtExc_Range" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrExcRange_Address" runat="server" Text="Excise Range Address :"></asp:Literal> </td> <td> <asp:TextBox ID="txtExcRange_Address" runat="server" MaxLength="100" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrExc_Coll" runat="server" Text="Excise Collectorate :"></asp:Literal> </td> <td> <asp:TextBox ID="txtExc_Coll" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrTDS_No" runat="server" Text="TDS No. :"></asp:Literal> </td> <td> <asp:TextBox ID="txtTDS_No" runat="server" MaxLength="10" Width="200px"></asp:TextBox> </td> </tr> <tr> <td align="right"> <asp:Literal ID="ltrTDS_Reg_Date" runat="server" Text="TDS Reg. Date :"></asp:Literal> </td> <td> <telerik:RadDatePicker ID="txtTDS_Reg_Date" runat="server" AllowEmpty="true"> </telerik:RadDatePicker> </td> </tr> <%--<td><asp:TextBox ID="txtTDS_Reg_Date" runat="server" MaxLength="11" Width="200px"></asp:TextBox></td></tr>--%> <tr> <td align="right"> <asp:Literal ID="ltrTDS_Circle" runat="server" Text="TDS Circle :"></asp:Literal> </td> <td> <asp:TextBox ID="txtTDS_Circle" runat="server" MaxLength="20" Width="200px"></asp:TextBox> </td> </tr> </table> </td> </tr> </table> </telerik:RadPageView> </telerik:RadMultiPage> <div style="text-align: center;"> <asp:Button ID="btnSave" runat="server" SkinID="Button" Text="Save" OnClick="btnSave_Click" /> <asp:Button ID="btnCancel" runat="server" SkinID="AltButton" Text="Cancel" OnClientClick="CloseAndRebind(); return false;" /> </div> <div> <telerik:RadInputManager ID="RadInputManager1" runat="server"> <telerik:RegExpTextBoxSetting BehaviorID="RegExpBehavior1" InitializeOnClient="false" ErrorMessage="PAN number should be equal to 16 digits" InvalidCssClass="invalid" ValidationExpression=".{16}"> <Validation IsRequired="true" /> <TargetControls> <telerik:TargetInput ControlID="txtPAN" /> </TargetControls> </telerik:RegExpTextBoxSetting> </telerik:RadInputManager><telerik:RadGrid ID="rgTest" runat="server" AllowAutomaticInserts="false" AutoGenerateColumns="False" Skin="Outlook" Height="100%" Width="90%" Culture="en-GB" GridLines="None" CellSpacing="0" ShowHeader="False" OnDeleteCommand="rdTest_Delete" ToolTip="<%$Resources: , Grid_tooltip%>" > <MasterTableView AllowAutomaticInserts="false" CommandItemDisplay="None" CommandItemSettings-ShowRefreshButton="False" DataKeyNames="Id" NoMasterRecordsText="" ViewStateMode="Enabled" GridLines="None" EditMode="InPlace" ShowHeadersWhenNoRecords="False"> <Columns> <telerik:GridButtonColumn UniqueName="DeleteCommandColumn" ButtonType="ImageButton" CommandName="Delete" ImageUrl="~/Graphics/Remove.png" Text="<%$Resources: , Delete_tooltip%>" HeaderStyle-Width="5%"> <HeaderStyle Width="5%"></HeaderStyle> </telerik:GridButtonColumn> </Columns> </MasterTableView> </telerik:RadGrid>
<asp:FormView ID="SingleUser" runat="server" DataKeyNames="UserId"
DataSourceID="ObjectDataSource1" Width="750px">
<EditItemTemplate>
<telerik:RadPanelBar runat="server" ID="RulePanelBar" ExpandMode="MultipleExpandedItems"
Width="740px" Skin="Metro">
<Items>
<telerik:RadPanelItem Expanded="True" Text="Step 1: Basic Information" runat="server"
Selected="true">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="txtFirstName" >First Name:</asp:Label>
<asp:TextBox ID="txtUserID" runat="server" Text='<%#DataBinder.Eval(SingleUser.DataItem,"UserId")%>'
Width="2px" Visible="False"></asp:TextBox>
<asp:TextBox CssClass="textEntry" ID="txtFirstName" title="Enter First Name Here"
runat="server" Text='<%#DataBinder.Eval(SingleUser.DataItem,"FirstName")%>'></asp:TextBox>
</td>
<td>
<asp:Label ID="MiddleNameLabel" runat="server" AssociatedControlID="txtMiddleName" >Middle Name:</asp:Label><br />
<asp:TextBox CssClass="textEntry" ID="txtMiddleName" title="Enter Middle Name Here"
runat="server" Text='<%# DataBinder.Eval(SingleUser.DataItem,"MiddleName") %>'></asp:TextBox>
</td>
<td>
<asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="txtLastName" >Last Name:</asp:Label>
<asp:TextBox CssClass="textEntry" ID="txtLastName" title="Enter Last Name Here" runat="server"
Text='<%# DataBinder.Eval(SingleUser.DataItem,"LastName") %>'></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
<CollapseAnimation Duration="100" Type="None" />
<ExpandAnimation Duration="100" Type="None" />
<ExpandAnimation Duration="100" Type="None" />
<CollapseAnimation Duration="100" Type="None" />
</telerik:RadPanelBar>
-kalpana