Dynamically created Labels and TextBoxes are unable to be positioned - asp.net

Question

I am building a dynamically created popup window that contains a dynamically created grid and controls (Labels and TextBoxes).
The grid part is working correctly, and not an issue. However, the controls are giving me issues.
The idea is to create a Label and a TextBox for each of the columns in the Grid. I am able to create them fine, but am unable to position them at all. label.Location, label.Top, label.point, etc. return an error saying that it is not part of Label. The same thing happens with the TextBox.
When they do display, they appear in a horizontal row with the TextBox overlapping the Label unless the width is set sufficiently large enough (which of course leave a bunch of empty space).
I would like the to be vertically aligned with the TextBox immediately after the Label.
Something like:
labelText: TextBox
These controls are being added into an asp:Panel (pnlFields)
For Each col As DataColumn In dataTable.Columns
Dim label As New Label()
label.Text = col.ColumnName & ": "
label.Height = 24
label.Width = label.Text.Length()
pnlFields.Controls.Add(label)
Dim textBox As New TextBox()
textBox.Height = 24
textBox.Width = 100
pnlFields.Controls.Add(textBox)
Next
I would like to try to have the Label width be as long as the text it contains instead of static, that way I would (hopefully) be able to set the TextBox location to be right after the Label.
In any event, I can't seem to specify a position at all in order to do this.
Any ideas?
Thanks!
Edit: Markup
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Panel runat="server" ID="pnlFields" CssClass="FormStyle" Height="600px" />
<asp:Panel runat="server" ID="pnlFinder" CssClass="FormStyle">
<telerik:RadGrid ID="batchRecords" runat="server" Skin="Windows7" ShowHeader="true" AutoGenerateColumns="true" Width="600px" AutoPostBack="true">
<MasterTableView CommandItemDisplay="Bottom" AllowPaging="true">
<CommandItemSettings ShowAddNewRecordButton="false" />
<Columns>
<telerik:GridButtonColumn UniqueName="selectRecord" HeaderText="Edit" CommandName="Select" Text="Edit Record" ButtonType="ImageButton" ImageUrl="~/images/icons/pencil.png">
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</asp:Panel>
</asp:Content>

Answer 1

I really, but really don't see the need for creating those text boxes. there is a LARGE number of built in repeating controls. If you create those controls on the fly, then you can NOT wire up the code behind events - so you quite much give up the WHOLE reason for using asp.net and ALL of those great built in controls.
I see no reason why you can inject and include some extra "divs" and apply style to those divs. But, before you go down that road?
You should attempt to make a VERY STRONG case as to why you going down this road as opposed to using a listview, gridview, or a repeater control. They are designed for repeating data over and over - and do so WITH VERY LITTLE code and VERY LITTLE markup.
and where does the data come from that going to fill out these controls? Or even the reverse - where is the reulsts of the controls going to be placed? You see, by using say a repeater or whatever? They are data bound. So, a person can say add 2 or 15 rows of data, and then in ONE sql update operations you can write out ALL of that data! - in other words, you are repeating some controls - but based on what and how is the big question here?
And as noted, if you create + inject such controls, then you can't have nor wire up events for these controls. So, think very long and hard as to the final goal here. You might fix the layout issues, but then your next issue/problem will be event code, and then after that, will be the complex code required to take that input and somehow push it back out to some database. As a result, I really don't recommend this road.
Further more, using one of those built in "repeating" objects allows you with relative ease to enable editing of that data on screen, and as noted, writing back one row, or 15 rows of data can be done with the same code - and with far greater ease then trying to inject dynamic controls into that form. Furthermore, what "id" are you going to use for referencing those controls and once you managed to inject these controls?
The end goal here is the key concept.
I find that gridview is nice - often less mark up. However WHEN you start to have say 3 or more custom controls in that grid? Then I like listview over that of gridview (because listview allows you to drap + drop and use standard asp.net controls WITHOUT having to put that control inside of a template block. But, your case? Only two extra controls for each row of the grid? then sure, stick with grid view.
So, to add those two extra columns to that grid? You can do this:
First, I will use the wizard to create this gridview. I THEN blow out the data sourceID setting and also chop out the datasource control on the form.
So, I count less then 1 minute - drop gridview. Click on the configure data source from the form. This one:
So I configure the data source, generate the gv, AND THEN remove the data source ID and also remove the data source control from the markup. So, it takes 30 seconds of time, and I wind up with this grid:
So, we get this:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
</Columns>
</asp:GridView>
And the code to load this grid up is this:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack = False Then
LoadGrid()
End If
End Sub
Sub LoadGrid()
Using cmdSQL As New SqlCommand("SELECT ID, FirstName, LastName, HotelName, City from tblHotels",
New SqlConnection(My.Settings.TEST3))
cmdSQL.Connection.Open()
GridView1.DataSource = cmdSQL.ExecuteReader
GridView1.DataBind()
End Using
End Sub
And now we have this:
Ok, not bad for less time then it took me to WRITE this post!!!
And note how we only up to about what - 3 lines of code to load up the grid?
Super easy.
Ok, so now lets add a label, and a text box to the grid.
Well, just do this for the gv template:
So, note how we just added two extra columns. The markup is like this:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:TemplateField HeaderText = "My label">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "My Text Box">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now, when we run the above, we get this:
I mean was that easy or what? And I could have placed that lable + text box in the SAME TEMPLATE column. So you quite much free to add those extra columns to that grid, and we did not have to write code - and in fact it was VERY easy, and the result is we now have that extra two columns - and achieve this WITH GREAT ease.
And we can also with relative ease set/change the values of the label and text box - even based on other colum data from that row, and can do that again with great ease.
So, at the end of the day? I don't suggest you try and manual add two columns when we have such a great approach as outlined above. and even better, is the values the user types into each row and text box can via code be pulled and refreenced from that gv - and done so with great ease for 2 rows, or 20 rows of data.
Edit:
Since the controls and addtions to the gv are to be at run time (dynamic), then you STILL WANT to use the gv object model - fighting against that model is a REALLY bad idea - go with the flow.
So, you can add extra bound field columns to the gv this way:
Sub LoadGrid()
Using cmdSQL As New SqlCommand("SELECT ID, FirstName, LastName, HotelName, City from tblHotels",
New SqlConnection(My.Settings.TEST3))
cmdSQL.Connection.Open()
GridView1.DataSource = cmdSQL.ExecuteReader
AddColumns()
GridView1.DataBind()
End Using
End Sub
Sub AddColumns()
Dim lblfield As New BoundField()
lblfield.HeaderText = "Label1"
GridView1.Columns.Add(lblfield)
Dim txtfield As New BoundField()
txtfield.HeaderText = "TextBox"
GridView1.Columns.Add(txtfield)
End Sub
And then on item bound event, you can also then inject the controls of your choosing like this:
Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim MyLabel As New Label
MyLabel.ID = "Label1"
MyLabel.Text = "Label Text"
e.Row.Cells(5).Controls.Add(MyLabel)
Dim MyTextBox As New TextBox
MyTextBox.ID = "Textbox1"
MyTextBox.Text = "Text box value"
e.Row.Cells(6).Controls.Add(MyTextBox)
End If
End Sub
so, now with this simple markup:
<link href="Content/cuscosky.css" rel="stylesheet" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
</Columns>
</asp:GridView>
So, with above code? We get the SAME results, and this output:

Answer 2

Edit:
I solved this by creating an HTML Table in the markup, then programmatically adding Rows and Cells with controls (Labels and TextBoxes) and unique IDs. I was then able to find and populate those controls with the correct data.
Worked MUCH easier than trying to manually position each control.
I was able to solve the issue of positioning the controls.
I needed to use label.Style.Add() and put in the values needeed.
It seems to be working correctly now.
Thanks!