Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

change listview layout

Posted on 2011-09-21
4
Medium Priority
?
631 Views
Last Modified: 2012-12-14
hi i load some data on one listview but the data shows like this:
that the layout we have:

1          2          3          4
5          6          7          8
9         10        11

but i want this one:

1          4          7      10
2          5          8      11
3          6          9

any suggestion?
0
Comment
Question by:rafaelrgl
4 Comments
 
LVL 96

Accepted Solution

by:
Bob Learned earned 1200 total points
ID: 36577921
It sounds like you are looking for something like this:

Repeating ListView GroupTemplate Vertically
http://forums.asp.net/p/1364813/2830987.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewVertical.aspx.cs"
    Inherits="ListViewVertical" %>

<!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>ListView vertical Repeat demo</title>
    <style type="text/css">
        .header
        {
            clear: both;
            width: 100%;
            text-align: center;
            border: 1px solid #ccc;
        }
        .item
        {
            clear: both;
            border: 1px Blue solid;
            width: 100%;
        }
        .group
        {
            /* i used 200px ,because the main layout width is 600px , and the width for each group is 200px.*/
            width: 200px;
            border: 1px red solid;
            float: left;
            margin: 3px;
            padding: 2px;
        }
        .mainLayout
        {
            width: 640px;
            border: yellow 2px solid;
            padding: 2px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListView ID="ListView1" GroupItemCount="3" runat="server" DataSourceID="ObjectDataSource1">
            <LayoutTemplate>
                <div runat="server" id="Products" class="mainLayout">
                    <div id="Tr1" runat="server" class="header">
                        PRODUCTS LIST
                    </div>
                    <div runat="server" id="groupPlaceholder">
                    </div>
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                <div runat="server" id="ProductsGroup" class="group">
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                </div>
            </GroupTemplate>
            <GroupSeparatorTemplate>
            </GroupSeparatorTemplate>
            <ItemTemplate>
                <div id="Td1" align="center" runat="server" class="item">
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("ProductId","ProductId: {0}") %>' /><br />
                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Name","Name: {0}") %>' /><br />
                </div>
            </ItemTemplate>
            <ItemSeparatorTemplate>
                <br />
            </ItemSeparatorTemplate>
        </asp:ListView>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetAll" TypeName="Product">
            <SelectParameters>
                <asp:Parameter Type="Int32" Name="NumnerOfDummyProducts" DefaultValue="7" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </div>
 
    </form>
</body>
</html>

Open in new window

0
 
LVL 4

Assisted Solution

by:guramrit
guramrit earned 800 total points
ID: 36579122
Check following code on any page.

 
<style type="text/css">
        .item
        {
            clear: both;
            width: 100%;
        }
        .group
        {
            float: left;
            margin: 3px;
            padding: 2px;
        }
    </style>

    <asp:ListView ID="ListView1" GroupItemCount="3" runat="server" DataSourceID="ObjectDataSource1">
        <LayoutTemplate>
            <div runat="server" id="Products" class="mainLayout">
                <div runat="server" id="groupPlaceholder">
                </div>
            </div>
        </LayoutTemplate>
        <GroupTemplate>
            <div runat="server" id="ProductsGroup" class="group">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </GroupTemplate>
        <GroupSeparatorTemplate>
        </GroupSeparatorTemplate>
        <ItemTemplate>
            <div id="Td1" align="center" runat="server" class="item">
                <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItem %>' />
            </div>
        </ItemTemplate>
    </asp:ListView>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="Range" TypeName="System.Linq.Enumerable">
        <SelectParameters>
            <asp:Parameter Name="start" DefaultValue="1" />
            <asp:Parameter Name="count" DefaultValue="11" />
        </SelectParameters>
    </asp:ObjectDataSource>

Open in new window

0
 
LVL 1

Author Closing Comment

by:rafaelrgl
ID: 36585051
thanks a lots for this.
0
 

Expert Comment

by:simtouch
ID: 38691624
This does not even work did you not even check your code?
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

How to leverage one TLS certificate to encrypt Microsoft SQL traffic and Remote Desktop Services, versus creating multiple tickets for the same server.
This article explains how to reset the password of the sa account on a Microsoft SQL Server.  The steps in this article work in SQL 2005, 2008, 2008 R2, 2012, 2014 and 2016.
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…

876 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