Binding data to pre-existing HTML tables. 2

[columbo2]

Hi all,

I have been given an HTML template of a site.
It has a nice decrative table that has been put together by the designer. I need to display data from a database in this table.

I've looked at gridview, detailsview etc but these would require me to recreate the table and having tried this I am unable to get them to look like the original table made by the designer.

I'm therefore looking at reading in a dataset of the data and then binding the individual data items to textboxes inside the table cells. Having searched on the web for info on how to do this there doesn't seem to be much its all about gridviews.

Am I doing something that nobody else does?
I get the feeling I'm missing something or heading off down the wrong route.

Also does anyone know any good links or could quickly show the syntax for extraxting a particular cell of data from a dataset and displaying it in a textbox or label.

thanks for reading my post
C

 

[ca8msm]

Use the Repeater control.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[columbo2]

Thanks mark, just been reading about that here:

http://articles.techrepublic.com.com/5100-3513_11-5759187.html

Looks like just what I was after.

Is this a common issue - it seems like under .net it is harder to separate out the designer and coder.

Cheers
C

 

[jmeckley]

you could argue this one either way. ultimately it come's down you your needs. 99.9% of the time if an asp.net app needs a table it's through a gridview.

depending on the complexity of the styling the Css Adapters may be able to give you the style control you need and still use the gridview. examples are here. the project is mantained here.

if this doesn't work you'll need to compromise with a repeater and hack the html table apart. something like this

//aspx
<asp:Repeater ...>
   <HeaderTemplate>
       <table>
           <thead>
              <tr>
                  <td>column header 1</td>
                  <td>column header 2</td>
                  <td>column header N</td>
              </tr>
           </thead>
           <tbody>
   </HeaderTemplate>
   <ItemTemplate>
              <tr>
                 <td><%#Eval("Column 1 Name", "optional format") %></td>
                 <td><%#Eval("Column 2 Name", "optional format") %></td>
                 <td><%#Eval("Column N Name", "optional format") %></td>
              </tr>
   </ItemTemplate>
   <FooterTemplate>
           </tbody>
           <tfoot>
              <tr>
                  <td>column footer 1</td>
                  <td>column footer 2</td>
                  <td>column footer N</td>
              </tr>
           </tfoot>
       </table>
   </FooterTemplate>
</asp:Repeater>

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[ca8msm]

Is this a common issue - it seems like under .net it is harder to separate out the designer and coder.

I'd say it's completely the opposite. ASP.NET is a vast improvement over some other languages in this arena and separating presentation from logic is one of it's strong points if you know how to use it.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[jmeckley]

Is this a common issue - it seems like under .net it is harder to separate out the designer and coder

asp.net uses a different different model than say php or cgi. the idea behind asp.net is the designers use the markup and asp.net controls to style the page and the developers use the code behind to program logic into the page. the server controls will generate the html markup.

having the codebehind talk directly to html controls isn't recomended (still possible)

<a href='<% ... %>'><% ... %></a>

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[columbo2]

So I'd be advised tp persuade the designer to use one of the visual studio products to create the design?

That would then avoid having to recreate the table again using gridview controls.

The trouble is the designer is not in house and isn't likely to change - but I see what you're saying.
ta
C

 

[ca8msm]

So I'd be advised tp persuade the designer to use one of the visual studio products to create the design?

No, the designer should show you how it should look and implement the design and he should work with the developer to get the output that he needs.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[columbo2]

Thanks for the info its all a great help.

One issue that has really been giving me a problem when trying to shoe-horn in the designers table into a grid view is that the table I'm trying to re-create looks like this.

Row1Col1 Row1col2
Row1col3 Row1col4

Row2Col1 Row2col2
Row2col3 Row2col4

rather than
row1col1, row1col2, row1col3, row1col4
row2col1, row2col2, row2col3, row2col4

I can't see how to achieve this with a gridview?

 

[jmeckley]

use template columns. form within a template column you can do just about anything.

<asp:GridView>
   <Columns>
      <asp:TemplateColumn>
         <ItemTemplate>
              <%#Eval("Column1") %>
              <br />
              <%#Eval("Column3") %>
         </ItemTemplate>
      </asp:TemplateColumn>
      <asp:TemplateColumn>
         <ItemTemplate>
              <%#Eval("Column2") %>
              <br />
              <%#Eval("Column4") %>
         </ItemTemplate>
      </asp:TemplateColumn>
   </Columns>
</asp:GridView>

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[columbo2]

Thanks I'll have a look at that

 

[columbo2]

Sorry to be a pain, I decided to have a go with the gridview and it's going well.
The designers table is just basic formatting that I think I can do with gridview properties, but ...
The only thing I can't do is get:

col1Title Col1data

i.e. get the column header to the left of the data rather than above the data. I realise that it's a column haeder and so it goes above or it wouldn't be a header so I tried the code above (using <asp:TemplateColumn>) so that I couls have a headless column but it's throwing an error and only offers <asp:TemplateHeader> as ano option in the predictive text syste,.

any help gratefully recieved - don't worry if your busy I'll get there in the end.

C

 

[columbo2]

Sorry in the above <asp:TemplateField> not header in the above message.
Ben

 

[columbo2]

I found out it was the 'showheader' attribute in both the template and gridview declarations.

<asp:TemplateField ShowHeader="false" >
and
<asp:GridView ID="GridView1" ShowHeader="false" runat="server" AutoGenerateColumns="False" DataSourceID="dsrcGetJobs">

What threw me was that even after I made the change the column haeders still showed up. In true MS style I had to restart Visual Web Developer for it to work.

 

[columbo2]

Sorry it's me again...

Does any one know if there is a way to have each row of data in a seperate gridview.
or
Is there a way to put a border around each row of the gridview.

The reason I need this is because:

In original html layout, that I am trying to recreate using GridView, the data is displayed with each row in a separate table. Each of these tables has a border around it.

Given the nature of gridviews I'm not sure I can do this - I've tried adjusting the various border properties even using horizontal rules but cannot get the same effect.

So my question is:


Thanks very much.

 

[ca8msm]

Use the Repeater control.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[columbo2]

Having some success with the repeater and know more about the gridview from trying to do it with that.

thanks both for your help
ta
C

 

[columbo2]

Hi again,

Having bound the data to my table using...


<td width="35%" valign="top" class="tablecellst4">
<%# DataBinder.Eval(Container.DataItem, "jsdata") %>
</td>

I am having the problem of not being able to wrap the text - if it id too long it deforms the table.
I've tried putting in a text box but VWD won't let me.

I've seen there are a number of coded solutions on the web but is there any other way of doing it. It seems like I'm missing something simple.
thanks
C

 

[jmeckley]

the label control wraps the text in a span. you can then control the span styling for a specific look

<td width="35%" valign="top" class="tablecellst4">
   <asp:Label id="Label1" runat="server" Text='<%#Eval("jsdata") %>' />
</td>

Jason Meckley
Programmer
Specialty Bakers, Inc.