GridView row on multiple lines : The Official Microsoft ASP.NET Forums

Reply

GridView row on multiple lines

Jun 22, 2009 01:47 PM|LINK

I have a GridView with 10 items on each row - a few textboxes and a few dropdownlists. In Edit mode this get a little crowded and horizontal srolling becomes necessary.

Is it possible to have each each row's data be spread across multiple lines so the user doesn't have to horizontally scroll?

For example, the first 5 items are side-by-side across the screen, and the next 5 also show up side-by-side across the screen, but they are underneath the first 5.

Reply

Re: GridView row on multiple lines

Jun 22, 2009 02:14 PM|LINK

instead of gridview, you can use repeater, in that in edititemtemplate section, you can create a table,2 rows, in those your fields.

<table>

</table>

in between ech td, place one field.

you can do same also in gridview.

Give a man a fish and you feed him for a day. Teach a man to fish and you feed him forever.

Reply

Re: GridView row on multiple lines

Jun 22, 2009 05:11 PM|LINK

Thanks for the speedy reply. Unfortunately I still don't quite understand how to do it.

I would really like to continue to use a gridview, and the last line of your reply mentions that it can be done with a gridview, so I was wondering if you could take a look at my gridview definition below to see how it might be done with my gridview...?

To simplify it, I have only included 3 fields, and 1 of them is the command field.

<asp:GridView ID="GridView1"

runat="server"

AutoGenerateColumns="False"

DataKeyNames="Key"

Font-Size="X-Small"

HeaderStyle-Wrap="true"

OnRowEditing="GridView1_RowEditing"

OnRowCancelingEdit="GridView1_RowCancelingEdit"

OnRowUpdating="GridView1_RowUpdating"

OnRowDataBound="GridView1_RowDataBound"

>

<asp:TemplateField HeaderText="">

<asp:LinkButton CommandName="Edit" Text="Edit" ID="btnEdit" Runat="server"></asp:LinkButton>

</ItemTemplate>

<asp:LinkButton CommandName="Update" Text="Update" ID="btnUpdate" Runat="server"></asp:LinkButton>

<asp:LinkButton CommandName="Cancel" Text="Cancel" ID="btnCancel" Runat="server"></asp:LinkButton>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Meeting Type" SortExpression="MeetingType">

<asp:DropDownList

ID="DropDownListMT"

runat="server"

DataSource='<%# GrabADataView2() %>'

DataTextField = "MeetingTypes"

DataValueField= "MeetingTypes"

Font-Size="8pt"

>

</asp:DropDownList>

</EditItemTemplate>

<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"MeetingType") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Date Initiated" SortExpression="DateInitiated" >

<asp:TextBox ID="TextBox2" Font-Size="X-Small" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"DateInitiated", "{0:d}") %>'></asp:TextBox>

</EditItemTemplate>

<asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"DateInitiated", "{0:d}") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Reply

ramireddyind...

All-Star

31358 Points

4579 Posts

Re: GridView row on multiple lines

Jun 22, 2009 05:26 PM|LINK

see this example.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="gridshowslikerepeater.aspx.cs" Inherits="gridshowslikerepeater" Title="Untitled Page" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        DataSourceID="SqlDataSource1" onprerender="GridView1_PreRender">
        <Columns>
            <asp:TemplateField HeaderText="EmpId" InsertVisible="False"
                SortExpression="EmpId">
                <EditItemTemplate>
                    <table>
                        <tr>
                            <td>
                            Emp ID :    <asp:Label ID="Label1" runat="server" Text='<%# Eval("EmpId") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            Emp Name :    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("EmpName") %>'></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("EmpId") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="EmpName" SortExpression="EmpName">
                <EditItemTemplate>
                    

                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("EmpName") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="DepartmentId" SortExpression="DepartmentId">
                <EditItemTemplate>
                    <table>
                        <tr>
                            <td>
                             Department ID   <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("DepartmentId") %>'></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            Designation ID    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("DesignationId") %>'></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("DepartmentId") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="DesignationId" SortExpression="DesignationId">
                <EditItemTemplate>
                    

                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("DesignationId") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ShowEditButton="True" />
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
        SelectCommand="SELECT * FROM [Employees]"></asp:SqlDataSource>
</asp:Content>


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;


public partial class gridshowslikerepeater : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    protected void GridView1_PreRender(object sender, EventArgs e)
    {
        if (GridView1.EditIndex != -1)
        {
            GridView1.ShowHeader = false;
            GridView1.Columns[1].Visible = false;
            GridView1.Columns[3].Visible = false;
        }
    }
}

Give a man a fish and you feed him for a day. Teach a man to fish and you feed him forever.

Marked as answer by StephanieD on Jun 22, 2009 06:48 PM

Reply

StephanieD

Member

21 Points

80 Posts

Re: GridView row on multiple lines

Jun 22, 2009 06:28 PM|LINK

Ok, I got it to work for me.

However, now that I see it in action, I don't think this is what I need. I wanted to avoid horizontal scrolling by spreading things out over two lines. But, the columns are where they are and cannot be moved, even if I move the items around between them.

Thanks for your help, I will mark your reply as the answer.

One more quick question.... how do you get your code to paste into the message box so cleanly. When I paste code in, it makes it all double-spaced!

Thanks again.

Reply

ramireddyind...

All-Star

31358 Points

4579 Posts

Re: GridView row on multiple lines

Jun 23, 2009 02:29 AM|LINK

In Edit Profile, In Site Options Tab, set the ContentEditor as "Enhanced"

Now when replying the posts, when you wants to post code, in html editor control, you can see s symbol({ }) with curly braces, which is the last symbol in first row. Click That a windows will open. post your code there. and in below dropdownlist, select which language that code is.

Give a man a fish and you feed him for a day. Teach a man to fish and you feed him forever.

Reply

gabo34

Member

2 Points

1 Post

Re: GridView row on multiple lines

Nov 05, 2012 07:02 PM|LINK

hi Stephanie

i want to do exactly the same thing you wanted to do... you do find the solution?

i have record 1 with col_a col_b col_c col_d col_e col_f

the html i want:

id col_a col_b col_c

col_d col_e col_f

1 a b c

d e f

2 xa xb xc

xd xe xf

regards!

GridView row on multiple lines RSS

6 replies

StephanieD

GridView row on multiple lines

ramireddyind...

Re: GridView row on multiple lines

StephanieD

Re: GridView row on multiple lines

ramireddyind...

Re: GridView row on multiple lines

StephanieD

Re: GridView row on multiple lines

ramireddyind...

Re: GridView row on multiple lines

gabo34

Re: GridView row on multiple lines

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft