I am trying to do it with GridView, because I need to be able to edit these lines, etc. After several hours I figured out how to add a new header row into the GridView, and set the Task and Name column's cell rowspan to achieve the above results.
Inserting a new header row, and adding dynamic number of additional cells to each row (since I don't know how many days will be there design-time)
protected void BacklogGridView_RowDataBound(object sender, GridViewRowEventArgs e) { int cellcount = e.Row.Cells.Count; int days = items[0].Estimates.Count - 1; //items is the business object
GridView gv = sender as GridView; if (e.Row.RowType == DataControlRowType.Header) { for (int i = 0; i <= cellcount - 2; ++i) { e.Row.Cells[i].RowSpan = 2; } e.Row.Cells[cellcount-1].ColumnSpan = days + 1;
if (gv.HasControls()) { GridViewRow tr = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal); for (short i = 0; i <= days; ++i) { TableCell td = new TableCell(); td.Text = i.ToString(); tr.Cells.Add(td); } ((Table)gv.Controls[0]).Rows.Add(tr); } } else if (e.Row.RowIndex != -1) { e.Row.Cells[cellcount - 1].Text = items[e.Row.RowIndex].Estimates[0].ToString();; if (l!=null) l.Text = items[e.Row.RowIndex].Estimates[0].ToString(); for (short i = 1; i <= days; ++i) { TableCell td = new TableCell(); td.Text = items[e.Row.RowIndex].Estimates[i].ToString(); e.Row.Cells.Add(td); } } }
However I am facing some new problems with this. First of all, when I click on a commandfield's edit button, and accept the changes, the rowupdating event won't fire, instead, it jumps to the next row, as if I had clicked the edit there. Secondly,
since I dont know how many days will I have in design time, I have to use the above method to add new cells to each row, corresponding to the number of days from the data source. This leads to a situation, where I have no control over these cells, since they
are just dumb table cells, and cannot be edited in same way as they would be BoundFields. Any ideas?
the second is tricky, let me stew on that. the first i suspect is because you have added the second header everything is off on. that RowIndex is off by one. I onder if you perform a RowIndex-1 on the updates/edit you might find some luck.
Unfortunately, the RowIndex is not the root of the problem, as I could verify that both DataItemIndex and Rowindex gets incremented in for each non-header row, starting from 0.
I wonder if this would work (I've done it for other reasons).
First, you have to change the approach slightly. Have the header rows built separately in a table. Then have the editable gridview in a div tag below the header table. One of the results of doing it this way is you can easily implement the "frozen" header
effect (which may work in your favor). I think this solves any editing issues because the gridview only contains the data. The only downside is the formatting is difficult to align between the header table and the gridview.
this is a multiHeader Function u please folow the link it may help
A fine is a tax for doing wrong. A tax is a fine for doing well.
__________________________________________________
Please remember to click “Mark as Answer” on the post that helps you.
Thanks, I've already found this article, but it doesn't help me. The main problem is how to render dynamic number of columns (the exact number is known only from the data source) so that they are editable, sortable, etc AND have multiple headers for these
columns.
This article only deals with the latter problem. I can solve the first problem too, but I don't see how can I deal with both of them at the same time.
The suggestion to use two tables one for the header and one for the content might do it, but it is quite a hacky solution.
A fine is a tax for doing wrong. A tax is a fine for doing well.
__________________________________________________
Please remember to click “Mark as Answer” on the post that helps you.
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">
gabzsa
0 Points
3 Posts
GridView - trouble with double header row
Dec 29, 2006 01:45 PM|LINK
Hi everyone!
I am trying to make a table with a header something like this:
I am trying to do it with GridView, because I need to be able to edit these lines, etc. After several hours I figured out how to add a new header row into the GridView, and set the Task and Name column's cell rowspan to achieve the above results. Inserting a new header row, and adding dynamic number of additional cells to each row (since I don't know how many days will be there design-time)
However I am facing some new problems with this. First of all, when I click on a commandfield's edit button, and accept the changes, the rowupdating event won't fire, instead, it jumps to the next row, as if I had clicked the edit there. Secondly, since I dont know how many days will I have in design time, I have to use the above method to add new cells to each row, corresponding to the number of days from the data source. This leads to a situation, where I have no control over these cells, since they are just dumb table cells, and cannot be edited in same way as they would be BoundFields. Any ideas?rojay12
Contributor
4065 Points
738 Posts
Re: GridView - trouble with double header row
Dec 30, 2006 01:24 AM|LINK
Lead Application Developer
gabzsa
0 Points
3 Posts
Re: GridView - trouble with double header row
Dec 30, 2006 09:18 AM|LINK
Thanks for the reply.
Unfortunately, the RowIndex is not the root of the problem, as I could verify that both DataItemIndex and Rowindex gets incremented in for each non-header row, starting from 0.
sciszewski
Member
82 Points
21 Posts
Re: GridView - trouble with double header row
Dec 30, 2006 06:18 PM|LINK
I wonder if this would work (I've done it for other reasons).
First, you have to change the approach slightly. Have the header rows built separately in a table. Then have the editable gridview in a div tag below the header table. One of the results of doing it this way is you can easily implement the "frozen" header effect (which may work in your favor). I think this solves any editing issues because the gridview only contains the data. The only downside is the formatting is difficult to align between the header table and the gridview.
etariq
Contributor
2823 Points
514 Posts
Re: GridView - trouble with double header row
Dec 31, 2006 10:05 PM|LINK
http://www.codeproject.com/useritems/TariqMultiHeaderGridview.asp
this is a multiHeader Function u please folow the link it may help
__________________________________________________
Please remember to click “Mark as Answer” on the post that helps you.
gabzsa
0 Points
3 Posts
Re: GridView - trouble with double header row
Jan 01, 2007 02:30 PM|LINK
Thanks, I've already found this article, but it doesn't help me. The main problem is how to render dynamic number of columns (the exact number is known only from the data source) so that they are editable, sortable, etc AND have multiple headers for these columns.
This article only deals with the latter problem. I can solve the first problem too, but I don't see how can I deal with both of them at the same time.
The suggestion to use two tables one for the header and one for the content might do it, but it is quite a hacky solution.
etariq
Contributor
2823 Points
514 Posts
Re: GridView - trouble with double header row
Jan 04, 2007 06:45 AM|LINK
i think it the event that its cozing ur Problems
protected void BacklogGridView_RowDataBound
i think it should be the rowcreated event
try it
__________________________________________________
Please remember to click “Mark as Answer” on the post that helps you.
Moshiur.Rahm...
Member
2 Points
1 Post
Re: GridView - trouble with double header row
Jul 04, 2008 05:14 PM|LINK
Hi,
i have solved the problem in this way-
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <form id=form1 runat="server"> <div><!
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>Untitled Page</title></
head><
body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" BorderWidth="1px" CellPadding="1" CellSpacing="1" ShowHeader="false"> <Columns> <asp:TemplateField HeaderText="Customer ID" Visible="true"> <ItemTemplate> <asp:Label ID="lblCustomerIDItem" BorderWidth="0" runat="server" Text='<%# Bind("CustomerID") %>'></asp:Label> <asp:HiddenField ID="hiddenCustomerID" runat="server" Value='<%# Bind("CustomerID") %>'></asp:HiddenField> </ItemTemplate> <ItemStyle HorizontalAlign="Left" Width="90px" /> </asp:TemplateField>
<asp:TemplateField HeaderText="Name" > <EditItemTemplate> <asp:TextBox ID="txtNameEdit" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblNameItem" runat="server" Text='<%# Bind("Name") %>'></asp:Label> </ItemTemplate> </asp:TemplateField>
<asp:TemplateField HeaderText="Email" > <EditItemTemplate> <asp:TextBox ID="txtEmailEdit" runat="server" Text='<%# Bind("Email") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblEmailItem" runat="server" Text='<%# Bind("Email") %>'></asp:Label> </ItemTemplate> </asp:TemplateField>
<asp:TemplateField HeaderText="Phone Number" > <EditItemTemplate> <asp:TextBox ID="txtPhoneNumberEdit" runat="server" Text='<%# Bind("PhoneNumber") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblPhoneNumberItem" runat="server" Text='<%# Bind("PhoneNumber") %>'></asp:Label> </ItemTemplate> </asp:TemplateField>
<asp:TemplateField ShowHeader="False"> <EditItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" ValidationGroup="NoV" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton> </EditItemTemplate> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form></
body></
html>Default.aspx.cs
using
System;using
System.Data;using
System.Configuration;using
System.Collections;using
System.Web;using
System.Web.Security;using
System.Web.UI;using
System.Web.UI.WebControls;using
System.Web.UI.WebControls.WebParts;using
System.Web.UI.HtmlControls;public
partial class _Default : System.Web.UI.Page{
protected void Page_Load(object sender, EventArgs e){
if (!IsPostBack){
LoadGridView();
}
}
protected void LoadGridView(){
DataSet1.CustomerDataTable dt = (new DataSet1TableAdapters.CustomerTableAdapter()).GetData();GridView1.DataSource = dt;
GridView1.DataBind();
AddExtraHeader();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e){
HiddenField hiddenCustomerID = (HiddenField)GridView1.Rows[e.RowIndex].FindControl("hiddenCustomerID"); TextBox txtNameEdit = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtNameEdit"); TextBox txtEmailEdit = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtEmailEdit"); TextBox txtPhoneNumberEdit = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtPhoneNumberEdit"); (new DataSet1TableAdapters.CustomerTableAdapter()).Update(txtNameEdit.Text, txtEmailEdit.Text, txtPhoneNumberEdit.Text, Int32.Parse(hiddenCustomerID.Value)); this.GridView1.EditIndex = -1; this.LoadGridView();}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e){
this.GridView1.EditIndex = e.NewEditIndex;this.LoadGridView();}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e){
this.GridView1.EditIndex = -1; this.LoadGridView();}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e){
this.LoadGridView();}
public void AddExtraHeader(){
// creating the first row in header SortedList cellSortedList = new SortedList();cellSortedList.Add(
"1", "<h5>ID</h5>,1,2"); cellSortedList.Add("2", "<h5>Customer Name</h5>,1,2");cellSortedList.Add(
"3", "<h5>Contact Information</h5>,2,1"); cellSortedList.Add("4", "<h5></h5>,1,1"); IDictionaryEnumerator enumCells = cellSortedList.GetEnumerator(); GridViewRow row = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);while (enumCells.MoveNext()){
string[] cont = enumCells.Value.ToString().Split(Convert.ToChar(",")); TableCell Cell;Cell =
new TableCell(); Cell.RowSpan = Convert.ToInt16(cont[2].ToString());Cell.ColumnSpan =
Convert.ToInt16(cont[1].ToString()); Cell.Controls.Add(new LiteralControl(cont[0].ToString()));Cell.HorizontalAlign =
HorizontalAlign.Center; Cell.ForeColor = System.Drawing.Color.Black;row.Cells.Add(Cell);
}
GridView1.HeaderRow.Parent.Controls.AddAt(0, row);
// creating the second row in header cellSortedList = new SortedList();cellSortedList.Add(
"1", "<h5>Email</h5>,1,1"); cellSortedList.Add("2", "<h5>Phone Number</h5>,1,1");cellSortedList.Add("3", "<h5></h5>,1,1");enumCells = cellSortedList.GetEnumerator();
row =
new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal); while (enumCells.MoveNext()){
string[] cont = enumCells.Value.ToString().Split(Convert.ToChar(",")); TableCell Cell; Cell = new TableCell();Cell.RowSpan =
Convert.ToInt16(cont[2].ToString()); Cell.ColumnSpan = Convert.ToInt16(cont[1].ToString());Cell.Controls.Add(
new LiteralControl(cont[0].ToString())); Cell.HorizontalAlign = HorizontalAlign.Center;Cell.ForeColor = System.Drawing.Color.Black;row.Cells.Add(Cell);
}
GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
}
}
Thanks,
Moshiur Rahman Reza
</div></form>babuji_godem
Member
109 Points
57 Posts
Re: GridView - trouble with double header row
Feb 24, 2009 06:54 AM|LINK
http://www.codeplex.com/ASPNetRealWorldContr
Human Logic Pvt Ltd.