Dynamic control creation.

[sameer]

Hi All,

Environment: ASP.Net , framework 1.1, VS2003. Database: Sql server 2000
I created a webcontrol( ascx) with all server side controls and the controsl
are Submit button, Dropdown and a placeHolder in which dynamic CheckBoxes are
created depending on the option the user has selected in the Dropdown. the
AutoPostBack property of the dropdown is set to True.

I then take this control and throw it in my webpage and boom all works
perfect, the dropdown is loaded and the checkboxes are loaded dynamically
from the value selected in the dropdown. but their is a problem.

The dynamic creation of my controls; depends on the value of the dropdown
control( whose AutoPostBack Property is set to true). To make dynamic
controls persist state so that i can check their values when the user hits on
Submit button they have to be created in the INIT event of the webcontrol but
when i try dong this in this event i dont see the SelectedValue of the
dropdown which caused this postback and so my controls are not being
created(The dropdown is like new with out even any databind in this event).
how can i resolve this problem?
I can do all this in the Dropdown;s selectedindexchanged event( or what
ever is the right event) where i can see the new value user has selected but
the dynamic controls will not persist state and i will not be able to check
their values when the user hits on submit. Please suggest a way to check the
dropdown and create the dynamic controls so that i can see their values when
the user hits on submit.

Thanks in Advance
Sameer

 

[Phillip Williams]

Hello Sameer,

The strategy that I would recommend in this scenario is to separate the code
that initializes the controls (that you currently create dynamically) from
the code that populate those controls with the data (upon handling the
selectedIndexChanged of your dropdownlist). To illustrate the concept, look
at this simple demo:
http://www.societopia.net/samples/dynamiccontrols_viewstate.aspx

The dropdownlists in the first row are placed first declaratively, then upon
the selectedindexchanged event of the first dropdownlist the values are
populated. (Or I could have made some them visible or invisible)

Whereas the second row in the demo recreates the problem that you described.

You can either place the control’s initialization in the codebehind or by
placing its markup on the page (which does the same thing during the
page.init).

 

[sameer]

Philip, got you.

1. so in short u mean that their is no way control's value can be accessed
like any other server control unless it is created in the page
initialization event, right? Please confirm.

2. So if this is a true statement and after reading your email gives me the
idea that i shoudl create all the possible controls that might be required in
the inilization event of the page and then dependnig on if i need them or not
i can try removing the control from the place holder in the combo's
selectedindexchanged event. Please confirm.

3. their's another suggestion that i want from you. These dynamic controls
are going to be all check boxes and depending on which options the user has
selects i want to increments a count and i would want all this to be done on
the client side in java script. Lets say i write the function in javascript
CountAll() , how can i make these checkboxes call this menthod evertime the
user clicks on them. thank for your help till now.

Sameer

 

[Phillip Williams]

Hello Sameer:

For the first and second points in your post, you are correct. However, to
state it more accurately, any control created dynamically has to be
re-created upon each postback in the initialization phase of the page.

If you happen to create a control while responding to a SelectedIndexChanged
event, you have to re-create it again during the page initialization in order
for its ViewState to be restored. For a more detailed explanation read this
article from the MSDN:
http://msdn.microsoft.com/library/d...ingcontrolstowebformspageprogrammatically.asp

Regarding your third point, although you can create checkboxes using
javascript based on the user selection, there is a better way in ASP.NET.

Based on your description below, I understood that you have a dropdownlist
whose SelectedValue will decide on the number of checkboxes to be added to a
placeholder. If you were to add to your HTML markup the following:

<aspataList ID="DataList1" Runat="server" RepeatLayout="Table">
<ItemTemplate>
<asp:CheckBox ID="chkBuy" Text="Buy"
Runat="server"></asp:CheckBox>
<asp:CheckBox ID="chkSell" Text="Sell"
Runat="server"></asp:CheckBox>
<asp:Label ID="lblDesc" Runat="server"
Text='<%#Container.DataItem%>'>
</asp:Label>
</ItemTemplate>
</aspataList>
<aspropDownList ID="dropdownlist1" Runat="server" AutoPostBack="True">
<asp:ListItem Value="1">One row</asp:ListItem>
<asp:ListItem Value="2">Two rows</asp:ListItem>
<asp:ListItem Value="3">Three rows</asp:ListItem>
</aspropDownList>
<asp:Button ID="btnSubmit" Runat="server" Text="Submit"></asp:Button>

Then in responding to the dropdownlist's selectedIndexChanged event you
would write something like this:

Private Sub dropdownlist1_SelectedIndexChanged(ByVal sender As
System.Object, ByVal e As System.EventArgs) Handles
dropdownlist1.SelectedIndexChanged
Dim DisplayedRows(dropdownlist1.SelectedValue - 1) As String
Dim i As Integer
For i = 0 To dropdownlist1.SelectedValue - 1
DisplayedRows(i) = "item " & i + 1
Next
DataList1.DataSource = DisplayedRows
DataList1.DataBind()

End Sub

Then you would have been able to preserve their ViewState because you
created them within a templated control that was already created during the
page's initialization. Thereby you can access their values and respond to
the events that their raise (by consuming the DataList1.ItemCommand). For
example you can check the values of those dynamically created controls as
follows:

Private Sub btnSubmit_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles btnSubmit.Click, DataList1.ItemCommand
Dim dlItem As DataListItem
For Each dlItem In DataList1.Items
Dim lblDesc As Label = dlItem.FindControl("lblDesc")
Dim chkBuy As CheckBox = dlItem.FindControl("chkBuy")
If Not chkBuy Is Nothing AndAlso chkBuy.Checked Then
Response.Write("You selected to buy " & lblDesc.Text &
"<br/>")
End If
Dim chkSell As CheckBox = dlItem.FindControl("chkSell")
If Not chkSell Is Nothing AndAlso chkSell.Checked Then
Response.Write("You selected to sell " & lblDesc.Text &
"<br/>")
End If
Next
End Sub

 

[Phillip Williams]

Just a correction, remove handling of the DataList1.ItemCommand from the
btnSubmit_click method code below.

 

[sameer]

Philips , thanks for your help, got all the info i was looking for on the
first two question. But on the third one i was looking for something else, i
think i was not able to type it out right. here it is again.
Once i have created these checkboxes dynamically then what i have on the
screen is
1. the drop down
2. lets say 3 dynamically created checkboxes
3. a server lable ( not created dynamically)
3. and a submit button ( server button)

User selects an entry from the drop down which posts back to the server and
lets just say( forgetting previous discussoin on dynamically created
controls) recreates the 3 checkboxes. Now lets say a checked checkboxes has
got a point each i.e value of 1 also they dont post back. Now when the user
selects this checkbox, i want to increament the label with a value of 1 for
each check box the user selects and none of this is posting abck to the
server. I want to write this functionality on the client side in javascript
but do not know how to do it for dynamical controls i.e how shodl i link the
client side event that is fired when the user selects a checkbox and call my
client side javascript function which woudl update the value in the label,
all this happening on the client side.
u been very helpful.
thanks in advance.
Sameer

 

[Phillip Williams]

Using JavaScript you can use the onclick event like this:
onclick="if(this.checked==true)NoOfBuys++;else NoOfBuys--;alert('the number
of checked Buy CheckBoxes is ' + NoOfBuys); "

http://www.societopia.net/samples/dynamiccontrols_viewstate.aspx

I updated the demo to include that javascript, you can get the complete
source code from the links at the bottom of the demo.

 

[sameer]

Phillip , thanks a lot for your help, it will do the job perfect.

thanks
sameer

 

[sameer]

Philip, i jumped into another problem here. Everthing was supposed to be nice
and easy for updating the value of a serverside label on the client side in
javascript just as you had mentioned( happens in the client side onclick even
of a check box that the value of the label is updated), but when i wrote my
javascript on the checkboxes to update the value of this label, it did not do
it. When i looked in the source code i found out that the server side label
was being converted into a SPAN html tag and not a label, the htm text from
the file for this control is

<td align="left" height="16"><span id="_OrderInfo1_lblordertotal"
class="NormalBold">$5.00</span></td>

Now since it is being converted into a SPAN tag in javascript and not an
html label , my javascript can not find it, how can i force ASP.NET to render
this label as an Input type controls label and not SPAN, hope i made myself
pretty clear.

thanks
Sameer