Example Of Collapsible Panel Inside GridView
Mar 30, 2010I want to create GridView in which Header Panel shows Partial Detail and then complete detail will be shown when click on that panel.
View 2 RepliesI want to create GridView in which Header Panel shows Partial Detail and then complete detail will be shown when click on that panel.
View 2 RepliesI'm developing an ASP.NET 3.5 web application using C# with AjaxToolkKit. I have a following question.
How can I put a collapsible panel inside GridView to make a master and detail list that expands to display the detail panel when view link in a row is clicked? This is something similar to the download list in MSDN page.
I have a problem where the collapsible panel extender stops behaving properly after the first row in the gridview. On row 2, the collapsible panel don't work anymore (the label is not clickable). It gets even worse on row 3 where the product category accordion pane doesn't open anymore. This is the structure:
Accordion
AccordionPane: General Info
Formview
AccordionPane: Product Categories
Gridview
3 boundfield
1 templatefield
CollapsiblePanel
1 templatefield
3 collapsiblePanel
First Row:
2nd row
[Code]....
Dim sql As String
I have a problem where the collapsible extender stops behaving properly after 2-3 rows in the gridview.
First Row:
2nd row
[Code]....
I am having trouble wiht my AJAX collapsible Panel Extender. I have the CPE opening a panel that contains the Table of Contents of a document being displayed on the page. A user clicks on the link for a certain part of the document, the event triggers a C# function that gets the file that particular section is contained in an displays the section. Right now you have to, of course, click on the TitlePanel to open and to close the CPE. What I want to do is have it close automatically whenever a link inside the content panel has been clicked. I have tried placing this.cpeTOC.Collapsed=true; in the functiion that gets the files but it does not work. I have also tried the autocollapse property of the CPE and it just collapses whenever someone moves thier mouse from the titlepanel.
View 1 Repliestrying to have a collapsible panel extender for each row inside a repeater but I am not sure how to do it correctly.I am binding my repeater control to a dataset which has name,e-mail,phone numbers returned as columns and I am trying to make name as a link button so that whenever it is clicked some details are shown and when it is clicked again the details are hidden.At the moment,I am putting all the details in a label which is inside a panel and I want to display this label whenever the link button is clicked.However,the label text is being displayed all the times.
[Code]....
I have a webform that has a collapsible panel I want to put a button inside the collapsible panel. How do I capture the button click in the code behind?
Here is my code: I want to capture the button click of Button1
[code]....
I am getting this error Extender control 'cpeProject' is not a registered extender control. Extender controls must be registered using RegisterExtenderControl() before calling RegisterScriptDescriptors(). Parameter name: extenderControl This is the itemtemplete code for repeater in aspx page.
<
ItemTemplate
>
<tr
>
<td
align="left"
style
="width: 15%; font-size: 11px; font-family: Verdana;">
<%
#DataBinder.Eval(Container.DataItem,
"Employee_RollNo"
)%>
</td
>
<td
>
<asp:Panel
ID="pnlProject"
runat
="server">
<asp:LinkButton
ID="LinkButton1"
runat="server"
CommandArgument='<%#Bind("Employee_RollNo") %>'><%#DataBinder.Eval(Container.DataItem,"Full_Name")
%></asp:LinkButton
>
</asp:Panel
>
<asp:Panel
ID="Panel1"
runat
="server">
<cc1:CollapsiblePanelExtender
ID="cpeProject"
ExpandedSize="0"
CollapsedSize
="0"
TargetControlID="pnlSurvery"
ExpandControlID="LinkButton1"
CollapseControlID
="LinkButton1"
SuppressPostBack="true"
runat="server"
Collapsed
="false">
</cc1:CollapsiblePanelExtender
>
</asp:Panel
>
</td
>
<td
align="left"
style
="width: 15%; font-size: 11px; font-family: Verdana;">
<%
#DataBinder.Eval(Container.DataItem,
"Sec_name"
)%>
</td
>
<td
align="left"
style
="width: 15%; font-size: 11px; font-family: Verdana;">
<%
#DataBinder.Eval(Container.DataItem,
"Div_Name"
)%>
</td
>
<td
align="left"
style
="width: 15%; font-size: 11px; font-family: Verdana;">
<%
#DataBinder.Eval(Container.DataItem,
"Grade_Name"
)%>
</td
>
<td
align="left"
style
="width: 15%; font-size: 11px; font-family: Verdana;">
<%
#DataBinder.Eval(Container.DataItem,
"Location"
)%>
</td
>
</tr
>
<tr
class
="ItemTemplate">
<td
colspan="8"
style
="width: 100%">
<asp:Panel
ID="pnlSurvery"
runat="server"
Width="100%"
Height
="100%">
<table
cellpadding
="10">
<tr
>
<td
>
<table
border="0"
cellpadding="0"
cellspacing
="0">
<tr
>
<td
>
<asp:Panel
ID="pnlBehaviour"
runat="server"
Visible
="false">
<table
border
="0">
<tr
>
<td
align="left"
style
="background-color: Navy">
<asp:Label
ID="Label1"
runat="server"
Font-Size="14px"
Font-Bold="True"
ForeColor="white">Functional/Behaviour Report</asp:Label
>
</td
>
</tr
>
<tr
>
<td
>
<asp:GridView
ID="gvBehaviour"
runat="server"
AllowPaging="true"
AutoGenerateColumns
="False"
Font-Size
="medium">
<AlternatingRowStyle
Font-Bold="False"
Font-Italic="False"
Font-Overline
="False"
Font-Strikeout="False"
Font-Underline="False"
BackColor="Lavender"
/>
<Columns
>
<asp:BoundField
DataField="TRAINING_PROGRAMS"
HeaderText="TRAINING_PROGRAMS"
/>
<asp:BoundField
DataField="REMARKS"
HeaderText="REMARKS"
/>
<asp:BoundField
DataField="TIME_PERIOD"
HeaderText="TIME_PERIOD"
/>
<asp:BoundField
DataField="RESPONSIBLE"
HeaderText="RESPONSIBLE"
/>
</Columns
>
<HeaderStyle
Wrap="true"
BackColor="Navy"
Font-Bold="False"
Font-Italic="False"
Font-Overline
="False"
Font-Strikeout="False"
Font-Underline="False"
ForeColor="White"
/>
</asp:GridView
>
</td
>
</tr
>
</table
>
</asp:Panel
>
</td
>
</tr
>
<tr
>
<td
>
<br
/>
<br
/>
<asp:Panel
ID="pnlOther"
runat="server"
Visible
="false">
<table
border
="0">
<tr
>
<td
align="left"
style
="background-color: Navy">
<asp:Label
ID="lblHeading1"
runat="server"
Font-Size="14px"
Font-Bold="True"
ForeColor="white">Other Training Requirements, if any</asp:Label
>
</td
>
</tr
>
<tr
>
<td
>
<asp:GridView
ID="gvOther"
runat="server"
AutoGenerateColumns="False"
Font-Size
="medium">
<AlternatingRowStyle
Font-Bold="False"
Font-Italic="False"
Font-Overline
="False"
Font-Strikeout="False"
Font-Underline="False"
BackColor="Lavender"
/>
<Columns
>
<asp:BoundField
DataField="BT_DESCRIPTION"
HeaderText="TRAINING_PROGRAMS"
/>
<asp:BoundField
DataField="BT_REMARKS"
HeaderText="REMARKS"
/>
<asp:BoundField
DataField="BT_DURATION"
HeaderText="TIME_PERIOD"
/>
<asp:BoundField
DataField="BT_COST"
HeaderText="RESPONSIBLE"
/>
</Columns
>
<HeaderStyle
Wrap="true"
BackColor="Navy"
Font-Bold="False"
Font-Italic="False"
Font-Overline
="False"
Font-Strikeout="False"
Font-Underline="False"
ForeColor="White"
/>
</asp:GridView
>
</td
>
</tr
>
</table
>
</asp:Panel
>
</td
>
</tr
>
<tr
>
<td
>
<asp:Panel
ID="pnlTechnical"
runat="server"
Visible
="false">
<br
/>
<table
>
<tr
>
<td
align="left"
style
="background-color: Navy">
<asp:Label
ID="lblHeading"
runat="server"
Font-Size="14px"
Font-Bold="True"
ForeColor
="white"
Width="503px">Technical Report</asp:Label
>
</td
>
</tr
>
<tr
>
<td
>
<asp:GridView
ID="gvTechnical"
runat="server"
AutoGenerateColumns="False"
Font-Size
="medium">
<AlternatingRowStyle
Font-Bold="False"
Font-Italic="False"
Font-Overline="False"
/>
<Columns
>
<asp:BoundField
DataField="TRAINING_PROGRAMS"
HeaderText="TRAINING_PROGRAMS"
/>
<asp:BoundField
DataField="REMARKS"
HeaderText="REMARKS"
/>
<asp:BoundField
DataField="TIME_PERIOD"
HeaderText="TIME_PERIOD"
/>
<asp:BoundField
DataField="RESPONSIBLE"
HeaderText="RESPONSIBLE"
/>
</Columns
>
<HeaderStyle
Wrap="true"
BackColor="Navy"
Font-Bold="False"
Font-Italic="False"
Font-Overline
="False"
Font-Strikeout="False"
Font-Underline="False"
ForeColor="White"
/>
</asp:GridView
>
</td
>
</tr
>
</table
>
</asp:Panel
>
</td
>
</tr
>
<tr
>
<td
>
<asp:Panel
ID="pnlAssignment"
runat="server"
Visible
="false">
<br
/>
<table
>
<tr
>
<td
align="left"
style
="background-color: Navy">
<asp:Label
ID="Label2"
runat="server"
Font-Size="14px"
Font-Bold="True"
ForeColor
="white"
Width="503px">Assignments/Projects Report</asp:Label
>
</td
>
</tr
>
<tr
>
<td
>
<asp:GridView
ID="gvAssignment"
runat="server"
AutoGenerateColumns="False"
Font-Size
="medium">
<AlternatingRowStyle
Font-Bold="False"
Font-Italic="False"
Font-Overline="False"
/>
<Columns
>
<asp:BoundField
DataField="TRAINING_PROGRAMS"
HeaderText="TRAINING_PROGRAMS"
/>
<asp:BoundField
DataField="REMARKS"
HeaderText="REMARKS"
/>
<asp:BoundField
DataField="TIME_PERIOD"
HeaderText="TIME_PERIOD"
/>
<asp:BoundField
DataField="RESPONSIBLE"
HeaderText="RESPONSIBLE"
/>
</Columns
>
<HeaderStyle
Wrap="true"
BackColor="Navy"
Font-Bold="False"
Font-Italic="False"
Font-Overline
="False"
Font-Strikeout="False"
Font-Underline="False"
ForeColor="White"
/>
</asp:GridView
>
</td
>
</tr
>
</table
>
</asp:Panel
>
</td
>
</tr
>
</table
>
</td
>
</tr
>
</table
>
</asp:Panel
>
</td
>
</tr
>
</ItemTemplate
>
code behind for Exporting it to excel
protected void btnExport_Click(object sender,
EventArgs e)
{
if (Repeater1.Items.Count > 0)
{
// RegisterCollapsibleExtender();
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.Buffer =
true;
HttpContext.Current.Response.ContentType =
"application/vnd.ms-excel";
HttpContext.Current.Response.AddHeader("content-disposition",
"attachment;filename = EDReport.xls");
HttpContext.Current.Response.Charset =
"";
StringWriter sw =
new StringWriter();
HtmlTextWriter htw =
new HtmlTextWriter(sw);
//ScriptManager sm = ScriptManager.GetCurrent(Page);
//sm.RegisterExtenderControl(cpeProject, pnlSurvery);
//sm.RegisterAsyncPostBackControl(LinkButton1);
Repeater1.RenderControl(htw);
HttpContext.Current.Response.Write(sw.ToString());
HttpContext.Current.Response.End();
}
}
I want to show model popup, I have One asp page in thatĀ Collapsible Panel and tow user control and one button, Suppose I click on button then show the model popup and hide the panel and user controls..
View 1 RepliesI need to solve a problem with showing some gridviews in a web page. Initially I wanted to have a series of buttons on top of each gridview and have the page loaded with all gridviews set on visible=false and then change to visible=true at the click on the corresponding button. This is though quite boring to do since I have around 50 gridviews and I would need to keep track of each gridview status and preserve that status for each click (postback). I was wondering if having the gridview in a collapsible panel was a better solution, however I'm not sure how I am supposed to add the gridview into that collapsible panel.
View 2 RepliesI have a gridview where I have added Collapsible panel extender. When I am running Its working fine for 1st Row. but when I click in 2nd row, Nothing happens. Below is code.
[Code]....
I am using a grid view as a child control inside a grid view and using an collapsible panel extender to show and hide the child grid.
Here is my code
[Code]....
I am getting the following error:
Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'cpe' can't be added to the application.
I am using a collapsible child gridview inside a parent gridview. When I click on the expand image, the data to displayed is put up correctly, however when I make some changes in the child gridview, they seem to be lost!! That is, the changes do not get reflected in the database.
View 3 RepliesI was wondering if anyone knew if it was possible to control a collapsible panel with a drop down list?
For example. Say the drop down list has options, 1, 2, 3, 4. I want to hook up panels that go to each option. So when the user selects 1, panel one is shown, when user selects 4 panel 4 is shown.
Is there a way without using AJAX and the collapsible panel to create the same effect wtih only CSS?
View 2 RepliesI have four collapsile panels. Now i want there sould be two link buttons expand all and collapse all. Now whenever user will click on expand all, all the collapsible panels should expand at the same time. Similarly, whenever user will click on collapse all, all the panels should be collapsed.
View 17 RepliesI've implemented a Collapsible Panel that works great, except that if it is collapsed, it expands on postback. How can I get it to maintain state (collapsed if client collapsed, expanded if client expanded)?
[Code]....
var newcpe = $find(cpe);
newcpe._doOpen();
I am using the above code to open the collasible panel. But its working in IE only. Not working in mozilla. But I can get the collapsible panel id in both the browsers by alert(newcpe);
I just tried a simple page with a collapsible panel extender, following the tutorial video at asp.net/ajax/videos. When clicking on the header panel, nothing happens. I have gone through countless posts looking for the answer, I have not found a solution. When viewing the page using IE, it shows a page error: Object expected. The cpe does not work in any browser; it does not work on my local machine or production server. As far as I know, the Ajax Control Toolkit was installed correctly; the .dll is in the bin folder. see this link for the page in question: [URL] Below is the code for the page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CollapsiblePanelExtender.aspx.cs"
Inherits="CollapsiblePanelExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="HeaderPanel" runat="server" Style="background-color: rgb(230,230,230);
cursor: pointer;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/MasterFiles/images/collapse.jpg" />
AJAX Collapsible Panel Test
<asp:Literal ID="Literal1" runat="server">(Show Details...)</asp:Literal>
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server" Style="height: 0px; overflow: hidden;">
<h4>Some Details Content here.</h4>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="ContentPanel_CollapsiblePanelExtender" runat="server"
Enabled="True"
TargetControlID="ContentPanel"
CollapseControlID="HeaderPanel" ExpandControlID="HeaderPanel"
Collapsed="true"
ImageControlID="Image1" ExpandedImage="~/MasterFiles/images/collapse.jpg"
CollapsedImage="~/MasterFiles/images/expand.jpg"
TextLabelID="Literal1" CollapsedText="Show Details..." ExpandedText="Hide Details..."
SuppressPostBack="true"
ExpandDirection="Vertical">
</asp:CollapsiblePanelExtender>
</div>
</form>
</body>
</html>
I am using collapsible panel and it's working fine in IE. But in firefox it cut off content from bottom. What should be the solution to this.
View 1 RepliesI have a simple AJAX collapsible panel and 2 radio buttons. I'd like radio button 1 to open the panel and then radio button 2 to close the panel. How do I accomplish this?
View 3 RepliesI want to add some information, like an adress, in the header of an collapsible panel. I want to add a link to google maps to it in the header. But if i click on the Link, the panel collapses/expands but the click on the link will be ignored. I guess the click on the panel overrides the link :/
View 1 RepliesI have a formview in one of my pages and I need to use a collapsible panel extender for the FormView fields so as to get better navigation , classification of the fields. How can I achieve this.
View 2 RepliesI wanted to introduce paging within a datalist that is contained within the Collapsible Panel Extender.I do not want to change the URL based on the page.
View 4 RepliesHere is what I have done so far. I have a datalist to show notifications. The datalist is bound to an sqldatasource.
I have tried to use a collapsible panel extender in the datalist to hide or show message, but the designer could not render the datalist because of the collapsible panel control. It gives an error "Unknown server tag asp:CollapsiblePanelExtender"
here is my code
[Code]....