Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts

Wednesday, March 28, 2012

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.Crying


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

Accordian - Dynamic addition/subtraction of panels?

I want to create an accordian at page load and dynamically add a number of panels with varying content at that time..any thoughts and optimally psuedocode on how to do this?Hi Mike,

You can do it just like other controls. Here's a small example:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> /// <summary> /// Dynamically create our accordion panes /// </summary> protected override void OnLoad(EventArgs e) { base.OnLoad(e); AccordionPane pane1 = new AccordionPane(); pane1.HeaderContainer.Controls.Add(new LiteralControl("Pane 1")); pane1.ContentContainer.Controls.Add(new LiteralControl("Pane 2")); MyAccordion.Controls.Add(pane1); AccordionPane pane2 = new AccordionPane(); pane2.HeaderContainer.Controls.Add(new LiteralControl("Pane 2")); pane2.ContentContainer.Controls.Add(new LiteralControl("Content 2")); MyAccordion.Controls.Add(pane2); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Accordion Demo</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; } </style></head><body><form runat="server"><div> <atlas:ScriptManager ID="Scripts" runat="server" /> <atlasToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"> </atlasToolkit:Accordion></div></form></body></html>
Thanks,
Ted

I think the code to add AccordinePane to Accordin is changed. the previous code didnt work for me.

// import Atlas Controlkit.

using System.Web.UI.HtmlControls;
using AtlasControlToolkit;

//Create a Atlas Accordion instance.
Accordion aAccord = new Accordion();


// Create AccordionPane instance.

AccordionPane accordPane = new AccordionPane();

// create your Header panel( the title of each Pane). and your component to each pane container.
// add Header Panel and Container panel, the panel which which will collape and open.

accordPane.HeaderContainer.Controls.Add( headerPanel );
accordPane.ContentContainer.Controls.Add( collapsePanel );

// add accordPane to Accordin instance.
aAccord.Panes.Add(accordPane);


// you can add as many AccordPanes as you want.


// Add Accordin object to the Panel.
myPanel.Controls.Add( aAccord );

Kishore.


Hi Kishore,

Yes - in response to user feedback we've hidden theControls collection and replaced it with the easier to useAccordionPane-onlyPanes collection.

Thanks,
Ted

Is there a way to add an unknown number of AccordionPanes? I'm trying to do thing:

List<string> addresses =newList<string>();
addresses.Add("123 Main St, Phoenix, AZ, 85041");
addresses.Add("658 Alta Vista Rd, Phoenix, AZ, 85041");int name =1;
foreach (string sin addresses)
{
AccordionPane pane =newAccordionPane();
pane.HeaderContainer.Controls.Add(newLiteralControl(s));

pane.Width =

300;
pane.ID ="pane" + name;
Accordion1.Controls.Add(pane);//it doesn't add the right pane because it's named wrong. What should I change?
name++;
}

Thanks!


And I can add the code in VB:

This is in AJAX.aspx (for example):

<ajaxToolkit:AccordionID="aDynamicky"runat="server">

<Panes>

</Panes>

</

ajaxToolkit:Accordion>

And following is in code behind AJAX.aspx.vb:

Imports AjaxControlToolkit

Partial

Class AJAXInherits System.Web.UI.PageProtectedSub aDynamicky_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles aDynamicky.PreRenderDim panel1As AccordionPane =New AccordionPane

panel1.HeaderContainer.Controls.Add(

New LiteralControl("This is a header of 01."))

panel1.ContentContainer.Controls.Add(

New LiteralControl("And here is the content of 01."))

aDynamicky.Panes.Add(panel1)

Dim panel2As AccordionPane =New AccordionPane

panel2.HeaderContainer.Controls.Add(

New LiteralControl("This is a header of 02."))

panel2.ContentContainer.Controls.Add(

New LiteralControl("And here is the content of 02."))

aDynamicky.Panes.Add(panel2)

EndSub

End

Class

Of course, you can format your panels via CSS.

Accordian

Hi guys

can anyone tell me how to use accordians from the ajax toolkit ?

Thanks

Hi,

go therehttp://www.asp.net/learn/ajax-videos/video-87.aspx and watch the movie or download the code (vb or c#)

Hope it helps

Regards

-----------------------------

Please do not forget to mark as answered. Thanks

Accordeon wont work - please help a newby

Hello,

I am new to Atlas and trying to use accordeon extension from the toolkit. I have installed the toolkit and AjaxControlExtender, then created a web site with ajax-toolkit template and added accordeon control from toolbox to the Default.aspx

I get a few error messages:

Error 1 Type 'AjaxControlToolkit.Accordion' does not have a public property named 'AccordionPane'. c:\inetpub\wwwroot\eBible-ajax\Default.aspx 13
Error 2 Type 'AjaxControlToolkit.Accordion' does not have a public property named 'AccordionPane'. c:\inetpub\wwwroot\eBible-ajax\Default.aspx 16
Error 3 Content ('</ajaxToolkit:AccordionPane> </ajaxToolkit:AccordionPane>') does not match any properties within a 'AjaxControlToolkit.Accordion', make sure it is well-formed. c:\inetpub\wwwroot\eBible-ajax\Default.aspx 16
Error 4 Accordion1:Type 'AjaxControlToolkit.Accordion' does not have a public property named 'AccordionPane'. c:\inetpub\wwwroot\eBible-ajax\Default.aspx http://localhost:8080/eBible-ajax/

I guess I am missing something, possibly a very simple thing that is well knows to you guys but not yet to me. Below is how the pages' code looks. Thanks for help!

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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" /> <div> <ajaxToolkit:Accordion ID="Accordion1" runat="server" Width="250px"> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass=""> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass=""> </ajaxToolkit:AccordionPane> </ajaxToolkit:Accordion> </div> </form> </body></html>
Hi,


Sorry about that .

We dont see the @.Register tag in your page to register the AjaxControlToolkit process.

Can you add this line after the @.Page tag ?

<%@. Register Assembly="AjaxControlToolkit, Version=1.0.10123.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

nope, doesn't help - same errors

it should be like this i believe

<ajaxToolkit:Accordion>

<Panes>

// panes in here

</Panes>

</ajaxToolkit:Accordion>



Figured this out, too. The Panes tag is not added for some reason when you add panes from properties box (panes -> collection -> add). Weird.

Thanks anyway.


Hi there,

you should check out the introductory video on this site

http://www.asp.net/learn/videos/view.aspx?tabid=63&id=87

cheers!

Accessing Wizard controls from client-side Javascript

Hello, all. Thank you in advance for taking the time to read this. I know it is of questionable relevance given that the Wizard control is not an AJAX toolbox component, but since the Wizard is more useless without AJAX, I am hoping it is close enough to topic.

I am dealing with a Viewstate issue that is forcing me to use ScriptingServices for most of my async communications in order to keep round-trip bandwidth manageable. I want to be able to validate entries made on a long wizard both on-the-fly and at-once. But using ScriptServices, I need to access the values in the Wizard controls from client-side.

Trouble is, I have found that the wizard controls and their values are only visible to the DOM if the wizard page is active. Elements on non-active pages are totally inaccessible from client-side.

For example, a textbox with ID=TextBox1 is on page 1 of the wizard control ID=Wizard1; ID=TextBox2 is on page 2 of Wizard1

when Wizard1.ActiveStepIndex equates to page 1, then $get("TextBox1") works, but $get("TextBox2") does not.

I am assuming that there is some object reference to Wizard1 that can be used client-side to get the values from control on non-active pages, but I just can't seem to find it.

If anyone has experience with this and can tell me how to access these values, I would be highly appreciative.

Thank you again for the time, and in advance for any information you can provide.

Hi,

That's because only content of active step will be rendered. Though, all of them will be encoded and saved in ViewState.

My suggestion is use hiddenFields out of the wizard to keep the value of different steps, and they will be always generated and persisted.


Thanks again for your time and thoughts. That's exactly how I have decided to handle it. It sure adds a lot of complication to what seemed like a pretty easy control. Add to it that I am replacing long dropdown lists with static values after a selection has been made to trim the viewstate, and I think it would have been easier to start from scratch.

The hidden fields work great -- very good idea.

Thanks again!

Accessing webservice over HTTPS with ajax

hey everyone, just an easy lil question to start me off into the world of ajax and web services :D

i have created a webservice that is located athttps://active.innerstruct.com/ausclans/webservices/ausclans.asmx

i've included it in the ScriptManager Services tag

but i'm still getting errors :(

do i have to create a web reference like the standard web services?

What is the exception?


FYI Cross Domain call is not allowed. The Web Service must exist in the same virtual directory/site.

Accessing Web Services that are external to my application.

Is it possible to use the <atlas:servicereference> to set a path to a web service that doesn't exist within the same application as the consuming aspx file?

All the samples and examples show the <atlas:servicereference path="" /> containing the path to an asmx file located within the same application as the consuming aspx file. How would I set a reference tohttp://somedomain/someapp/someservice.asmx ?

This can't easily be done because XmlHttp (the browser component used to make requests) disallow requests to other domain for security reasons. Note that youcan make requests to Atlas services in other apps, as long as they're in the samedomain. e.g. foo.mydomain.com can use bar.mydomain.com.

In the next build of Atlas (around march), we will allow a limited form of cross domain method calls to Atlas services (without using XmlHttp).


Thanks. I can just reference the external web services from with the one local to my application.
Yes, doing this is what we call 'bridging', and we will also have addition support for this is a later build. In the meantime, do whatever gets you going! :-)

Accessing variables from OnComplete

Hello guys, we've been trying to convert our web app to Atlas from AJAX.NET and ran into a bit of a problem with the way our AJAX calls are structured.

Take, for example, this hypothetical function:

function getAlbumName(aID)
{
PlanetEye.GTTS.AjaxService.getAlbumName(aID, OnComplete)
}
function OnComplete(result)
{
document.getElementById("albumDiv").innerHTML =result;
}
Now, my question is: Is there a way to access the aID variable from within the OnComplete function? For example, if I want the innerHTML to read something like -"id: "+aID+" name:"+result

Back when we were using AJAX.NET we avoided the call back function all together so that we could just say:albumName =PlanetEye.GTTS.AjaxService.getAlbumName(aID);and continue on with the getAlbumName function, but i dont' think that's possible with Atlas, is it?

Thanks for any help, or pointers in the right direction Smile [:)]

Yep, you can use the userContext parameter which gets passed into the OnComplete callback, there's a few ways to specify the userContext, its probably best for me to just point you at the docs,

http://atlas.asp.net/docs/atlas/doc/services/consuming.aspx#alt

I believe your OnComplete will need to look like this once you update the call:

OnComplete(result, response, userContext)...

And you would just need to pass your aID as your userContext...

Hope that helps,
-Hao


HaoK:

Yep, you can use the userContext parameter which gets passed into the OnComplete callback, there's a few ways to specify the userContext, its probably best for me to just point you at the docs,

http://atlas.asp.net/docs/atlas/doc/services/consuming.aspx#alt

I believe your OnComplete will need to look like this once you update the call:

OnComplete(result, response, userContext)...

And you would just need to pass your aID as your userContext...

Hope that helps,
-Hao

This part motivated me to research a bit more about this in the search for the solution my needs. I was used to AJAX.NET in the way that I were able to get a result without having to write a callback function. For example (pseudo code):

1// Function called from any button2function PerformTasks(controlid, 2ndParam)3{4 // Ajax call5 res = AjaxMethods.GetResults(2ndParam);67 // Do the stuff needed8 document.getElementById(controlid).innerHtml = res.value;910 // Other logic11}

Using new WebMethod logic we need to pass parameters to the OnComplete function. We can do this using one value ou several becauseuserContext can be any JavaScript primitive type, array, or object. So consider this:

1// My example function called from an OnCLick event2function CommentFile(sFilename, drpClientID)3{4var arrUserContext = new Array();5arrUserContext[0] = sFilename;6arrUserContext[1] = drpClientID;78EntitiesService.GetFileNotes(sFilename, OnCommentFile, OnCommentFailure, arrUserContext);91011}1213// The OnComplete function14function OnCommentFile(arg, arrUserContext)15{16var sFilename = arrUserContext[0];17var drpClientID = arrUserContext[1];1819drpTmp = document.getElementById(drpClientID);20drpRevisionValue = drpTmp.options[drpTmp.selectedIndex].value;2122alert(arg);2324// all the logic from here, we can use the return arg and the param(s) from the source function that is triggered from any link, etc.2526}2728// The OnFailure function29function OnCommentFailure()30{31// Empty32}
My problems are solved with this solution.

Accessing values from dynamically created controls

Hi. I'm writing a web application that uses Atlas todynamically create controls in a specific section of a web page. I have 2 update panels. One of them contains a DropDownList. The other one will contain thedynamically created controls. The controls are created in the SelectedIndexChanged event of the DropDownList, and I coded that in the server side. All those controls are arranged in a table server control, which is also created in the SelectedIndexChanged event. The page also has a Button server control that will allow me to start processing the values entered by the user in the created controls. Of course this processing will be done in the server side. This button is not part of either update panel.

Now, the problem is that when I try to get the values of the controls in the Button Click server event, using the table.FindControl() function, I see that the table itself is null, so I cannot access any control value. I think the problem has to do with the fact that the table and its controls are created in the update panel, and for some reason everything created there is not available for my Button Click server event.

How can I solve this scenario?

Thanks,

Julio

Modifying the controls colletion during a postback is generally not a good idea in ASP.NET. Additionally, dynamically added controls will not persist through viewstate so you'll have to re-create and add them to the container on each postback.

Instead of adding/removing controls, I suggest you use the "Visible" property of the control. You can set the control.Visible=false, which will prevent it from rendering down to the client.

Hope this helps,

-Tony


Thanks a lot Tony. The problem is that the user can choose 25 different elements in my combobox, and each element will require to create/show from 1 to 20 new controls on the dynamic section of the page. So if I take your advise and just put all possible controls on the page on design view, hidding or showing them asappropriate, wouldn't it be too much overhead for my page?

Julio


Julio,

Any way you choose is going to require quite a bit of code on your end to determine when to show/hide or create/destroy controls. You are correct in that should you choose to instantiate all controls on the page load, it will indeed add extra overhead.

To acheive the results you are looking for, you'll need to test for which item is selected, and fill the update panel accordingly. The earlier this happens in the page lifecycle the better off you are. The one problem you might encounter is that replacing a control on the fly like this, could cause viewstate errors since the control which saved its viewstate in the previous response, has now been replaced with a completely different control.

We've actually built the behavior you're looking for directly into the Infragistics WebTab. It provides LoadOnDemand behavior though an AJAX mechanism. Using a Tab Interface also speeds up the development since you can separate your content into individual tabs, displaying only the relevant tab. In most cases the performance overhead incurred is well worth the development time saved. Of course, you'd need to make that call based on your own project requirements.

Hope this helps,
-Tony


Hi Tony. You are completely right. I have just found that viewstate error you mention. I have tried to control that error, but I just keep getting errors when adding/removing controls. I would like to try using Infragistics WebTab, as our company has full licenses for the NetAdvantage suite. Could you please show me a small example of how could I achieve this behavior with the WebTab and the LoadOnDemand behavior? Or maybe give me a link to an example? I would reallyappreciate it.

Thanks a lot for your help,

Julio


Hi Julio,

You'll need to getNetAdvantage 2006 Volume 2 if you don't already have it. On the WebTab, set AsyncMode=On, and AsyncOptions.EnableLoadOnDemand=True. Next, using the interactive design surface, simply drag and drop your content into the desired Tab pane. You can even switch between tabs by clicking the desired tab on the design-surface. The WebTab has UpdatePanel-like behavior built directly into it, so postbacks will automatically be turned into AJAX callbacks. The LoadOnDemand behavior will also enable the initial page load to contain only the content for the selected tab, all other tab content will be dynamically retrieved as necessary.

Hope this helps,
-Tony


Hi Tony. It seems likeUltraWebTabAJAX features won't help me. Theasync behavior I'm looking for starts outside the tab control, but not in the tabs itself. My UltraWebTab has 25 tabs inside it. I also have a dropdownlist which is outside my UltraWebTab. Now, without any AJAX behavior, what my page does is that, when you select an element in the dropdownlist I hide all the tabs except for the one that is related to the selected value on the dropdownlist. This of course causes a full roundtrip to the server.

So, what I'd like to happen is that, when I change my selection on the dropdownlist, all the not related tabs just become invisible, but with no roundtrip. I enabled all the async options you mentioned, but I thing they are mostly targeted for the scenarios where the user navigates between tabs, and no with my particular scenario. So I just thought I could solve this by adding an Atlas UpdatePanel and putting the UltraWebTab inside it. I also added a trigger to the panel so that any time the dropdownlist change its value, the updatePanel would update its contents.

Here is the code for my DropDownList:

<table>

<tr>

<tdstyle="width: 3px"valign="top">

<asp:DropDownListID="MyDropDownList"runat="server"AutoPostBack="True"DataSourceID="MyDataSource"DataTextField="Description"DataValueField="Id"></asp:DropDownList><asp:ObjectDataSourceID="MyDataSource"runat="server"SelectMethod="GetMyItems"TypeName="MyProduct.MyClass"></asp:ObjectDataSource></td>

</tr>

</table>

...And this is the code for the UltraWebTab and the UpdatePanel:

<table>

<tr><tdstyle="width: 239px; height: 101%;"valign="top"><atlas:UpdatePanelID="Up1"runat="server"Mode="conditional"><ContentTemplate><igtab:UltraWebTabID="MyUltraWebTab"runat="server"BorderColor="#949878"BorderStyle="Solid"BorderWidth="1px"ThreeDEffect="False"SelectedTab="16"AsyncMode="On"><DefaultTabStyleBackColor="#FEFCFD"Font-Names="Microsoft Sans Serif"Font-Size="8pt"ForeColor="Black"Height="22px"><PaddingTop="2px"/></DefaultTabStyle><Tabs>

<!--Here comes my Tabs and controls -->

</Tabs><RoundedImageFillStyle="LeftMergedWithCenter"HoverImage="[ig_tab_winXP2.gif]"LeftSideWidth="7"NormalImage="[ig_tab_winXP3.gif]"RightSideWidth="6"SelectedImage="[ig_tab_winXP1.gif]"ShiftOfImages="2"/><SelectedTabStyle><PaddingBottom="2px"/></SelectedTabStyle><BorderDetailsColorBottom="90, 120, 160"ColorRight="90, 120, 160"/><AsyncOptionsEnableLoadOnDemand="True"/></igtab:UltraWebTab></ContentTemplate><Triggers><atlas:ControlValueTriggerControlID="MyDropDownList"PropertyName="SelectedValue"/></Triggers></atlas:UpdatePanel></td>

</tr>

But now I'm just getting an "Unknown Error" popup window every time I change my selection in the dropdownlist. It seems like any combination of UltraWebTab and UpdatePanel just does not work. I have already written Atlas apps with my current installation (June CTP) and they work fine until I add an UltraWebTab. All Atlas configurations in the web.config and the script manager are on place, so it should work.

Is there a known compability issue between UltraWebTab and UpdatePanel? If it is, is there any way I could achieve my desired behavior with UltraWebTab async and loadOnDemand options?

Thanks a lot,

Julio


Hi Julio,

You should contact Infragistics Developer Support and provide them the details above. A hotfix was made available on Friday, July 28th which may address this issue.

-Tony

Accessing the ScriptManager in code behind

In a User Control, how do you access the ScriptManager in code behind? The ScriptManager gets placed on the "parent" aspx page, but seems not to be accessible from any user controls ascx that get added to that page.

Specifically, I would like to capture the ScriptManager.PreRender event for use in a Repeater control.

Is there a way to raise an event in the parent ASPX page that the child user control can pick up?

if you want to call parent control,

you can use

this.Parent.FindControl..

i am not sure why you want user control to do something with "ScriptManager.PreRender event"

why cant you use ScriptManager.PreRender event to do something for your user control ?

you can always use

Page.FindControl to call your use control in the ScriptManager.PreRender event


Hey, thanks for your reply. I could really use some help.

The goal is to use an update panel inside a repeater, both of which are use controls loaded onto a page. There are some inherint challenges with this. The first being that 1) the ScriptManager is not accessible because it is in the parent, 2) the update panel elements don't seem available at the time of the event. Below is my code to access them, but the me.parent.findcontrol always returns "nothing."

My research has shown me that the ScriptManager.PreRender is the event that I can access/ change these values.

My entire page works great, except the update panel inside the repeater does not update and I cannot access the objects within it (i,e, a label)

Sub handleTypeTest(ByVal senderAs System.Object,ByVal eAs System.EventArgs)

Try

Dim tempVAsString = ddlAnswerType.SelectedValue

ddlAnswerType.Visible =False

Dim tempUPAs UpdatePanel =Me.Parent.FindControl("upDropDowns")

IfNot tempUPIsNothingThen tempUP.Update()

Dim tempLabelAs Label =CType(Me.Parent.FindControl("lblTest"), Label)

tempLabel.Text ="changed"

Catch exAs Exception

EndTry

EndSub

Accessing the pages server controls during webmethod calback

Hi,

Tell me please, when we call a webmethod during a callback, we send parameters through the javascript and dom to the webmethod on the server, right?

What if on the server I want, not only to access parameters sent from the javascript calling function, but I also want to acccess controls of the page, like other controls that didnt request the callback, like a gridview control or asp:textbox control, controls that re located on the page but that have nothing to do with the callback call.

Thanks a lot for your help.

PageMethods are static methods and have no access to controls on the page. However the client-side callback can access the DOM.

Accessing the PageRequestManager when Page is iFramed

I have a page that has a scriptmanager, updatepanel, and timer in it. This page is iframed by another page on another domain. I'm trying to override what happens when the update panel / asynch post back has an error like so:

<scripttype="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest( endRequest );
function endRequest( sender, e ) {
if( e.get_error() ){
}
}
</script>

Per Luis' post here:http://msmvps.com/blogs/luisabreu/archive/2006/10/29/UpdatePanel_3A00_-having-fun-with-errors.aspx

This seems to work fine but when the page is iframed in i get the following javascript error:

'Sys' is undefined.

Any ideas on how to fix this?

Thanks

Hi,chris.risner

I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.

But please follow this link on the main page of thehttp://weblogs.asp.net, I see that this is well explained:

Demystifying 'Sys is undefined' :http://weblogs.asp.net/chrisri/archive/2007/02/02/demystifying-sys-is-undefined.aspx

You can also check this link for more help ifyou're using IIS7:

Resolving the "Sys is undefined" error in ASP.NET AJAX RTM under IIS 7 :http://geekswithblogs.net/lorint/archive/2007/03/28/110161.aspx

Let me know if you have further questions on this,

If this help you,don't forget mark it as a answer.Thanks!

NOTE:This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

accessing server-side objects from client

Hi wizards,

I'm writting this Ajax Extender Control to switch objects within a panel. It was supposed to work like this: you choose a data-type in a dropdown list (which is the extended object, by the way -- this.get_element()), and the content of a Panel (<div>) changes accordingly; i.e., if you choose "DateTime" in the dropdown the panel will show a Calendar, etc.

In order to perform that I have to fetch this object from server. So, my question is: how can I fetch a server-side object from client-side? How can I change its properties?

For example: an object with property Visible=false is not rendered and therefore does not appear on client; but what if I still want to set it to Visible=true? Can I grab the rendered portion of this client-code (HTML) and insert in the current page?

I'm not sure whether I made myself any clear; I'm confused, so the question may be obscure too. Let me know if you need more information.

thanks a lot in advance,

Do you know vb or C#? You will need to submit the page and do some code-behind.


rpack79:

Do you know vb or C#? You will need to submit the page and do some code-behind.

Well, yes, I think I know C# -- I'm not sure whether I know enough, though.

Sorry, I don't understand these terms; what is code-behind? What do you mean by "submit the page" -- which page?

That sounds kinda vague to me... :-|

thanks a lot for your post,



What is this web page for? Post the code you already have if any.


You may be better offtriggering a partial postback via __doPostBack(), to change the Visible property on your controls at the server.

Another option would be to style the controls with CSS to hide them. Using "display: none;" instead of the Visible property. Then, the server controls still render their HTML, but are hidden on the client. Take a look atmy post about inline label editing for an example of how to do that.


Your blog is awesome!!! I'll try the __doPostBack approach. Thanks a lot for your prompt reply and congratulations for the great work! :-)

my best regards,

Accessing server-side Datatable object from client-side javascript?

I am working on a control that generates 2D charts (line,bar,pie,etc) using VML (for now) to draw the charts client-side. I am new to Javascript and still cant figure out how to access the data I need to graph from the javascript side. I am currently using a Sys.Data.Datable on the client side as test data (building the table manually in javascript) and it works fine but I cannot figure how to pass a datatable from the server to the control extension behavior?

I have read/seen code on the forums on how to do this using a web-service but I am really looking at a more generic approach where people could just bind a datatable to the control via the properties or in code so they can use their business logic layer functionality without having to write web-services.

Let's say I have the name of the page object/variable holding the datatable (from properties of control) how would I access this object as a Sys.Data.Datatable in Javascript? Would I need to use some kind of converter?

(hope I explained myself correctly and this makes sense to someone hehe)

Thanks in Advance

Pascal

Hello Pascal:

> I am new to Javascript and still cant figure out how to access the data I need to graph from the javascript side.

Strictly speaking, you can't! It is the server-side code that renders client-side code, so what you can do is actually the reverse: write the datatable to javascript.

Here is a topic that can give some hints:http://forums.asp.net/thread/1285185.aspx

This said, please feel free to go deeper with your question if needed.

-LV


Thanks for the quick reply btw :)

Here is some example of what I am trying to do (not actual code):

Lets say I have some ASPX page code like...

<script language="VB"> Private sub Page_Load() dim myTable as System.Data.Datatable ... populate table ... End sub</script><html> <body> <atlas:ScriptManager runat="server" ID="PageScriptManager" EnablePartialRendering="True"> </atlas:ScriptManager> <asp:Panel ID="ChartPanel" runat="server" Height="300" Width="400" /> <cc1:ChartPanelExtender ID="ChartPanelExtender1" runat="server" > <cc1:ChartPanelProperties ChartTitle="This is my Graph!" TargetControlID="ChartPanel" ChartType="0" ChartHeight="100" ChartWidth="300" ChartBackColor="#FF3A00" ChartTitleFontFamily="Arial Black" ChartTitleFontSize="20" ChartTitleFontWeight="Normal" ChartTitleTextAlign="Right" /> </cc1:ChartPanelExtender> </body></html>

The ChartPanelExtender is an atlas control extender that has its functionality (chart graphing) in its ChartPanelBehavior.js javascript file. What I would like to do is access that myTable from inside the javascript behavior file? Is that possible?

Thanks in advance,

Pascal