Adding new rows to HTML table dynamically : The Official Microsoft ASP.NET Forums

Reply

sreejith77

Participant

925 Points

254 Posts

Adding new rows to HTML table dynamically

Mar 16, 2007 05:46 AM|LINK

Hi,

I have a problem. What i need is to increase the rows and columns of an HTML table on postback. ie, dynamically increase a HTML table and want to add a new dynamically generated web server textbox to the new cell created. What to do?

Sreejith

Sreejith
http://tips4dotnet.blogspot.com/

Moved by SomeNewKid on Mar 16, 2007 06:00 AM

Reply

mokeefe

Star

10850 Points

2098 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 06:07 AM|LINK

language?

Rgds,
Martin.

For the benefit of all users please mark any post answers as appropriate.

Reply

sreejith77

Participant

925 Points

254 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 07:07 AM|LINK

Hi,

Using VB.NET i have to create an extra row to an existing HTML table and a dynamic text box to its cell

Sreejith

Sreejith
http://tips4dotnet.blogspot.com/

Reply

hannous

Member

203 Points

56 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 08:02 AM|LINK

I suggest you use Table object instead of the HTML table. It will solve your problem.

<asp:Table ID="YourTable" runat="server" CellPadding="0" CellSpacing="0">
</asp:Table>

And then you can add from your code rows and elements dynamically.

Dim FirstRow As New TableRow
Dim FirstCell As New TableCell
Dim YourTextBox As New TextBox
FirstCell.Controls.Add(YourTextBox)
FirstRow.Cells.Add(FirstCell)
YourTable.Rows.Add(FirstRow)

Hassan Annous

Marked as answer by Raymond Wen - MSFT on Mar 16, 2007 08:17 AM

Reply

hannous

Member

203 Points

56 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 08:03 AM|LINK

I suggest you use Table object instead of the HTML table. It will solve your problem.

<asp:Table ID="YourTable" runat="server" CellPadding="0" CellSpacing="0">
</asp:Table>

And then you can add from your code rows and elements dynamically.

Dim FirstRow As New TableRow
Dim FirstCell As New TableCell
Dim YourTextBox As New TextBox
FirstCell.Controls.Add(YourTextBox)
FirstRow.Cells.Add(FirstCell)
YourTable.Rows.Add(FirstRow)

Hassan Annous

Reply

hannous

Member

203 Points

56 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 08:05 AM|LINK

I suggest you use Table object instead of the HTML table. It will solve your problem.

<asp:Table ID="YourTable" runat="server" CellPadding="0" CellSpacing="0">
</asp:Table>

And then you can add from your code rows and elements dynamically.

Dim FirstRow As New TableRow
Dim FirstCell As New TableCell
Dim YourTextBox As New TextBox
FirstCell.Controls.Add(YourTextBox)
FirstRow.Cells.Add(FirstCell)
YourTable.Rows.Add(FirstRow)

Hassan Annous

Reply

hannous

Member

203 Points

56 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 08:09 AM|LINK

I'm sorry for the duplicate posts but there appears to be a problem with the 'Post' button or my browser.

Hassan Annous

Reply

mokeefe

Star

10850 Points

2098 Posts

Re: Adding new rows to HTML table dynamically

Mar 16, 2007 10:04 AM|LINK

Dynamic Controls opens a world of issues. The following example shows you how to add dynamic additional rows to an existing Table.

Note that as per the code comments Control IDs that follow the naming convention TBTextBoxControlNumber are reserved for dynamic textboxes in dynamic TableRows.

This is stand alone and to recreate you should create an ASPX page called dynamicRows.aspx (with code in separate file) and the replace all ASPX code and code behind with the examples below.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="dynamicRows.aspx.vb" Inherits="ForumsStuff_dynamicRows" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border-right: #d3d3d3 1px solid; border-top: #d3d3d3 1px solid; left: 100px; border-left: #d3d3d3 1px solid; width: 400px; border-bottom: #d3d3d3 1px solid; position: absolute; top: 25px; padding-right: 25px; padding-left: 25px; padding-bottom: 25px; padding-top: 25px;">
    <div id="comment" runat="server" style="margin-top: 12px; margin-bottom: 12px; padding-bottom: 12px; padding-top: 12px; border-bottom: #cc0033 1px solid; height: 50px;"></div>
    <asp:Table runat="server" ID="Table1">
    <asp:TableRow runat="server" ID="anyIDRow1">
    <asp:TableCell runat="server" ID="anyID1" Visible="false"></asp:TableCell>
    <asp:TableCell runat="server" ID="anyID2">Item 1</asp:TableCell>
    <asp:TableCell runat="server" ID="anyID3"><asp:TextBox runat="server" ID="TBTextBox1"></asp:TextBox></asp:TableCell>
    </asp:TableRow>
    <asp:TableRow runat="server" ID="anyIDRow2">
    <asp:TableCell runat="server" ID="anyID4" Visible="false"></asp:TableCell>
    <asp:TableCell runat="server" ID="anyID5">Item 2</asp:TableCell>
    <asp:TableCell runat="server" ID="anyID6"><asp:TextBox runat="server" ID="TBTextBox2"></asp:TextBox></asp:TableCell>
    </asp:TableRow>
    </asp:Table>
    <div style="border-top: #cc0033 1px solid; width: 100%; color: #d1841a; margin-top: 12px; padding-top: 12px;">
        <asp:Button ID="Button1" runat="server" Text="Add Row" />
        <asp:Button ID="Button2" runat="server" Text="Submit" />
    </div>
    </div>
    </form>
</body>
</html>

Code behind -

Partial Class ForumsStuff_dynamicRows
    Inherits System.Web.UI.Page

    Private _additionalRowCount As Integer = 0
    Private _previousTexBoxID As Integer = -1 ' required initial value

    Private targetTable As Table = Nothing 'assigned in PreInit

    Private ReadOnly Property NextTextboxID() As String
        Get
            ' no editing required in this block

            ' have to be more careful as page is likely to have other textboxes
            ' Reserved Control ID's TBTextBox[1 -> maxrows] -  do not use outside Table

            Dim textboxIDformatString As String = "TBTextBox{0}"

            If Me._previousTexBoxID = -1 Then
                Me._previousTexBoxID = targetTable.Rows.Count
            End If

            Dim nextTBId As String = String.Format(textboxIDformatString, (Me._previousTexBoxID + 1).ToString())
            Me._previousTexBoxID += 1

            Return nextTBId

        End Get
    End Property

    Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit


        ' initialise reference variable
        ' ****************************************************************************************
        Me.targetTable = Me.Table1 ' set to appropriate table instance (myTable etc)!
        ' ****************************************************************************************

        Integer.TryParse(Request.Form("additionalRows"), _additionalRowCount)

        If _additionalRowCount > 0 Then
            ' replace / restore dynamic rows
            Dim i As Integer = 0
            While i < _additionalRowCount
                Me.AddAdditonalRow(False) ' false because we are recreating and don't want the row count increased
                i += 1
            End While

        End If

    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' usual stuff
    End Sub

    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

        ' embed row count in output form as hidden field.
        ' Viewstate is not available in PreInit and this is the only reliable way to proceed
        ' you could provide a multi part value with a hash or an encrypted value. 
        ' This persistence model is arbitrary but it must be persisted in the Form 
        ' as a posted value with a known client side element ID (name)
        ClientScript.RegisterHiddenField("additionalRows", _additionalRowCount.ToString())

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim tr As TableRow = Me.AddAdditonalRow(True) ' increase row count
        Me.FormatItem(tr)

    End Sub

    Private Sub TableTextBox_TextChanged(ByVal Sender As Object, ByVal e As EventArgs)

        If TypeOf (Sender) Is TextBox Then
            Dim tb As TextBox = DirectCast(Sender, TextBox)

            ' get a rewference to the parent row
            Dim tr As TableRow = DirectCast(tb.Parent.Parent, TableRow)

            ' the row index in the table
            Dim rowIndex As Integer = targetTable.Rows.GetRowIndex(tr)

            ' raw print out for sample review
            comment.InnerHtml = String.Format("<h4>Text Changed on Table Row Index {0}</h4>New value: {1}", rowIndex.ToString(), tb.Text)

        End If

    End Sub

    Private Sub FormatItem(ByRef tr As TableRow)

        ' you would format the TableRow cells in this method, 
        ' possibly passing another object param to assign values from
        ' set some of the controls in the row
        tr.Cells(0).Text = Server.HtmlEncode(String.Format("Item {0}", targetTable.Rows.Count.ToString()))

    End Sub

    Private Function AddAdditonalRow(ByVal incrementcounter As Boolean) As TableRow

        'Me.EnsureChildControls()

        Dim tr As New TableRow
        Dim cell1, cell2 As New TableCell

        tr.Cells.Add(cell1)
        tr.Cells.Add(cell2)

        Dim tb As New TextBox
        tb.ID = Me.NextTextboxID
        cell2.Controls.Add(tb)

        ' Add TextChanged event handler!
        ' Note that this handler is not wired to ASPX declared Texboxes in Table (provide ASPX wireup if this is required)!
        AddHandler tb.TextChanged, New EventHandler(AddressOf TableTextBox_TextChanged)
        ' autopostback optional? (comment out)
        tb.AutoPostBack = True

        targetTable.Rows.Add(tr)

        If incrementcounter Then
            _additionalRowCount += 1
        End If

        Return tr

    End Function

End Class

Rgds,
Martin.

For the benefit of all users please mark any post answers as appropriate.

Edited by sreejith77 on Mar 16, 2007 10:16 AM
Edited by sreejith77 on Mar 16, 2007 10:17 AM
Marked as answer by sreejith77 on Mar 16, 2007 10:17 AM

Reply

kristine1991

Member

26 Points

60 Posts

Re: Adding new rows to HTML table dynamically

Aug 16, 2007 03:46 AM|LINK

I am trying to use this script, however I have some changes I need to make. I beleive I understand the coding, however for some reason I am getting an error. Even under a basic change of adding a masterpage.master and not changing any other portion of the script, I get this same error.

"Me._previousTextBoxID = targetTable.Rows.Count" - This line is that the error references back to. It says:

System.NullReferenceException was unhandled by user code
Message="Object reference not set to an instance of an object."
Source="App_Web_6bwrh9w0"
StackTrace:
       at ForumsStuff_Rows.get_NextTextboxID() in C:\Development\Site1\Rows.aspx.vb:line 24
       at ForumsStuff_Rows.AddAdditonalRow(Boolean incrementcounter) in C:\Development\Site1\Rows.aspx.vb:line 118
       at ForumsStuff_Rows.Button1_Click(Object sender, EventArgs e) in C:\Development\Site1\Rows.aspx.vb:line 75
       at System.Web.UI.WebControls.Button.OnClick(EventArgs e)
       at System.Web.UI.WebControls.Button.RaisePostBackEvent(String eventArgument)
       at System.Web.UI.WebControls.Button.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument)
       at System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument)
       at System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData)
       at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Any help you can give me will be greatly appreciated!

Thanks,
Kristine

I would like to ADD that i have no errors running the page, the error shows up when i click to add another row.

Thanks!

Thanks,

Kristine

Edited by kristine1991 on Aug 16, 2007 03:47 AM

Reply

ovaisgeo

Member

402 Points

141 Posts

Re: Adding new rows to HTML table dynamically

Jan 30, 2008 11:55 AM|LINK

i got the dynmic table thanks alot

Adding new rows to HTML table dynamically RSS

13 replies

sreejith77

Adding new rows to HTML table dynamically

mokeefe

Re: Adding new rows to HTML table dynamically

sreejith77

Re: Adding new rows to HTML table dynamically

hannous

Re: Adding new rows to HTML table dynamically

hannous

Re: Adding new rows to HTML table dynamically

hannous

Re: Adding new rows to HTML table dynamically

hannous

Re: Adding new rows to HTML table dynamically

mokeefe

Re: Adding new rows to HTML table dynamically

kristine1991

Re: Adding new rows to HTML table dynamically

ovaisgeo

Re: Adding new rows to HTML table dynamically

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft