Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dynamically creating a table within a repeater based on rows returned

Posted on 2007-11-20
7
Medium Priority
?
1,616 Views
Last Modified: 2008-03-15
Hi. I'm sure this question has been answered before around here, but maybe I just can't find the keywords that will correctly get me to it, so Im going to pose my question anyway.

I have a repeater which is dynamically populated via databinding from a stored procedure. This stored proc will ALWAYS pull back the same data per row, but the amount of rows can vary. I basically need some help with the logic to create a table dynamically within the repeater to house the returns from the stored proc, but so that it can handle a total of 3 items per row, or as little as 1. Just in case that was a little vague, I want a table with 3 cells per row max, but able to house 1 or 2 if there are only 1 or 2 returns from the query.

Below is what I have so far (you'll notice the rows and cells are missing from within the repeater). I am also pasting my databind code from the backend as well. Help!!

ASPX ---------------------
<table border="0" cellspacing="0" cellpadding="0" width="100%">
                         <tr>
                           <td>
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                            <asp:Repeater ID="rptProductsList" runat="server">
                            <ItemTemplate><div class="ProductTitle"><%#Eval("ProductTitle")%> (<%#Eval("ProductModelNumber")%>)</div><br />
                            <a onclick="MM_openBrWindow('showPic.aspx?imageID=<%#Eval("ImageID") %>','','resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,width=600,height=700'); return false;" href="#">
                            <img src=<%#Eval("ImagePhysicalLocation")%>th<%#Eval("ImageFileName")%> border="0" /></a>
                            </ItemTemplate>
                            </asp:Repeater>
                            </table>
                            </td>
                         </tr>
                        </table>

VB-----------------
 Dim cn As New SqlConnection(ConfigurationManager.ConnectionStrings("Conn").ConnectionString)

        Dim cmd As New SqlCommand("uspGetProductsFromSubCat", cn)
        cmd.CommandType = Data.CommandType.StoredProcedure
        cmd.Parameters.Add(New SqlParameter("@ProductCategoryID", Data.SqlDbType.Int))
        cmd.Parameters("@ProductCategoryID").Value = Session.Item("currentSubCatID")
        cn.Open()
        rptProductsList.DataSource = cmd.ExecuteReader()
        rptProductsList.DataBind()
        cn = Nothing
0
Comment
Question by:nuvium
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 15

Expert Comment

by:Solar_Flare
ID: 20322424
are you trying to do something like this?
<asp:repeater ID=xx runat=server>
<HeaderTemplate>
   <table border="0" cellspacing="0" cellpadding="0" width="100%">
</HeaderTemplate>
<FooterTemplate>
   </table>
</FooterTemplate>
<ItemTemplate>
   <tr>
          <td>        
                  <div class="ProductTitle"><%#Eval("ProductTitle")%> (<%#Eval("ProductModelNumber")%>)</div>
          </td>
          <td>
                  <a onclick="MM_openBrWindow('showPic.aspx?imageID=<%#Eval("ImageID") %>','','resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,width=600,height=700'); return false;" href="#"><img src=<%#Eval("ImagePhysicalLocation")%>th<%#Eval("ImageFileName")%> border="0" /></a>
           </td>
     </tr>
</ItemTemplate>
 
</asp:repeater>

Open in new window

0
 

Author Comment

by:nuvium
ID: 20322634
You have the right idea, but my needs are a little bit more in depth. I understand using the header and foorter templates to open and close the table, but basically I need the table to have three cells per row (MAX). Each cell will contain a single row return from the database (this includes an image, and some description info). After three of these cells, the row for the table is done, and a new row starts.

Now, using what you showed me above, it looks like you have one row of the database return per table row on the front end, with two cells, one with the description info, one with the image. You understand the difference between what I need and what you showed me?

If it helps at all, I've done this before (which is why im kicking my own ass over forgetting the logic). I remember somone showed me how to do it, and I had to do some logic on the backend that basically dynamically created cells and open/close <tr>'s based on whether a) there have been 3 rows returned from the stored proc (one row goes into each of the three maximum cells per table row on the front end). I believe the logic centered around whether or not it was an even or odd count as to how to handle the creation.

This all sounds much more complicated than it is. I basically just need the repeater to dynamically create a table which has 3 cells per row maximum, each cell housing a full row return from the database. The only catch is, in some instances, only one or two rows will be returned (thus not even having a need for three cells). The table needs to be smart enough not to break when this happens, or populate the remaining cells with empty space.

Let me know if I can explain this better.
0
 
LVL 7

Accepted Solution

by:
photowhiz earned 1000 total points
ID: 20323331
You need a literal to insert the <tr> when appropriate. Do this:

    <asp:Repeater id=repeater1 runat="server">
<HeaderTemplate>
    <table>
    <tr>
</HeaderTemplate>

<ItemTemplate>
      <td><div class="ProductTitle"><%#Eval("ProductTitle")%> (<%#Eval("ProductModelNumber")%>)</div><br />
                            <a onclick="MM_openBrWindow('showPic.aspx?imageID=<%#Eval("ImageID") %>','','resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,width=600,height=700'); return false;" href="#">
                            <img src=<%#Eval("ImagePhysicalLocation")%>th<%#Eval("ImageFileName")%> border="0" /></a></td>
      <asp:Literal id="itemLiteral" runat="server" Text='<%# RepeaterItemSeparator() %>' />
</ItemTemplate>

<FooterTemplate>
    </tr>
    </table>
</FooterTemplate>
    </asp:Repeater>

where your code-behind includes:
      
            private int itemCount = 0;


            public string RepeaterItemSeparator()
            {
                  itemCount++;

                  if ( ((itemCount%3) == 1) && (itemCount != 1) )
                        return "</tr>\r\n\t<tr>";
                  else
                        return "";
            }

    <asp:Repeater id=repeater1 runat="server">
<HeaderTemplate>
    <table>
    <tr>
</HeaderTemplate>
 
<ItemTemplate>
	<td><asp:Label ID="label2" runat="server" Text='<%#  Server.HtmlEncode(DataBinder.Eval(Container.DataItem, "Name").ToString()) %>' /></td>
	<asp:Literal id="itemLiteral" runat="server" Text='<%# RepeaterItemSeparator() %>' />
</ItemTemplate>
 
<FooterTemplate>
    </tr>
    </table>
</FooterTemplate>
    </asp:Repeater>

Open in new window

0
Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

 
LVL 7

Expert Comment

by:photowhiz
ID: 20323358
Well, EE's wonderful Code Snippet box totally messed that up. Just ignore the code box, and let me know if the reply doesn't make sense.
0
 
LVL 1

Assisted Solution

by:RHADMIN
RHADMIN earned 1000 total points
ID: 20773261
nuvium:

I had the exact same question as yours when I did the search yesterday on the experts-exchange for solutions. I found a very simple and instant solution for it by using CSS - display property.

(Product.aspx)
<ItemTemplate>
<table>
   <tr style="display:<%#DisplayOrNotFunction(Eval("ProductName"))%>"><td><%#Eval("ProductName")%></td></tr>
</table>
</ItemTemplate>

(CodeBehind: Product.vb)
Function DisplayOrNotFunction(ByVal sender As Object)
    If sender Is Nothing Then
         Return "none"
    End If
    If sender.ToString().Length > 0 Then
        Return "block"
    Else
        Return "none"
    End If
End Function

-Rick
0
 
LVL 1

Expert Comment

by:Computer101
ID: 21135870
Forced accept.

Computer101
EE Admin
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question