Dynamically append rows to table

Discussion in 'ASP .Net Web Controls' started by Gorgsenegger, Sep 5, 2007.

  1. Gorgsenegger

    Gorgsenegger Guest

    Hi all,

    I have an ASP.Net table to which I want to append a number of rows
    dynamically, i.e. there is a list of users in the table, and I want to
    add more users via clicking on a button "Add".

    The problem is that I can create the new row on the server side and
    append it to the table which shows up fine in the browser, but when I
    add another user the row I added before disappears.

    Initial state:

    John Doe
    Jack Xyz

    Now I click the button "Add":

    John Doe
    Jack Xyz
    Carl Abc

    When I click the button again, I still come up with only three rows in
    the table, as the initial table that was shown when the page first
    loaded only contained two rows, and every time I add a new row it
    seems that it will be shown in the browser but the server will forget
    about it...

    How can I solve this problem, any ideas?

    Thanks in advance & best regards

    Gorgsenegger, Sep 5, 2007
    1. Advertisements

  2. Dblood

    Dblood Guest

    I assume that the existing data (the first two rows) is actually in
    the HTML and not being read from a database or other data source, and
    further that you are not storing the new row's data in a database (or
    anywhere for that matter). In order for you to get the desired
    results, you have to store the information between postbacks, and then
    read it back in during the page loads. I don't generally use
    datagrids and databinding. I prefer to create the tables manually by
    doing exactly what you are doing. There may be a better way to do
    this using a datagrid, but someone else will have to give you the

    You may choose to add the record to the db each time the user clicks
    on the "Add User" button, or you may want to store up all their new
    records and then save them all at once. Either is possible. I prefer
    to add the record each time, but it's your call. Just remember that
    whatever you choose to do, the data will need to be stored somewhere
    if you plan to retrieve it the next time you open the page. A
    postback is exactly that - reopening the page. Some controls' data
    can be forced to persist by setting EnableViewState = True on the
    control. HTML tables do not have the EnableViewState property.

    Unless you ask me to, I won't dig into how to save records into a
    database, but here's what you can do.

    1. Save the record each time the user clicks "Add User"
    As mentioned above, write code to add the user to the database in the
    button's click event, then write to code to retrieve the user records
    from the database during the page_load event. You can dynamically add
    the existing records to the table the same way you are adding the new
    row. FWIW, if you databind a datagrid, this all (displaying the
    records) happens for you when the page reloads.

    2. Save the new records all at the same time
    You can create a hidden textbox on the form. When the user clicks
    "Add User", you append the info to the hidden textbox's value. I
    usually delimit the columns with a semicolon, and the rows with the
    pipe character. Upon postback, Request.Params("[your hidden
    textbox]") into a string variable and then split the string back into
    an array (Split on the pipe char). Then when creating your HTML
    table, you split each individual row on the semicolon into an array.
    Then assign the innerhtml property of each HTMLTableCell to the values
    in the array.

    A quick example of that:

    Dim i as int16

    Dim myData as string
    myData = Request.Params("txtHide")

    Dim aryData() as string
    aryData = Splt(myData, "|")

    For i = 0 to aryData.length - 1

    Dim tr0 as New HTMLTableRow()
    Dim tc0a as New HTMLTableCell() 'user
    Dim tc0b as New HTMLTableCell() 'password

    Dim aryRow() as string
    aryRow = Split(aryData(i), ";")

    tc0a.innerhtml = aryRow(0)
    tc0b.innerhtml = aryRow(1)



    Next i

    You'll need another "Save" button, but when it's clicked, just loop
    through the array again and call the save procedure from within the
    loop (like the first example).

    This turned into a long drawn out explanation. I didn't intend for it
    to be. Hope something in it helps.

    Dblood, Sep 7, 2007
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  2. Arjen Hoekstra
    Arjen Hoekstra
    Aug 2, 2005
  3. Rio
  4. HYRY
    Bruno Desthuilliers
    Sep 26, 2007
  5. T.G.

Share This Page