Ajax error: panels

Showing posts with label panels. Show all posts

Wednesday, March 28, 2012

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.

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>

</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 controls within an Accordion for UpdatePanel triggers

HI All,

I have an accordion control, which contains a treeview control in one of its panels. I would like to use some of the events for that treeview control as a trigger for an update panel on the same page. Works fine without the Accordion, but when I use the Accordion, I receive an error notifying me that the treeview doesnt exist (I assume because the Accordion control hides it from the source engine).

Any thoughts on how to get around this?

Thanks

Rob

Hey,

I find that I run into this alot. Basically when you have a template control, then the child controls aren't directly accessible from the code behind. Instead you need to get the parent control and call parent.FindControl("name"). Then use this instance to make changes. If this doesn't work or make sense, post an example.

Monday, March 26, 2012

Accessing ASP.NET Profile

Hi,

How can I update Profile propertys in my Atlas application? Since I don't use update panels, I call web services to make server requests. I know that I can access the Session by declaring [WebMethod(EnableSession=true)], but can I also enable Profiles there?

Or are there alternatives to web services?

In javascript, you access profile properties using something like:

Sys.Profile.properties["list"] = [1, 2, 3];

And then you want to call:

Sys.Profile.save();

To enable this feature, you do need to have a few things in config defined:

<microsoft.web>
<profileService enabled="true" getProperties="*" setProperties="*" />
</microsoft.web>

This will enable atlas access to the Profile object, and let you get and set all properties, note you can lock down which propeties you want get/settable thru atlas using the get/setProperties in the profileService section.

Hope that helps,
-Hao

Thank's a lot. After your reply I searched the atlas docs again and now I have no clue, why I overlooked the profile topic before! Wink [;)]

This feature is so cool! Cool [cool] I love Atlas more everyday...

Wednesday, March 28, 2012

Accordian - Dynamic addition/subtraction of panels?

Accessing values from dynamically created controls

Accessing controls within an Accordion for UpdatePanel triggers

Monday, March 26, 2012

Accessing ASP.NET Profile

Ajax error

Blog Archive

About Me