www.webdeveloper.com
Results 1 to 7 of 7

Thread: create dynamic table with span cells

  1. #1
    Join Date
    Nov 2006
    Posts
    29

    Angry create dynamic table with span cells

    Hi folks,

    I have a need to draw customized table dynamically in my asp.net page. For example, i have a template table of 2 rows and 6 colums. Depending on the data from the backend I need to re-draw this template to become a new table where:

    a) 1st colum will has 1 cell that spans over 2 rows
    b) 2nd column has 2 cells , one on each row
    c) 3 &4 columns: 1st row --> will have 1 cell in each column, 2nd row -->only 1 cell that spans over 3&4 columns
    d) 5 & 6 columns: has only 1 cell that spans over 2 columns(5&6) and 2 rows (5&6).

    or any other configuration.

    not ALL cells will then be binded with data. Says, all cell that spans will be binded with data. Single cell (column2) in row2 will be binded with data and not in row 1

    I was told to use stringBuilder and DataTable to create the new table as text. I have no clue how to start. Help!

    Thanks
    tcv

  2. #2
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    1,607
    Youll do this on the fly. Here is an example.

    *NOTE: I always set the border of the table to 1 when doing this so that when the table is displayed on the screen, its easy to see what needs to be modified and if the columns are spanning correclty.

    Code:
    sSQL = "SELECT * FROM TABLE"
    set oRS = oConn.Execute(sSQL)
    If Not oRS1.EOF then 
        'Create your header here, This is because it will not be repeated. 
        With Response
            .Write "<table border=""1"">"
            .Write "<tr>"
            .Write "<td colspan=""4"">This is my table header</td>"
            .Write "</tr>
        End With
    
        Do While Not oRS.EOF 
            'This will loop and create a row in your table for each row returened from the recordset
            With Response
                .Write "<tr>"
                .Write "<td>" & oRS("Column1") & "</td>"
                .Write "<td colspan="2">" & oRS("Column2") & "</td>"
                .Write "<td colspan="2">" & oRS("Column3") & "</td>"
                .Write "<td>column2</td>
                .Write "</tr>"
            End With
            oRS.MoveNext
        Loop
    
        'Create your footer here
        With Response
            .Write "</table> 
        End With
    End If

  3. #3
    Join Date
    Nov 2006
    Posts
    29
    lmf232f,

    The table configuration depends on what in the db. Meaning where the column span will start and for how many (rows/cols) within that template (2rows and 6 cols table).

    what your have here:
    Write "<td colspan="2">" & oRS("Column2") & "</td>"
    is a static col with dynamic data.

    How do I programatically control the "colspan=some number" and calculate left over cols and get rid of the grid line for spanned cell? Can i send you a private email so I can attach some examples for you to see?

  4. #4
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    1,607
    tv,
    That still does not seem like a problem but youll need to know how to calculate where the span will start and end. If you can do this then all you have to do is set a variable for the colspan which will either be 0 or some number that you calculate.

    If you cant calculate this number then your not going to be able to do what you want. There has to be some logical way to decide on how many cells to span.

    Code:
    If rs("Field") = Something then 
        TempColSpan = rs("Field2")
    Else
        TempColSpan = 0
    End If
    
    .Write "<td colspan="" & TempColSpan & "">" & RS("FieldName") & "</td>"
    Get rid of the grid line? I assume you mean that you will have a border on your table and if the cell spans you dont want the border. This sounds like a job for css where you can create a style and apply that style to the column that is getting the colspan value.


    You might want to post the samples here in this message, that way other people may be able to help.

  5. #5
    Join Date
    Nov 2006
    Posts
    29
    a) how do I attach a pic here?
    b) info for where the col start and how many rows/cols to span are given in the db. There are width and height fields to determine how many cols/rows it will span. if w=1, h=2, it's a col that spans 2 rows. if w=2, h=2, it's a col that spans 2 cols and 2 rows etc....
    c) seems like you can control the layout (of the table) much better/easier with datalist /repeater controls (with nested controls) than w datagrid . The problem remains that I dont know how to set it up with datalist/repeater to do the span and the binding for the spanned cols/rows.

    Any ideas?

  6. #6
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    1,607
    tv,
    are you using asp.net? Im giving you an example based on asp and not asp.net. If your using asp.net, well then thats a different story.

    To attach a file just go to Additional Options under where you type the post and click on "Manage Attachments" which will allow you to attach a file.

  7. #7
    Join Date
    Nov 2006
    Posts
    29
    yes, I am using asp.net. In the pic, there are 3 possible configurations (and could be others) that needed to be generated at runtime. Blue cells are span cells with bound data. Grays are empty cells. The template for the table/list is always 6x2 fixed length & width. The only changes are merge cells. No gridline between merged cells.
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles