Solved

change listview layout

Posted on 2011-09-21
4
600 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use this article to create a batch file to backup a Microsoft SQL Server database to a Windows folder.  The folder can be on the local hard drive or on a network share.  This batch file will query the SQL server to get the current date & time and wi…
Ever needed a SQL 2008 Database replicated/mirrored/log shipped on another server but you can't take the downtime inflicted by initial snapshot or disconnect while T-logs are restored or mirror applied? You can use SQL Server Initialize from Backup…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

713 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