Wrapping a list vertically with ASP.NET using a repeater for generation

Question

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows:

-Item1 -Item4
-Item2 -Item5
-Item3

Most solutions I've found require you to know the items in advance and set specific classes for where the list should break. However, my list can range from 1 to 18 items.

My question is, what is a good, simple way to format a dynamically generated list using an ASP.NET repeater control so that it wraps vertically?

asp.net css list xhtml repeater

Answer 1

Answer №1

Here's a suggestion for tackling this challenge. Let's assume that the number of items to display vertically before wrapping can be predetermined by the server, rather than being dependent on the user's browser height.

<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        rptVerticalWrap.DataSource = new[] {
            new { ID = 1, Name = "ABC" },
            new { ID = 2, Name = "BCD" },
            new { ID = 3, Name = "CDE" },
            new { ID = 4, Name = "DEF" },
            new { ID = 5, Name = "EFG" },
            new { ID = 6, Name = "FGH" },
            new { ID = 7, Name = "GHI" },
            new { ID = 8, Name = "HIJ" },
        };
        rptVerticalWrap.DataBind(); 
    }

    int count;
    const int VerticalWrapLimit = 5;
</script>

<!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>

    <% count = 0; %>
    <div style="float:left;">
            <asp:Repeater ID="rptVerticalWrap" runat="server">
                <ItemTemplate>
                    <%
                        if (count % VerticalWrapLimit == 0 && count > 0)
                        {
                            %></div><div style="float:left;"><%                     
                        }
                        count++;
                    %>
                    <div>
                        <asp:Label runat="server" Text="ID: " /><asp:TextBox runat="server" Text='<%# Eval("ID") %>' />
                        <asp:Label runat="server" Text="Name: " /><asp:TextBox runat="server" Text='<%# Eval("Name") %>' />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
    </div>
    </div>
    </form>
</body>
</html>

In approaching a problem like this, it's important to envision the desired HTML structure first and then craft the ASP code to generate it accordingly.

In this scenario, each vertical column of data is enclosed in a div element with the style attribute set to "float:left;". The use of a class-scoped "count" variable helps in determining when to close off the current div and initiate a new one. It should be noted that the count variable must be declared at the class level due to scope differences within the Repeater's ItemTemplate compared to the rest of the page.

Answer 2

Here's a suggestion for tackling this challenge. Let's assume that the number of items to display vertically before wrapping can be predetermined by the server, rather than being dependent on the user's browser height.

<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        rptVerticalWrap.DataSource = new[] {
            new { ID = 1, Name = "ABC" },
            new { ID = 2, Name = "BCD" },
            new { ID = 3, Name = "CDE" },
            new { ID = 4, Name = "DEF" },
            new { ID = 5, Name = "EFG" },
            new { ID = 6, Name = "FGH" },
            new { ID = 7, Name = "GHI" },
            new { ID = 8, Name = "HIJ" },
        };
        rptVerticalWrap.DataBind(); 
    }

    int count;
    const int VerticalWrapLimit = 5;
</script>

<!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>

    <% count = 0; %>
    <div style="float:left;">
            <asp:Repeater ID="rptVerticalWrap" runat="server">
                <ItemTemplate>
                    <%
                        if (count % VerticalWrapLimit == 0 && count > 0)
                        {
                            %></div><div style="float:left;"><%                     
                        }
                        count++;
                    %>
                    <div>
                        <asp:Label runat="server" Text="ID: " /><asp:TextBox runat="server" Text='<%# Eval("ID") %>' />
                        <asp:Label runat="server" Text="Name: " /><asp:TextBox runat="server" Text='<%# Eval("Name") %>' />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
    </div>
    </div>
    </form>
</body>
</html>

In approaching a problem like this, it's important to envision the desired HTML structure first and then craft the ASP code to generate it accordingly.

In this scenario, each vertical column of data is enclosed in a div element with the style attribute set to "float:left;". The use of a class-scoped "count" variable helps in determining when to close off the current div and initiate a new one. It should be noted that the count variable must be declared at the class level due to scope differences within the Repeater's ItemTemplate compared to the rest of the page.

Answer 3

Answer №2

I have successfully utilized div tags with style as depicted in the following code:

<asp:Repeater ID="rptAnswers" runat="server">
<ItemTemplate>
<div style="width:100%;display:table-row;">
<div style="display: table-cell; padding: 5px; margin-left: 25px">
<asp:Label ID="lblOrdPos" runat="server" ClientIDMode="Predictable" Text='<%# Eval("ansLetter")%>'></asp:Label>)
</div>
<div style="display: table-cell; padding: 5px;" class="ansCtrl">
<asp:RadioButton ID="gvrbAns" ClientIDMode="Predictable" CssClass="gvrbAnswers" GroupName="gvrbAnswers" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
<asp:CheckBox ID="gvchkAns" ClientIDMode="Predictable" CssClass="gvchkAnswer" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
<asp:RadioButtonList ID="rblAnswer" ClientIDMode="Predictable" CssClass="ansTrueFalse" runat="server">
<asp:ListItem Value="1" Text="True"></asp:ListItem>
<asp:ListItem Value="0" Text="False"></asp:ListItem>
</asp:RadioButtonList>
</div>
<div style="display: table-cell; padding: 5px;">
<asp:Label runat="server" ID="lblAnswerTxt" ClientIDMode="Predictable" Text='<%# Eval("txt") %>'></asp:Label>
</div>
</div>

</ItemTemplate>
</asp:Repeater>

Answer 4

I have successfully utilized div tags with style as depicted in the following code:

<asp:Repeater ID="rptAnswers" runat="server">
<ItemTemplate>
<div style="width:100%;display:table-row;">
<div style="display: table-cell; padding: 5px; margin-left: 25px">
<asp:Label ID="lblOrdPos" runat="server" ClientIDMode="Predictable" Text='<%# Eval("ansLetter")%>'></asp:Label>)
</div>
<div style="display: table-cell; padding: 5px;" class="ansCtrl">
<asp:RadioButton ID="gvrbAns" ClientIDMode="Predictable" CssClass="gvrbAnswers" GroupName="gvrbAnswers" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
<asp:CheckBox ID="gvchkAns" ClientIDMode="Predictable" CssClass="gvchkAnswer" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
<asp:RadioButtonList ID="rblAnswer" ClientIDMode="Predictable" CssClass="ansTrueFalse" runat="server">
<asp:ListItem Value="1" Text="True"></asp:ListItem>
<asp:ListItem Value="0" Text="False"></asp:ListItem>
</asp:RadioButtonList>
</div>
<div style="display: table-cell; padding: 5px;">
<asp:Label runat="server" ID="lblAnswerTxt" ClientIDMode="Predictable" Text='<%# Eval("txt") %>'></asp:Label>
</div>
</div>

</ItemTemplate>
</asp:Repeater>

Wrapping a list vertically with ASP.NET using a repeater for generation

Answer №1

Answer №2

Similar questions

Displaying a hidden div using the jQuery .each() method

Concealing passwords to disguise oneself

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

What causes the lack of upward movement for a div element when the div above it is floated to the left?

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

The functionality of the ASP.NET MVC4 Ajax ActionLink helper seems to be malfunctioning as it is causing the entire page to reload instead of displaying the

Tips for enlarging the font size of a number as the number increases

Aligning hyperlinks with background images

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

Unable to handle a POST request initiated by an HTML Form

Toggling the form's value to true upon displaying the popup

Toggle the backgroundImage visibility by setting it to either hidden or displayed using jquery

href not functioning properly on subsequent clicks, whereas onclick remains active

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

What could be the reason the background-color isn't changing when I apply button:hover?

Displaying photos locally in HTML is not supported

Tips for positioning a label within the span element wpcf7-form-control-wrap

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

How come certain invisible screen elements suddenly become visible when the document is printed?

Switching the sorting criteria from 'AND' to 'OR' in the JPList library