Collapsible Panel Extender Problem..

Question

5.00/5 (2 votes)

See more:

Hi,

I have a requirement where I need to add client information inside a collapsible Panel and a Gridview showing all records related to the clients.

Now the problem is , my collapsible panel extender works fine until the Grid opens. Whenever the Grid is populated, the collapsible Panel expands..but then is not collapsing.

If I copy the code, then its working on other applications..

Can som1 help me to find the exact reason for the same...

Code for reference:--

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Collapsible Panel Example</title>
<style type="text/css">
.pnlCSS{
font-weight: bold;
cursor: pointer;
border: solid 1px #c0c0c0;
width:30%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:Panel ID="pnlClick" runat="server" CssClass="pnlCSS">
<div style="background-color:Green; height:30px; vertical-align:middle">
<div style="float:left; color:White;padding:5px 5px 0 0">
Collapsible Panel
</div>
<div style="float:right; color:White; padding:5px 5px 0 0">
<asp:Label ID="lblMessage" runat="server" Text="Label"/>
<asp:Image ID="imgArrows" runat="server" />
</div>
<div style="clear:both"></div>
</div>
</asp:Panel>
<div>
<asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="pnlCSS">
<table align="center" width="100%">
<tr>
<td></td>
<td>
<b>Registration Form</b>
</td>
</tr>
<tr>
<td align="right" >
UserName:
</td>
<td>
<asp:TextBox ID="txtuser" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"/>
</td>
</tr>
<tr>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Phone No:
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"/>
</td>
</tr>
<tr>
<td align="right" >
Location:
</td>
<td align="left">
<asp:TextBox ID="txtlocation" runat="server"/>
</td>
</tr>
<tr>
<td></td>
<td align="left" >
<asp:Button ID="btnsubmit" runat="server" Text="Save" onclick="btnsubmit_Click1" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</asp:Panel>
<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
CollapseControlID="pnlClick"
Collapsed="true"
ExpandControlID="pnlClick"
TextLabelID="lblMessage"
CollapsedText="Show"
ExpandedText="Hide"
ImageControlID="imgArrows"
CollapsedImage="~/expand.jpg"
ExpandedImage="~/collapse.jpg"
ExpandDirection="Vertical"
TargetControlID="pnlCollapsable"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</div>
<div style="position :absolute ; top:350px;">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        CellPadding="4" ForeColor="#333333">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:BoundField DataField="ContactName" HeaderText="ContactName"
                SortExpression="ContactName" />
            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
            <asp:BoundField DataField="Country" HeaderText="Country"
                SortExpression="Country" />
            <asp:BoundField DataField="Postal_code" HeaderText="Postal_code"
                SortExpression="Postal_code" />
        </Columns>
        <EditRowStyle BackColor="#7C6F57" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#E3EAEB" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F8FAFA" />
        <SortedAscendingHeaderStyle BackColor="#246B61" />
        <SortedDescendingCellStyle BackColor="#D4DFE1" />
        <SortedDescendingHeaderStyle BackColor="#15524A" />
    </asp:GridView>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
        SelectCommand="SELECT * FROM [country_new]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>

Posted 13-Dec-13 19:42pm

abatechcal_sreya

Updated 13-Dec-13 21:39pm

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-13 2:01am

I guess you have to make GridView display:none while collapse is clicked.

rupai99 14-Dec-13 2:07am

When there is no data in the grid, there is no problem I hope.and if the user clicks the panel and not require to add any further record, setting the Gridiview visibility to none is not a good thing. The reason may be somewhat other. At least I had no problem with collapsible when there is no data in the Grid

abatechcal_sreya 14-Dec-13 2:09am

ya..rupai...my problem is same as yours....

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-13 2:34am

Read my comments below.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-13 2:33am

You can again toggle the display none to block, when again clicked on that link. Anyway, GridView data doesn't get lost as it is just hiding the Grid at client side browser, but the data is there.

abatechcal_sreya 14-Dec-13 2:37am

I know, but isn't it odd? When the client click collapse, he has to again open the the block containing Grid..Isnt it ? please clarify

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-13 4:52am

Why odd? I didn't clearly understand your comment. Let me tell you what I think.

When collapse is clicked, GridView is hided.
When it is clicked again, GridView again shows.

Do you need any other functionality? If yes, please explain me. I will give the idea, if I can.

rupai99 14-Dec-13 2:04am

I had faced the same situation. Probably it could be a dll problem or it may be some AJAX issue. My problems are not resolved till date.

JoCodes 14-Dec-13 3:15am

Whats your code?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Dnyaneshwar**@Pune · Answer 1 · 2013-12-17T19:09:00

Solution 1

This may cause due to ajaxtoolkit. add reference of Ajax correctly.

Posted 17-Dec-13 19:09pm

Dnyaneshwar@Pune

Collapsible Panel Extender Problem..

1 solution

Solution 1

Add your solution here

Preview 0

Collapsible Panel Extender Problem..

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us