Solved

ul list both horizontal and vertical

Posted on 2010-09-12
3
604 Views
Last Modified: 2013-12-17
Hi.

How can I make a ul list both horizontal and vertical from a database in a datalist like this:
id1        id2        id3
id4        id5        id6
id7        id6        id9
0
Comment
Question by:bongii
  • 2
3 Comments
 
LVL 5

Expert Comment

by:pschrama
ID: 33656234
If I take your question literally, you could use a UL list in the following way.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UnnumberedList.aspx.cs"
    Inherits="Experimentation.Pages.UnnumberedList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .bulletList
        {
            list-style-type: none;
        }
        .bulletList li
        {
            float: left;
            margin-left: 10px;
        }
        .bulletList li.firstInRow
        {
            clear: both;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:BulletedList ID="BulletedList1" runat="server" CssClass="bulletList">
        </asp:BulletedList>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Experimentation.Pages
{
    public partial class UnnumberedList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 0; i < 9; i++)
            {
                ListItem li = new ListItem("id" + (i + 1).ToString());

                if (i % 3 == 0)
                    li.Attributes.Add("class", "firstInRow");

                BulletedList1.Items.Add(li);
            }
        }
    }
}

Open in new window

0
 
LVL 5

Accepted Solution

by:
pschrama earned 500 total points
ID: 33656241
If you mean an actual datalist though, which would make more sense, it would look like this (with generated data rather than database access as an example):
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataList.aspx.cs" Inherits="Experimentation.Pages.DataList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
        <ItemTemplate><%# Container.DataItem %></ItemTemplate>
        </asp:DataList>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Experimentation.Pages
{
    public partial class DataList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // build example data
            List<string> words = new List<string>();
            for (int i = 0; i < 9; i++)
            {
                words.Add("id" + (i + 1).ToString());
            }

            // bind data
            DataList1.DataSource = words;
            DataList1.DataBind();
        }
    }
}

Open in new window

0
 

Author Comment

by:bongii
ID: 33751862
pschrama: Sorry for my late response time, didnt see your answer.
I will check it out tonight, thanks :)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

810 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