Accordian and Gaps between headers

Im sure that this issue has probably been addressed before, but if it has, could someone point me to the relevant post.

I have got an Accordian which is placed within a tablecell, and I have gap between the headers when first viewed. These gaps disappear when the accordian is used, or when I place the accordian outsde the table.

The accordian sample says "If you place the Accordion inside a <table> tag and have FadeTransitions set to true in Internet Explorer 6, it will affect the spacing between Accordion Panes."but I am viewing it in IE7 and have FadeTransitions set to false.

How can I get round this without removing the accordian from the table?

Thanks

Any ideas anyone?

Thanks

Sorry, this is not post with a solution, but a further gripe.

If an accordion is placed in web part (which renders eventually as a <table>), the same problem occurs. Its just taken several hours to zero in on identifying the conditions under which it happens.

The effect I see is that 10 pixels high spaces are suddenly added to the gaps between closed accordion panels when the mouse moves outside the accordions area. (Even a right click will do it). This always happens when the accordion is inside a <table>. I've searched everywhere for a surreptitious 10px padding (or two 5px ones) in the AjaxControlToolkit, in case it was being sneaked in somehow, to no avail.

Using the IE Developer Toolbar allows the space to be accurately measured and outlines the area in question quite nicely, but offers no clue as to why the gap appears.

The accordion works beautifully if there is no <table> in sight.

I know in html if there are white spaces between the table cells and an image a gap appears, which is rather annoying

ie:

<td>
<img>
</td
will have a gap, but

<td><img></td>

there is no gap, so I am assuming that this is what is happening when the Accordian is put into a table.

I had this problem also. Just use nested tables. Eaxmple:

<table>

<tr><td><img src="http://pics.10026.com/?src=whatEver"></td></tr> <------- This gives you the white gap!

<tr><td><table><tr><td><img src="http://pics.10026.com/?src=whatEver"></td></tr></table><td><</td></tr> <---Should solve the problem

<table>

This only happens when using an image in the accordian. See if this helps!

I just switched over to the new release of the toolkit version 10301 released March 1. Although it is not listed as an issue that was corrected, this strange spacing problem between the according panes has gone away for me. Unfortunately now the accordion only works in IE7. When I use IE6 the accordion is visible as the page is loading, but once the page finishes loading, the entire accordion disappears.

Here is the link for the new release... (if you dare)...

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=1425

Billy

accordian and frames in IE

Hello all.

I'm trying to use the accordian controll on my page and it works great when I'm developing, but in the production environment my page is displayed inside a frame of another page. When I view the page in FF it works fine, but not when viewed in IE. The inital page looks fine, but the textareas don't collaps/expand when clicking on the headers. Is there anything I've missed or is this i bug?

Thanks

Endre

Hello again.

I have been doing som research and found out the following. It might be a cross-domain problem. When the html page containg the framessets have a different domain name then the page containing the accordian, it does not work. The error is most likeky not related to the accordian, but the ajax scriptmanager control. It looks like it failes even on clicks in the page. I'm not sure, but I think is't a javascript that tries to fint the coordinates of the click and then try to access the page outside the frame.

Any idees on how to fix this?

Endre

I have solved the problem. The following link and the lates versjon of the ControlToolkit made it for me.

http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Endre

Accordian AjaxControlToolkit

How to insert a server control into the Accordian (AjaxToolKit control).And how to access this control while run time.

Look, here is how accordian control I am using pasting your markup

 <asp:Button ID="Button1" runat="server" Text="Change Text" /><br />    <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:Accordion ID="Accordion1" runat="server"> <Panes> <cc1:AccordionPane> <Header>"Test"</Header> <Content> <asp:Textbox ID="txt" runat="server" Text="Hello"></asp:Textbox> </Content> </cc1:AccordionPane> <cc1:AccordionPane> <Header>"Test1"</Header> <Content> <asp:Textbox ID="Textbox2" runat="server" Text="Hello2"></asp:Textbox> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion
now here is what I am using to add the control in one of my pane.
 
Dim TextBox1As New TextBox TextBox1.Text ="Dynamic Test" Accordion1.Panes(0).ContentContainer.Controls.Add(TextBox1)
 
and here is the code to set the text, (you can get too).
 
CType(Accordion1.Panes(1).ContentContainer.FindControl("Textbox2"), TextBox).Text ="Dynamic Text"
  
 
cheers 
 

Accordian (indicators like collapsible panel)

I am sure this has come up - is there a way to add indicators on the accordian panel headers link we have on the collapse panel ?

Hi Codegalaxy,

Yes , as far as I know, we can do it by using Javascript. Here is my sample with shows how to hide a Panel when click on the Button.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> </script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Accordion</title> <style> .accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } .accordionLink { background-color: #D3DEEF; color: white: } </style></head><body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" /> <div> <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Acc" Text="Accord1" onclick="chageAccordion()"/><asp:RadioButton ID="RadioButton2" runat="server" GroupName="Acc" Text="Accord2" onclick="chageAccordion()"/> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" SuppressHeaderPostbacks="true" > <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" > <Header> Panel1</Header> <Content> PanelContent1</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> Panel2</Header> <Content> PanelContent2</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header> Panel3</Header> <Content> PanelContent3</Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> <input id="Button1" type="button" value="button" onclick="hidePanel()"/> <script type="text/javascript" language="javascript"> var accordion; function chageAccordion(){ if(accordion==null) accordion = $find('MyAccordion_AccordionExtender'); if($get("<%= RadioButton1.ClientID%>").checked){ accordion.set_SelectedIndex(0); } else{ accordion.set_SelectedIndex(1); } } function hidePanel(){$find('MyAccordion_AccordionExtender').get_Pane(0).header.style.display="none"; //add your HTML Code here. $find('MyAccordion_AccordionExtender').get_Pane(0).content.style.display="none"; $find('MyAccordion_AccordionExtender').set_SelectedIndex(1); } </script> </div> </form></body></html>

Please pay your attention to the Bold part. You can do some similar things here.

I hope this help.

Best regards,

Jonathan

Accordian - Smooth at first, then gets choppy

Here's what I have. I've got an accordian in a web user control. And I've placed it on all my pages. When I go to the first page it runs VERY smooth.. but once I click on a link from the accordian to another page.. the refreshed accordian user control is all choppy.

I also tried this with a datagrid in an update panel as a user control and it did the same thing. So I know it's not the accordian. It has something to do with atlas. I compared the source from a smooth page and a choppy page and there's no difference..

so what do I have to do to keep it smooth? or can you not use it as a web user control?

Apparently.. it's all IE6's fault.. ugh that really sucks.. I don't know if I can get the whole company to upgrade to IE 7 Beta 3.. stupid flickering..
Hi unlikelyband,

Did you discover a specific reason IE6 was causing this? Or is it just only IE6 that it happens in?

Thanks,
Ted

Well. I actually only tried IE 6 and IE 7 Beta 3.. and IE 7 is really smooth..

I don't really have time to text IE 5 or opera or firefox..

All I know is that it kind of sucks people are going to have to deal with the flicker until they manage to upgrade everyone to IE 7

Hi,

Well it's true that the animation in IE6 isn't as smooth as IE7 and Firefox, but we're working on making the accordion snappier. Hopefully it won't be a problem for you and your users after the next release.

Thanks,
Ted

Accordian - Issue

Hi,

I placed a textbox and a button in an Accordian (inside a pane). When i clicked the button and sumbit the form the data in the textbox is gone. It happens only in the first post back. After that there is no issue.

Can someone kindly let me know if it is an issue or am I doing something wrong ? Do I have do some special configuration in the According control to be used effectively ?

Thanks

Rukshan

hi,

could you post .aspx and code behind code please.

thanks,

satish.

Hi Satish,

I had done a mistake in my post ealier. The problem occurs when you put the textbox and the button in a user control and place that user control inside an accordian pane.

Here is the code,

file : testusercontrol.ascx

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="testusercontrol.ascx.cs" Inherits="testusercontrol" %>
<asp:TextBox runat="server" ID="TextBox1" />
<asp:Button runat="server" ID="submit1" Text="submit" />
<asp:Label runat="server" ID="label" ></asp:Label>

file: testusercontrol.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class testusercontrol : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{

submit1.Click += new EventHandler(sub_Click);

}

void sub_Click(object sender, EventArgs e)
{
label.Text = TextBox1.Text;
}
}

Here is the page where I have put the above usercontrol (there is no important code in the code behind for the page, so I am not going to put that here )

file: testatlas.aspx

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="testatlas.aspx.cs" Inherits="testatlas" %
<%@. Register src="http://pics.10026.com/?src=testusercontrol.ascx" TagName="testusercontrol" TagPrefix="uc1" %
<%@. Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="Microsoft.Web.UI" TagPrefix="asp" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>

<div>
<cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" Width="100%" Height="100%"

>
<Panes>
<cc1:AccordionPane ID="pane1" runat="server">
<Header>pane1</Header>
<Content>
<uc1:testusercontrol id="Testusercontrol1" runat="server">
</uc1:testusercontrol>
</Content>
</cc1:AccordionPane>

</Panes>
</cc1:Accordion>


</div>
</form>
</body>
</html>

The issue is when you enter some text on the textbox (which is in the usercontrol) and submit, the label should be populated with whatever you entered, but it does not :(.

It works fine when you put the user control outside of the according control.

Your help is highly appreciated.

Thanks

Rukshan

hi Rukshan,

i tried your code, but problem is i'm gettign error that Sys is not defined. when you run your project see in status bar of browser if you see something like "Done but with errors on page".

i'll try to see if it works.

thanks,

satish.

Hi Satish,

I do not get such an error in the browser.

Anyways, to reproduce the problem all you have to do it create a user control and put a textbox , a label and a button. In the button eventhandler, assign the the text in the textbox to the text property in the label.

Next create a page and put an accordian pane. Place the user control inside the accordian. Run the app.. When you click the button after entering some text in the textbox, idealy you should see that value in the label. But it doesn't . If you put the usercontrol outside the accordian, It works fine.

Hope you got the picture now :D

Thanks

Rukshan

I was able to duplicate your issue. It seems as if the accordion control is not preserving the view state of it's composite controls. I am not a control guru but it seems that accordion should derive from CompositeControl instead of WebControl. This would do two things - help with the view state of the controls and also clean up the design time rendering.

But back to your problem. The work around solution is to do the following if you want the viewstate for your user control maintained:

protected void Page_Init(object sender, EventArgs e) { AjaxControlToolkit.AccordionPane myPane =new AjaxControlToolkit.AccordionPane(); testusercontrol myUC = (testusercontrol)Page.LoadControl("~\\testusercontrol.ascx"); myPane.ContentContainer.Controls.Add(myUC); Accordion1.Panes.Add(myPane); } 

And then just do the following for the accordion in the ASP:

 <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" Width="100%" Height="100%"> <Panes> </Panes> </cc1:Accordion>  

Let me know how it goes.

Hi Cloris,

Thanks a lot, you solution works. Wonder what made it preserve the viewstate when the controls are added in code.

Anyways, it solves the problem. :D

Thanks again!

Cheers

Rukshan

I am not sure what caused this problem. I have been using the Accordion as my intro to web controls. I think it has something to do with the control and how it keeps track of where it's data is coming from - a datasource or the panes tags. When it tries to make the decision to reload the panes from the tags, it is not getting what it expects from the view state. So it just reloads the panes from scratch - killing the viewstate. There is some work that needs to be done in CreateChildControls and elsewhere. Definately a work in progress. The Accordion does function fine when attached to a datasource though.

Hi

Im new to this, i still dont get how this works? So do you HAVE to have your bits within a . ascx control in each pane and not just have a button to do something within the pane?

Also what do you need to put into your asp part of code so it knows where to look.

Thanks
Adam

Hi Adam,

You can just put your stuff within the pane. No need ot have a user control.

Thanks

Ruk

Thanks Ruk

But how do i set the code above to apply for my button control and not a usercontrol as explained earlier?

Thanks

Adam

Hi Adam,

I'm not sure if I understood your question properly, but I hope the following code would help

aspx file :

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0">
<Panes>
<cc1:AccordionPane runat="server" ID="pane1" >
<Header>
Pane 1
</Header>
<Content>

<asp:Button ID="Button1" runat="server" Text="Button" />
</Content>

</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>

code file :

protected override void OnInit(EventArgs e) {base.OnInit(e); Button btn = (Button) Accordion1.Panes["pane1"].FindControl("Button1"); btn.Click +=new EventHandler(btn_Click); }void btn_Click(object sender, EventArgs e) { Response.Write("Clicked me ! "); }

Thanks

Ruk 

That worked great, thanks!

Adam

Ok. But can you imagine this scenario.

1. First time I hit my page I render all accordion panes, with desired controls in it. Picture, Ajax.Rating control, ...)

2. Now I change some Rate in one of my panes. Page does PostBack

3. Now I can insert that rate in database, print message, do some logic...

4.problem: (I want everything that I binded in step 1 to see again after page is partially updated (I have Update Panel that wrap my accordion), That means I do not want again to bind my accordion panes, because this can be very time consuming!!!

5. My accordion does not show up.

Question: Am I missing something or have I logic error in my scenario?

Regards, Veroljub

Accordian - How to refer to contained controls in code behind?

Hi,

If i put regular asp.net controls into an accordian pane they are not visible in the code behind file. In other words i cant get mydropdown.selectedvalue if mydropdown is contained in an accordian pane because the compiler will complain that mydropdown doesn't exist? My work around has been to put content into user controls and put the ascx's into the content panes but is this standard practise?

Thanks

Richard

Hi Richard,

Since the AccordionPanes can be databound, they implement theINamingContainer interface and you're unable to access them directly in your code behind. You can work around this withDropDownList list = MyAccordion.FindControl("MyDropDown") as DropDownList;.

Thanks,
Ted