Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 2.0 > ASP.NET 2.0 Basics
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
ASP.NET 2.0 Basics If you are new to ASP or ASP.NET programming with version 2.0, this is the forum to begin asking questions. Please also see the Visual Web Developer 2005 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 2.0 Basics section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old January 25th, 2008, 03:00 PM
Authorized User
 
Join Date: Jan 2008
Location: Suwanee, GA, USA.
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default Displaying data in two columns

Hey, I'm trying to display data from 2 database columns in 4 columns without duplicating or repeating data in VB.NET using a SQL stored procedure.
Any help is greatly appreciated.

i.e.

Column 1 Column 2 Column 3 Column 4
===== ===== ===== =====

Image 1 Record 1 Image 2 Record 2
Image 3 Record 3 Image 4 Record 4
Image 5 Record 5 Image 6 Record 6



Peter Hansen
Software Developer
AtHomeNet, Inc.
peterh@athomenet.com
__________________
Peter Hansen
Software Developer
AtHomeNet, Inc.
peterh@athomenet.com
Reply With Quote
  #2 (permalink)  
Old January 25th, 2008, 03:43 PM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

What criteria can you offer that will dictate what column should contain what data? I.e. how do we know that the value from the single image column should be in column 1 or column 3? From the sample it appears to be a simple even/odd type behavior.

I don't think that SQL is the correct place for this. You are trying to use the data domain to affect a result intended for the presentation domain. There is likely a much more appropriate solution.

There are ASP.NET server controls that permit a fairly good amount of control over the emitted HTML. Alternatively you could use an even simpler control (HtmlTable) to construct the output exact as you describe. From experience I would suggest that it would be far easier to get the desired the result with some presentation coding instead of trying to manipulate the data in SQL. Plus you get the benefit of having the display logic in the appropriate place.

-Peter
Reply With Quote
  #3 (permalink)  
Old January 25th, 2008, 03:49 PM
Authorized User
 
Join Date: Jan 2008
Location: Suwanee, GA, USA.
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Perhaps I worded my problem wrong.
I am simply using a stored procedure to access the data, and then displaying it on a page.
I'm not attempting to do anything in SQL other than get my data.
I apologize for the confusion.

Peter Hansen
Software Developer
AtHomeNet, Inc.
peterh@athomenet.com
Reply With Quote
  #4 (permalink)  
Old January 25th, 2008, 03:54 PM
Authorized User
 
Join Date: Jan 2008
Location: Suwanee, GA, USA.
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

This is essentially what I'm trying to do.

http://i37.photobucket.com/albums/e62/petemosh/1-2.jpg

Where the images and text are both pulled from the database.

Peter Hansen
Software Developer
AtHomeNet, Inc.
peterh@athomenet.com
Reply With Quote
  #5 (permalink)  
Old January 25th, 2008, 04:00 PM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

Let me ask a different way.

In your result data the value in column 1 and 3 come from the same source column. Likewise, output columns 2 and 4 come from a different single source column. And you are were asking how to do this with a stored procedure, correct?

-Peter
Reply With Quote
  #6 (permalink)  
Old January 25th, 2008, 04:04 PM
Authorized User
 
Join Date: Jan 2008
Location: Suwanee, GA, USA.
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Default

No, I fear that I shouldn't have even mentioned the stored procedure!
I am wondering how to create+fill an html table with the data, without any duplicates or repeats, I am having no trouble accessing the data, just displaying it properly.

For example, I don't want the first row in columns 1 and 3(and 2 and 4 respectively) to display the same record/image.

I'm sorry if I've been confusing you by not wording my question properly.

Peter Hansen
Software Developer
AtHomeNet, Inc.
peterh@athomenet.com
Reply With Quote
  #7 (permalink)  
Old January 25th, 2008, 05:10 PM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

Creating an HTML table is fairly straight forward.

Start with the HtmlTable class, then add HtmlTableRow instances to the table's Rows collection. Similarly, create and add instances of the HtmlTableCell class to the row's cells collection. Add the HtmlTable class to a controls collection somewhere and you'll get the table in the page. You can place an instance of the table directly in the page using the markup (<asp:table ...>) so you can just access it directly by its ID instead of creating it and adding it to a controls collection.

Then you simply need to loop over your data source (data reader, data table, etc) and do the right logic to add two pairs of cells into each row. It really comes down to checking your interval and creating a new row instance before you add the cells. This is easy to do with a modulus operation. It's also a good idea to fill out the possible missing cells when you have a record count that doesn't completely fill the table.

In psedocode:

interval = 2 //in your case
rowCount = 0
for each row returned
   if rowCount modulus interval == 0 //0,2,4,etc
      myRow = new row
      myTable.Rows.Add(myRow)
   /if
   myCell = new cell
   myImage = new image
   //set image props from data
   myCell.Controls.Add(myImage)
   myRow.Cells.Add(myCell)
   myCell = new cell
   myCell = cell text from data
   myRow.Cells.Add(myCell)
   rowCount++
next row
while rowCount modulus interval != 0
   myRow.Cells.Add(new cell)
next

-Peter
Reply With Quote
  #8 (permalink)  
Old January 25th, 2008, 05:50 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , USA.
Posts: 1,093
Thanks: 1
Thanked 12 Times in 11 Posts
Default

That kind of flow layout, in which you have a multicolumn table where each cell is a seperate record, is also often accomplished using a DataList. Both the image field and the text field for each record would appear in the same table cell. Here's an MSDN example demonstrating what I mean. Just paste it into a Web Form, and select the following values from the drop down lists at the bottom: Repeat Direction = Horizontal, Repeat Layout = Table, Repeat Columns = 2. Should give you the layout you're looking for.

Code:
<%@ Page Language="C#"  %>
<%@ Import Namespace="System.Data" %>

<html>
<head id="Head1" runat="server">
    <title>DataList Example</title>
    <script runat="server">

    ICollection CreateDataSource()
    {

        // Create sample data for the DataList control.
        DataTable dt = new DataTable();
        DataRow dr;

        // Define the columns of the table.
        dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
        dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
        dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
        dt.Columns.Add(new DataColumn("ImageValue", typeof(String)));

        // Populate the table with sample values.
        for (int i = 0; i < 9; i++)
        {
            dr = dt.NewRow();

            dr[0] = i;
            dr[1] = "Description for item " + i.ToString();
            dr[2] = 1.23 * (i + 1);
            dr[3] = "Image" + i.ToString() + ".jpg";

            dt.Rows.Add(dr);
        }

        DataView dv = new DataView(dt);
        return dv;
    }


    void Page_Load(Object sender, EventArgs e)
    {

        // Load sample data only once, when the page is first loaded.
        if (!IsPostBack)
        {
            ItemsList.DataSource = CreateDataSource();
            ItemsList.DataBind();
        }

    }

    public void Button_Click(Object sender, EventArgs e)
    {

        // Set the repeat direction based on the selected value of the
        // DirectionList DropDownList control.
        ItemsList.RepeatDirection =
            (RepeatDirection)DirectionList.SelectedIndex;

        // Set the repeat layout based on the selected value of the
        // LayoutList DropDownList control.
        ItemsList.RepeatLayout = (RepeatLayout)LayoutList.SelectedIndex;

        // Set the number of columns to display based on the selected
        // value of the ColumnsList DropDownList control.
        ItemsList.RepeatColumns = ColumnsList.SelectedIndex;

        // Show or hide the gridlines based on the value of the
        // ShowBorderCheckBox property. Note that gridlines are displayed
        // only if the RepeatLayout property is set to Table.
        if ((ShowBorderCheckBox.Checked)
            && (ItemsList.RepeatLayout == RepeatLayout.Table))
        {
            ItemsList.BorderWidth = Unit.Pixel(1);
            ItemsList.GridLines = GridLines.Both;
        }
        else
        {
            ItemsList.BorderWidth = Unit.Pixel(0);
            ItemsList.GridLines = GridLines.None;
        }
    }
    </script>
</head>
<body>

   <form id="form1" runat="server">

      <h3>DataList Example</h3>

      <asp:DataList id="ItemsList"
           BorderColor="black"
           CellPadding="5"
           CellSpacing="5"
           RepeatDirection="Vertical"
           RepeatLayout="Table"
           RepeatColumns="0"
           BorderWidth="0"
           runat="server">

         <HeaderStyle BackColor="#aaaadd">
         </HeaderStyle>

         <AlternatingItemStyle BackColor="Gainsboro">
         </AlternatingItemStyle>

         <HeaderTemplate>

            List of items

         </HeaderTemplate>

         <ItemTemplate>

            Description: <br />
            <%# DataBinder.Eval(Container.DataItem, "StringValue") %>

            <br />

            Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>

            <br />

            <asp:Image id="ProductImage"
                 AlternatingText='<%# DataBinder.Eval(Container.DataItem, "StringValue") %>'
                 ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
                 runat="server"/>

         </ItemTemplate>

      </asp:DataList>



      <table cellpadding="5">

         <tr>

            <th>

               Repeat direction:

            </th>

            <th>

               Repeat layout:

            </th>

            <th>

               Repeat columns:

            </th>

            <th>

               <asp:CheckBox id="ShowBorderCheckBox"
                    Text="Show border"
                    Checked="False" 
                    runat="server" />

            </th>

         </tr>

         <tr>

            <td>

               <asp:DropDownList id="DirectionList" 
                    runat="server">

                  <asp:ListItem>Horizontal</asp:ListItem>
                  <asp:ListItem Selected="True">Vertical</asp:ListItem>

               </asp:DropDownList>

            </td>

            <td>

               <asp:DropDownList id="LayoutList" 
                    runat="server">

                  <asp:ListItem Selected="True">Table</asp:ListItem>
                  <asp:ListItem>Flow</asp:ListItem>

               </asp:DropDownList>

            </td>

            <td>

               <asp:DropDownList id="ColumnsList" 
                    runat="server">

                  <asp:ListItem Selected="True">0</asp:ListItem>
                  <asp:ListItem>1</asp:ListItem>
                  <asp:ListItem>2</asp:ListItem>
                  <asp:ListItem>3</asp:ListItem>
                  <asp:ListItem>4</asp:ListItem>
                  <asp:ListItem>5</asp:ListItem>

               </asp:DropDownList>

            </td>

            <td>

               &nbsp;

            </td>


         </tr>

      </table>     

      <asp:LinkButton id="RefreshButton" 
           Text="Refresh DataList" 
           OnClick="Button_Click" 
           runat="server"/>

   </form>

</body>
</html>
Best,

Bob

Reply With Quote
  #9 (permalink)  
Old January 25th, 2008, 10:58 PM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , USA.
Posts: 1,093
Thanks: 1
Thanked 12 Times in 11 Posts
Default

If you have version 3.5 of the framework installed, you could also get what you want with the new ListView control. For lack of something better to call it, lets call the layout of the photobucket.jpg you linked to 'tiled layout with horizontal flow' (the table cells are bound left to right, then down). Here's a .NET 3.5 ListView control that renders 'tiled layout with horizontal flow' using 2 columns:

Code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<html>
<head runat="server">
<title>ListView Tiled Layout with Horizontal Flow</title>
<script runat="server">
    ICollection CreateDataSource()
    {   
        DataTable dt = new DataTable();
        DataRow dr;

        dt.Columns.Add(new DataColumn("DescriptionValue", typeof(String)));
        dt.Columns.Add(new DataColumn("ImageValue", typeof(String)));

        for (int i = 0; i < 9; i++)
        {
            dr = dt.NewRow();

            dr[0] = "Description for item " + i.ToString();
            dr[1] = "Image" + i.ToString() + ".jpg";

            dt.Rows.Add(dr);
        }

        DataView dv = new DataView(dt);
        return dv;
    }


    void Page_Load(Object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            MyListView.DataSource = CreateDataSource();
            MyListView.DataBind();
        }
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:ListView ID="MyListView" GroupItemCount="2" runat="server">
        <LayoutTemplate>
          <table cellpadding="2" width="400px" runat="server" id="tblDataItems">
            <tr runat="server" id="groupPlaceholder" />
          </table>
        </LayoutTemplate>
        <GroupTemplate>
          <tr runat="server" id="DataItemRow">
            <td runat="server" id="itemPlaceholder" />
          </tr>
        </GroupTemplate>
        <ItemTemplate>
          <td id="Td1" align="center" style="width:200px" runat="server">
            <asp:Image ID="AnImage" runat="server"
               ImageUrl='<%# "~/images/thumbnails/" + Eval("ImageValue") %>' />&nbsp&nbsp
            <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("DescriptionValue")%>' />
          </td>
        </ItemTemplate>

      </asp:ListView>
    </form>
</body>
</html>
HTH,

Bob



Reply With Quote
  #10 (permalink)  
Old January 26th, 2008, 12:53 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , USA.
Posts: 1,093
Thanks: 1
Thanked 12 Times in 11 Posts
Default

ok, maybe I shouldn't use the term 'flow' since it has a different meaning in web page layout - how 'bout just 'horizontal direction'.

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Displaying Columns in a DataGrid jmss66 VB How-To 0 July 26th, 2007 03:13 PM
Mapping of Data From Various Columns paul31Hampshire Access VBA 12 June 2nd, 2006 02:23 AM
Displaying values in multiple columns in Combo abhijeet BOOK: Professional C#, 2nd and 3rd Editions 1 June 15th, 2005 07:01 AM
displaying multiple fields in columns rbegonia Classic ASP Basics 3 July 31st, 2004 08:37 PM
displaying multiple fields in columns rbegonia XSLT 0 July 29th, 2004 02:21 PM



All times are GMT -4. The time now is 04:11 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.