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.
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.
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!
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.
StephanieD
Member
21 Points
80 Posts
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.
ramireddyind...
All-Star
31358 Points
4579 Posts
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>
<tr> <td></td><td></td><td></td><td></td><td></td></tr>
<tr> <td></td><td></td><td></td><td></td><td></td></tr>
</table>
in between ech td, place one field.
you can do same also in gridview.
StephanieD
Member
21 Points
80 Posts
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">
<Columns> <asp:TemplateField HeaderText=""> <ItemTemplate> <asp:LinkButton CommandName="Edit" Text="Edit" ID="btnEdit" Runat="server"></asp:LinkButton></
ItemTemplate> <EditItemTemplate> <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">
<EditItemTemplate> <asp:DropDownList ID="DropDownListMT" runat="server" DataSource='<%# GrabADataView2() %>' DataTextField = "MeetingTypes" DataValueField= "MeetingTypes" Font-Size="8pt" > </asp:DropDownList> </EditItemTemplate> <ItemStyle Width="50px" HorizontalAlign="Center" /> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"MeetingType") %>'></asp:Label> </ItemTemplate></
asp:TemplateField>
<asp:TemplateField HeaderText="Date Initiated" SortExpression="DateInitiated" > <EditItemTemplate> <asp:TextBox ID="TextBox2" Font-Size="X-Small" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"DateInitiated", "{0:d}") %>'></asp:TextBox><
/EditItemTemplate> <ItemTemplate> <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"DateInitiated", "{0:d}") %>'></asp:Label> </ItemTemplate> <ControlStyle Width="56px" /> <ItemStyle HorizontalAlign="Center" /> </asp:TemplateField>
</Columns> <EditRowStyle Font-Size="X-Small" /> <HeaderStyle BackColor="MediumAquamarine" Font-Size="Small" Height="40px" HorizontalAlign="Center" VerticalAlign="Middle" /></
asp:GridView>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; } } }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.
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.
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!