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?