Click here to Skip to main content
15,178,008 members
Please Sign up or sign in to vote.
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
Updated 13-Dec-13 22:39pm
v2
Comments
   
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....
   
Read my comments below.
   
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
   
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

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

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900