Solved

change listview layout

Posted on 2011-09-21
4
585 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 300 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 200 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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

In this article I will describe the Copy Database Wizard method as one possible migration process and I will add the extra tasks needed for an upgrade when and where is applied so it will cover all.
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 censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
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…

778 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