Collapsible Panel Extender Issue [Answered]RSS

• • Reply
  Bobby-Z

  Participant

  1906 Points

  1207 Posts

  Collapsible Panel Extender Issue

  Apr 18, 2014 10:50 AM|Bobby-Z|LINK

  I have a alphabetized menu for the selection of a customer to manage. I wanted to make this section to collapse so it can be viewed as needed; however, there is an issue when i add the collapsible panel extender and I cannot figure out why it is not working.

  The menu consists of 3 listviews, the top listview displays a list of buttons that show a letter of the alphabet, the next 2 listviews display customers that begin with the letter of the alphabet chosen. One is for business customers, the other is for personal

  On page load the list is defined by the letter A, then after you select a letter, it displays the clients in each list with the appropriate letter. Everything works fine. The issue begins when I add the extender, the Alpabet listview displays just fine, but the other 2 are not displayed until I collapse the panel then open it again then they display fine; however, I want the panel to be open upon the loading of the page since no customer data will be displayed and you will have to select an account to view, I do not want to have to add an extra click to open the panel when i am loading the page. I want the menus to display so I can select my account, then after I have already selected an account use the collapse to select other accounts as needed during operation.

  I remove the collapsible panel, everything works fine, but i have to use hide to make panels invisible, and I would much rather use the collapse if I have the choice

  				   <asp:Panel runat="server" ID="pnlSelectAccountHead" CssClass="select-account" Style="cursor: pointer">
  					  <asp:Label ID="lblSelectAccount" runat="server" Text="" />
  				   </asp:Panel>
  				   <ajx:CollapsiblePanelExtender ID="cpeSelectAccount" runat="server" TargetControlID="pnlSelectAccount" ExpandedText="Select Account <i class='fa fa-chevron-up'></i>" CollapsedText="Select Account <i class='fa fa-chevron-down'></i>" TextLabelID="lblSelectAccount" ExpandControlID="pnlSelectAccountHead" CollapseControlID="pnlSelectAccountHead" />
  
  				   <asp:Panel ID="pnlSelectAccount" CssClass="select-account" runat="server">
  					  <h2>Select Account To Manage</h2> <asp:UpdatePanel runat="server" ID="upnlSelectAccount">
  			    <ContentTemplate>
  					  <asp:ListView ID="lvSelectCustomerAlpha" runat="server" DataSourceID="sqlSelectCustomerAlpha" DataKeyNames="AccountName">
  						 <ItemTemplate>
  							<asp:Button Text='<%# Eval("AccountName") %>' runat="server" ID="btnAlpha" CommandArgument='<%# Eval("AccountName") %>' OnClick="btnSelectAccount_Click" />
  						 </ItemTemplate>
  						 <LayoutTemplate>
  							<div runat="server" id="itemPlaceholderContainer" class="alpha">
  							    <div runat="server" id="itemPlaceholder"></div>
  							</div>
  						 </LayoutTemplate>
  					  </asp:ListView>
  					  <asp:SqlDataSource runat="server" ID="sqlSelectCustomerAlpha" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' SelectCommand="SELECT DISTINCT(SUBSTRING(AccountName,1,1)) AS AccountName FROM CuAccountData ORDER BY AccountName" />
  					  <asp:ListView ID="lvSelectAccountBusiness" runat="server" DataSourceID="sqlSelectAccountBusiness" DataKeyNames="AccountID">
  						 <ItemTemplate>
  							<asp:Button Text='<%# Eval("AccountName") %>' runat="server" ID="AccountNameLabel" CommandArgument='<%# Eval("AccountID") %>' OnClick="btnSelectCustomer_Click" />
  						 </ItemTemplate>
  						 <LayoutTemplate>
  							<div runat="server" id="itemPlaceholderContainer" class="select-business">
  							    <h2>Business Accounts</h2>
  							    <div runat="server" id="itemPlaceholder"></div>
  							</div>
  						 </LayoutTemplate>
  					  </asp:ListView>
  					  <asp:SqlDataSource runat="server" ID="sqlSelectAccountBusiness" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' />
  					  <asp:ListView ID="lvSelectAccountPersonal" runat="server" DataSourceID="sqlSelectAccountPersonal" DataKeyNames="AccountID">
  						 <EmptyDataTemplate>
  							Select A Letter!
  						 </EmptyDataTemplate>
  						 <EmptyItemTemplate>
  							Select A Letter!
  						 </EmptyItemTemplate>
  						 <ItemTemplate>
  							<asp:Button Text='<%# Eval("AccountName") %>' runat="server" ID="AccountNameLabel" CommandArgument='<%# Eval("AccountID") %>' OnClick="btnSelectCustomer_Click" />
  						 </ItemTemplate>
  						 <LayoutTemplate>
  							<div runat="server" id="itemPlaceholderContainer" class="select-personal">
  							    <h2>Personal Accounts</h2>
  							    <div runat="server" id="itemPlaceholder"></div>
  							</div>
  						 </LayoutTemplate>
  					  </asp:ListView>
  					  <asp:SqlDataSource runat="server" ID="sqlSelectAccountPersonal" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' />
  					 </ContentTemplate>
  
  			</asp:UpdatePanel>
  				   </asp:Panel>
  

  I can fix it with jQuery and it works, but my question is why is this not working using the ajax toolkit?

  "Success is the Sum of Small Efforts, Repeated Day in and Day Out - Without Ceasing!"
  
  Currently Learning: ASP, SQL, CSS, JavaScript, AJAX, XML, XSLT, C# So please be patient with me! Thanks
• • Reply
  Happy Chen -...

  All-Star

  15648 Points

  2151 Posts

  Re: Collapsible Panel Extender Issue

  Apr 21, 2014 12:30 AM|Happy Chen - MSFT|LINK

  I can fix it with jQuery and it works, but my question is why is this not working using the ajax toolkit?

  According to your description, i would suggest you try using HiddenField control and ClientID

  please check out the links for details:

  http://forums.asp.net/t/1284648.aspx?CollapsiblePanelExtender

  CollapsiblePanelExtender inside a ListView

  Hope it helps you.

  We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!