Dropdown Extender: creation

Showing posts with label creation. Show all posts

Wednesday, March 28, 2012

Dynamic Creation of CollapsablePanels

I'd like to know how to create a CollapsablePanel in code-behind. My goal is to fetch records from a SQL 05 DB, and create a panel for each record/row in the dataset. I don't know how many rows I'll have, if any, and this means I need to do it on the back end, not in the XHTML code.

Hi,

I made the following sample according to your requirements, please try it:

<%@. 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"> protected void Page_Load(object sender, EventArgs e) { int numberOfRecordsToBeShown = 10; // this value can be determined by the number of rows in database for (int i = 0; i < numberOfRecordsToBeShown; i++) { Panel pnl = new Panel(); Label lblContent = new Label(); LinkButton lbHeader = new LinkButton(); PlaceHolder1.Controls.Add(lbHeader); PlaceHolder1.Controls.Add(pnl); pnl.Controls.Add(lblContent); lbHeader.ID = "Header" + i.ToString(); lbHeader.Text = "Header" + i.ToString(); pnl.ID = "Row" + i.ToString(); lblContent.Text = "Content to be shown"; AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender(); cpe.ID = "Extender" + i.ToString(); cpe.SuppressPostBack = true; cpe.CollapseControlID = lbHeader.ID; cpe.ExpandControlID = lbHeader.ID; cpe.TargetControlID = pnl.ID; PlaceHolder1.Controls.Add(cpe); } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> </form></body></html>

Hope this helps.

I gave it a go, but all I get is 10 lines of 'Content to be shown' on my screen. No collapsing/expanding... nothing, really, except 10 lines of text.

ok, with a few slight alterations, I wound up with this:

protected void Page_Load(object sender, EventArgs e) {
SpewOutCollapses();
}

public void SpewOutCollapses() {
int numberOfRecordsToBeShown = 5; // this value can be determined by the number of rows in database
for (int i = 0; i < numberOfRecordsToBeShown; i++) {
AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
StringBuilder sBuild = new StringBuilder();

Panel pnlContainer = new Panel();
Panel pnlHeaderGoal1Update = new Panel();
Label lblContent = new Label();
LinkButton lbHeader = new LinkButton();
PlaceHolder1.Controls.Add(lbHeader);
PlaceHolder1.Controls.Add(pnlContainer);
pnlContainer.Controls.Add(pnlHeaderGoal1Update);
pnlHeaderGoal1Update.Controls.Add(lblContent);

pnlContainer.ID = "pnlContainer" + i.ToString();
pnlContainer.Style.Add("background", "#DFDFDF");

lbHeader.ID = "Header" + i.ToString();
sBuild.Append(" <table class=\"clsOneHundredPercentWide clsBGGreyA clsCursorPointer txtWhiteBold\" style=\"height: 25px;\">");
sBuild.Append(" <tr>");
sBuild.Append(" <td class=\"clsTwoByFivePadding cls25pxHigh clsBold clsLeftAlign\" style=\"width: 15%\">ID " + i.ToString() + "</td>");
sBuild.Append(" <td class=\"clsTwoByFivePadding cls25pxHigh clsLeftAlign\" style=\"width: 85%\">(Show Details...)</td>");
sBuild.Append(" </tr>");
sBuild.Append(" </table>");
lbHeader.Text = sBuild.ToString();

pnlHeaderGoal1Update.ID = "pnlHeaderGoal1Update" + i.ToString();

lblContent.Text = "<div class=\"clsTwoByFivePadding clsLeftAlign\" style=\"padding-right: 10px;\">";
lblContent.Text += " <p>Quisque felis lacus, sodales in, commodo ut, pellentesque sed, orci. Pellentesque congue nisi sed enim. Quisque congue sodales sapien. Suspendisse et lorem ut erat dignissim vestibulum. In hac habitasse platea dictumst. Sed nisl neque, convallis eu, sagittis dignissim, molestie eu, odio. Fusce quam orci, vehicula sollicitudin, tincidunt sed, lobortis dignissim, lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed interdum tincidunt mi. Vivamus blandit molestie lectus. Praesent sem lacus, tincidunt nec, placerat ac, feugiat non, tortor. Donec eu pede in neque viverra iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer interdum augue quis risus. Pellentesque malesuada elit et eros. In ipsum. Pellentesque eget diam. Aenean quis lorem. Cras et dolor at urna pharetra nonummy. Sed posuere, risus eget suscipit lacinia, ipsum nulla adipiscing sapien, vitae aliquet lacus arcu blandit neque.</p>";
lblContent.Text += "</div>";

cpe.ID = "Extender" + i.ToString();
cpe.SuppressPostBack = true;
cpe.CollapseControlID = lbHeader.ID;
cpe.ExpandControlID = lbHeader.ID;
cpe.TargetControlID = pnlHeaderGoal1Update.ID;
PlaceHolder1.Controls.Add(cpe);
}
}

It works great, but that brings me to part 2 of my question: Is there a way to generate SUB collapsers in this... to in effect nest collapsing panels in collapsing panels. I can hard-code that, but I would love to generate it. What I want is, inside the existing panel generation, to generate a single collapsablePanel (so that each collapser has one nested collapser inside). Think that's possible?

Ok, let's forget the nesting for the moment, and think instead about something else: can you explain, possibly, why the panels start fully expanded?

Morydyn:
Ok, let's forget the nesting for the moment, and think instead about something else: can you explain, possibly, why the panels start fully expanded?

By default, the initial state is expanded. You can change it to collapsed explicitly.

cpe.ID = "Extender" + i.ToString();
cpe.Collapsed = true;
cpe.SuppressPostBack = true;

Dynamic Creation of AJAX Controls (w/Intellisense?)

Is there any way to make intellisense work for the AJAX Control Toolkit in the code behind pages? I'm trying to dynamically create controls in c#.

Thanks!

Hi Jerryp,

First , I think you should InstallAsp.Net 2.0 Ajax Extension V1.0 and then installAjax Control Toolkit. You can get them from this url: http://www.asp.net/ajax/ . If your project is an exsit which is not an Ajax-Enabled project, you canmodify the web.config and add reference to the AjaxControlToolkit.dll.

By the way, Javascript intellisense is support by VS2008.

Hope this help.

Best regards,

Jonathan

Thanks for your respnose! I already have all those things installed. I guess I should have given more background. I am trying to create the controls in my c# page_load method. When I dynamically create the controls Intellisense doesn't work, so I've been using Reflector to see what methods are available on the different classes. It doesn't really get annoying until you have to drill down through the class hierarchy to find out what a property is called. My code compiles and runs, but it's difficult to develop with the AJAX Control Toolkit if intellisense doesn't work. I would like to know how to get the intellisense for the control toolkit to work.

Thanks,

Jerry

Dynamic Control creation not persisting through PostBack

Hey guys,

I've done some searching on dynamic control creation in the forums, but none of them take me to an Atlas page. I'm trying to build a HR Notification form with some simple Atlas UpdatePanels. Basically, I want to dynamically add Labels and TextBoxes to this form. For instance, if you select 3 from the Number of Children DDL, I want 3 child forms to be created under it. I've been able to create the forms (at least theoretically, I just create "test" Labels right now). The problem I'm running into is being able to read from these dynamically created Controls.

When I submit the form as a regular PostBack, all of my created labels seem to be lost. I get null exceptions when I try to use FindControl. Here are some code snippets:

protected void ddlNumChildren_SelectedIndexChanged(object sender, EventArgs e) {int runNum = Convert.ToInt32(ddlNumChildren.SelectedValue.ToString());int count = 0;while (count < runNum) { Label text=new Label(); text.ID ="testLabel" + count; text.Text ="test"; phNumChildren.Controls.Add(text); count++; } }protected void btnSubmit_Click(object sender, EventArgs e) {int runNum = Convert.ToInt32(ddlNumChildren.SelectedValue.ToString());int count = 0;while (count < runNum) { Label lbltest = phNumChildren.FindControl("testLabel" + count)as Label; Response.Write(lbltest.Text); } }

I'm assuming I have to save this data before the postback, but I need a little help in how I can do this. Thanks for your time and any help you can provide.

The problem is that the controls do not exist when the page is recreated during postback. You have two options :
1) Recreate the page during the Init() event if you have atlas UpdatePanels or Page_Load() if not
2) try http://www.denisbauer.com/ASPNETControls.aspx
3) Write your own code to save all controls in ViewState and reload them during the Init() event

Dynamic Control creation and viewstate management (client to server)

Hi all,

I am new to AJAX and this is my first port.

In my requirement i need to create set of dynamic controls (multiple instances of a custom webcontrol) to do this i am following the below steps.

rendering dynamic controls and its viewstate is working fine.

I am facing problem here.

I have some business logic in which the if the user selects "Yes" as the option in a RadioButtonList i am disabling few controls in the dynamically rendered sets at clientside. How to I get the controls state in the CreateChildControl method to see what was the control state using the hidden field as i am not able to get the form Posted values at this time. (Note: I know that we can use the UniqueID of the hidden field, but this will not work here as the unique id will be still the control ID unique id will be different when it renders.

So i want to know how to manage the viewstate from client and server in this scenario?

I tried to put in words as simple as possible.

Thanks for the help

- Satish

Missed to add this

When user clicks on "Yes" radio button i am saving the control id in the hidden field where in server side i can see the value in the hidden field at the server side and load the control state (either enabled or disabled). i am having problem here on how to retain the control state from clientside to the server side when it renders.

Thanks

Satish

Monday, March 26, 2012

dyanamic creation of toolkit controls?

Hi,

Can we create ajax controls dynamically i.e. in javascript? For example, I wish to create a tab control dynamically? Can we do that?

--jon

You can definitely create your AJAX controls/behaviors using the $create() statements (most likely called/hooked-up from the application init function). You should create a few Ajax controls declaratively in the page and then view the source it outputs to get an idea of the syntax needed.