We Keep Coding

How to create a limited number of pre-configured DropDownList and Textbox

I'm trying to create in a repeater a DropDownList and a TextBox for simulating a typical question list
My question is, how can I create 5 rows in my repeater with this dropdownlists and textboxes
Q: DropDownList1
A: TextBox1
Q: DropDownList2
A: TextBox2
Q: DropDownList3
A: TextBox3
Q: DropDownList4
A: TextBox4
Q: DropDownList5
A: TextBox5
Another day we could change the number of questions to 3, so my repeater should bind 3 Q-A
How can I do this dynamically.
I create the structure like this... but I don't know how to begin the Load event in order to render as I said before.
<asp:Repeater ID="repeater1" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:DropDownList ID="ddlQuestion" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtAnswer" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

Easiest way might be to encapsulate those low-order controls in a higher order control (namely an ASCX) and then add that to the placeholder in a loop. This way you get the benefit of being able to easily change the ASCX without repercussions on the outer looping code.
Edit: "adding" means creating the controls and then attaching them as children.

How do I create new controls inserted into newly generated HTML on runtime?

I am still rather new to ASP.NET, but I find myself stuck on a problem that shouldn't be too much of a problem..
Right now I have a page that holds this div:
<div id="EditSurveySetID" class="EditSurveySet" runat="server">
<div class="cell">
<div class="cell_title">Survey Set(s)</div>
<table id="surveySetTableData" runat="server" style="margin: 10px;">
<tbody>
<tr>
<td class="form_labelSurveySet" style="width: 330px;">
<input type="button" value="-"> Survey Set 1:
<input id="EditSurveySetTitle" runat="server" style="width: 200px;" value="Netherlands">
</td>
<td>
<asp:DropDownList ID="DDLSurveySetSurveys" runat="server">
</asp:DropDownList>
<asp:Button ID="addAdditionalDDLColumns" runat="server" Text="+" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Which looks like this:
I want a user to press the + button (addAdditionalDDLColumns). Upon pressing that button, I want a new table row to appear with the same controls in it, so that on runtime, it would look like this at that point:
<div id="EditSurveySetID" class="EditSurveySet" runat="server">
<div class="cell">
<div class="cell_title">Survey Set(s)</div>
<table id="surveySetTableData" runat="server" style="margin: 10px;">
<tbody>
<tr>
<td class="form_labelSurveySet" style="width: 330px;">
<input type="button" value="-"> Survey Set 1:
<input id="EditSurveySetTitle" runat="server" style="width: 200px;" value="Netherlands">
</td>
<td>
<asp:DropDownList ID="DDLSurveySetSurveys" runat="server">
</asp:DropDownList>
<asp:Button ID="addAdditionalDDLColumns" runat="server" Text="+" />
</td>
</tr>
<tr>
<td class="form_labelSurveySet" style="width: 330px;">
<input type="button" value="-"> Survey Set 2:
<input id="Text1" runat="server" style="width: 200px;" value="Netherlands">
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="+" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Or in image:
So the way I see, some new HTML code is generated on the + button click event, along with some controls (dropdownlist, another + button with the same functionality(?), possibly a textfield instead of input field).
Questions that come to mind right now:
How do I generate the HTML code that would create a new table row
How do I control where this generated HTML code is added (in this case, it should be under the existing
[Vague/Abstract question] Ultimately a user could possibly have 1 to infinite 'survey sets'. If a user were to have created 4 survey sets, he would eventually press a save button or something alike. Upon pressing this button I would save the 4 selectedvalues of the 4 dropdownlists belonging to the 4 survey sets. How would I call each individual dropdownlist in order to get the data? What I'm actually asking, I think, is whether it's possible to assign an ID programmatically upon the auto generated dropdownlist creation of my previous two questions.
How do I do this? Any advise and tips are very welcome!!

You could use and UpdatePanel and dynamically add new asp controls in the code-behind.
This could be expensive however, because it means your application would be going back to the server every time the user clicks the "Add" button, however I'm not sure how you'd achieve this strictly on the client-side. But there is nothing stopping you creating new controls on the fly on the server-side using asp.net.
If you want to surround the new controls with custom HTML, you could use a PlaceHolder component and replace it with raw text (your HTML) during the callback.

I would suggest you use a GridView.
It provides an option to add rows. It provides a Rows collections, so you can get the data bound to each row.
Here are some examples to get you started.
Dynamically creating, adding and maintaining controls would involve some effort. You would need a PlaceHolder and have to add controls to that. You would have to assign unique ids to each one of them, and use those to retrive the values. This must be done on each PostBack.
Try this when you don't feel you are rather new to asp.net.

protected void Button1_Click(object sender, EventArgs e)
{
HtmlTableRow tr = new HtmlTableRow();
HtmlTableCell td = new HtmlTableCell();
Button btn=new Button();
btn.Text="gdfgd"; /* here u can create ur contol and add it in cell*/
td.Controls.Add(btn); /*add controls to colum*/
tr.Cells.Add(td); /*add column to row*/
surveySetTableData.Rows.Add(tr); /*ad row to table*/
}
instead of using this i would also recommend u to use gridview like nunespaqscal bcz dataretrival become very easy....in gridview

The server tag is not well formed.(databinder.eval)

I am trying to working the following code.
<asp:DataGrid ID="Grid" runat="server" DataKeyField="KeyID" CssClass="grid"
...
<asp:CheckBox runat="server" ID="checkBox-<%#DataBinder.Eval(Container.DataItem,"KeyID")%>" AutoPostBack="false"></asp:CheckBox>
When I run the code,I have got the below error:
Error 25 The server tag is not well formed.
Note : This is working without runat="server".
What is the remedy for this problem ?

You don't need to set the ID of the CheckBox to do what you want to do (change the background color). Your CheckBox should look like this (I added the KeyID as the text value if you want to display it... or you can just remove that if you only want the checkbox):
<asp:CheckBox runat="server" ID="checkbox" Text='<%# Eval("KeyID") %>' AutoPostBack="false"></asp:CheckBox>
Now your checkbox will render something like this:
<input id="MainContent_Grid_checkbox_0" type="checkbox" name="ctl00$MainContent$Grid$ctl02$checkbox" /><label for="MainContent_Grid_checkbox_0">Value of KeyID</label>
Since all the names end with "checkbox", you can apply a function on the change event for those elements whose name ends with "checkbox". You didn't specify that this was a JavaScript question or if you are using jQuery... this answer uses jQuery:
<script>
$('input[name$="checkbox"]').change(function () {
if ($(this).is(':checked')) {
$(this).parent().css('background-color', 'yellow');
}
else {
$(this).parent().css('background-color', 'white');
}
});
</script>
That will determine if the checkbox is checked, and if so it will set the background-color of its parent (the <td> that it is in, inside the DataGrid rendered HTML), depending on the value.
Likewise, you can go up to the next parent() and highlight the entire row.
Resources:
jQuery Selectors
OnCheckedChanged -- an event that you would process in the code behind, not in JavaScript.

How can I use the ScrollTo jQuery plugin to scroll to particular row in a repeater in ASP.NET?

I have a simple repeater that looks like:
<asp:Repeater runat="server" ID="rptOptions" OnItemDataBound="rptOptions_ItemDataBound">
<HeaderTemplate>
<thead>
<tr>
<td class="GridHeader">Account</td>
<td class="GridHeader">Margin</td>
<td class="GridHeader">Symbol</td>
<td class="GridHeader">Usymbol</td>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr runat="server" ID="trOption">
<td class="GridRow"><asp:Label runat="server" ID="lblOptionAccount"></asp:Label></td>
<td class="GridRow"><asp:Label runat="server" ID="lblOptionMargin"></asp:Label></td>
<td class="GridRow"><asp:Label runat="server" ID="lblOptionSymbol"></asp:Label></td>
<td class="GridRow"><asp:Label runat="server" ID="lblOptionUsymbol"></asp:Label></td>
</tr>
</tbody>
</ItemTemplate>
</asp:Repeater>
Now, in my code-behind I have an event which is fired that is supposed to add/insert a row into the database. After this happens, I re-grab the new list of options from the database and re-bind them to the repeater. This takes place inside an update panel so the list refreshes right away for the user.
protected void lbtnAddOptionSave_Click(object sender, EventArgs e)
{
SelectedOption = new Option()
{
Account = txtAddOptionAccountNumber.Text,
Margin = chkAddOptionMargin.Checked,
Symbol = txtAddOptionSymbol.Text,
Usymbol = txtAddOptionUsymbol.Text,
};
Presenter.OnAddOption(); // Insert new option into database
RefreshOptions(); // Re-get list of options, bind them to repeater
}
Now, what I would ~love~ to do, is use the jQuery ScrollTo plugin to scroll straight to the newly added row.
What would be the best way to call the ScrollTo() method in the jQuery plugin so I scroll to that particular row that was just added? Is there anyway I can mark my rows in my ItemTemplate so I can easily select an element to scroll to via jQuery?
Ideally, right after RefreshOptions() I would like to execute the ScrollTo function to scroll down to the new row.

If you know the client side Id of the row (which you can get), its relatively painless to simply call
$(document).scrollTo("#<row-id-here>", 800);

When you add the object to the database (or just after that), grab the id of the newly inserted object. Modify the repeater to include a Label with Visible="false" so that it doesn't get rendered to the client. Hook into the ItemDataBound event and check each label against the id you've grabbed. When you find the matching row, you can get the id of the row and then you'll be able to use for the scrolling parameter.
Note: Other data-bound controls have a DataKey property which could be used for the id of the object and make this a bit simpler. Not sure if you're tied to the Repeater at this point, but a GridView or ListView could be worth looking into.

ASP.net ListView Access controls in ItemUpdating event

I'm missing something here...
I need to access the values of the controls on the item that is leaving editmode, thus firing ItemUpdating.
I found how to get the key value so I know which record in the database I have to update. The problem is that I can't seem to access the values of the controls on the editing row.
the EditTemplate contains a few checkboxes, a dropdown and textbox. I need to access these values so I can update the record.
When looking at the eventargs, nothing shows.
I think I'm overlooking something crucial here, any help would be handy.

You can also use "ListView.EditItem.FindControl("X")" to access control directly.
Protected Sub ListView_ItemUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewUpdateEventArgs) Handles ListView.ItemUpdating
Dim DropDownListddl As DropDownList = ListView.EditItem.FindControl("DropDownListddl")
Lblwarning.Text = DropDownListddl.SelectedValue
End Sub

There are two ways I can think to do this.
The first way would be to use a datasource that supports an update command and using two way binding to up date the values. The following snipped uses two way binding to populate the name and student fields and it will also update them for you.
<EditItemTemplate>
<tr style="background-color: #FFCC66;color: #000080;">
<td>
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
</td>
<td>
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
</td>
<td>
<asp:TextBox ID="studentTextBox" runat="server" Text='<%# Bind("student") %>' />
</td>
</tr>
</EditItemTemplate>
If you are not using a datasource that supports this you can do one other thing.
Notice how the update button has a command called "Update". You can use this to fetch the control values you want by handling the list views ItemCommand Event.
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "Update")
{
TextBox box = (TextBox)e.Item.FindControl("nameTextBox");
string name = box.Text;
}
}
You can find any control in the editied item by simply calling find control and passing it the control's ID, and don't forget the cast.
Hope this helps