GridView - trouble with double header row

Rate It (1)

Last post 02-24-2009 2:54 AM by babuji_godem. 8 replies.

Sort Posts:

  • GridView - trouble with double header row

    12-29-2006, 9:45 AM
    • Member
      point Member
    • gabzsa
    • Member since 12-29-2006, 1:20 PM
    • Posts 3

    Hi everyone!

    I am trying to make a table with a header something like this:

     

    +---------------------------+
    | | | Day |
    | Task | Name |-------------|
    | | |0|1|2|3|4|5|6|
    +------+------+-+-+-+-+-+-+-+
    | | | | | | | | | |

       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? 
  • Re: GridView - trouble with double header row

    12-29-2006, 9:24 PM
    • Contributor
      3,803 point Contributor
    • rojay12
    • Member since 04-03-2006, 10:43 PM
    • Sacramento, CA
    • Posts 695
    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.
    Jared Roberts
    Lead Application Developer
  • Re: GridView - trouble with double header row

    12-30-2006, 5:18 AM
    • Member
      point Member
    • gabzsa
    • Member since 12-29-2006, 1:20 PM
    • Posts 3

    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. 

  • Re: GridView - trouble with double header row

    12-30-2006, 2:18 PM
    • Member
      80 point Member
    • sciszewski
    • Member since 11-30-2006, 4:48 AM
    • Scottsdale, AZ
    • Posts 20

    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.


     

  • Re: GridView - trouble with double header row

    12-31-2006, 6:05 PM
    • Contributor
      2,551 point Contributor
    • etariq
    • Member since 11-14-2005, 8:44 AM
    • Amman
    • Posts 457

    http://www.codeproject.com/useritems/TariqMultiHeaderGridview.asp

    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.
  • Re: GridView - trouble with double header row

    01-01-2007, 10:30 AM
    • Member
      point Member
    • gabzsa
    • Member since 12-29-2006, 1:20 PM
    • Posts 3

    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. 

  • Re: GridView - trouble with double header row

    01-04-2007, 2:45 AM
    • Contributor
      2,551 point Contributor
    • etariq
    • Member since 11-14-2005, 8:44 AM
    • Amman
    • Posts 457

    i think it the event that its cozing ur Problems

    protected void BacklogGridView_RowDataBound

    i think it should be the rowcreated event

    try it

     

    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.
  • Re: GridView - trouble with double header row

    07-04-2008, 1:14 PM

    Hi,

    i have solved the problem in this way-

    Default.aspx

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!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

  • Re: GridView - trouble with double header row

    02-24-2009, 2:54 AM
    • Member
      103 point Member
    • babuji_godem
    • Member since 11-20-2007, 6:59 AM
    • Hyderabad
    • Posts 51

     http://www.codeplex.com/ASPNetRealWorldContr

    Babuji Godem
    Human Logic Pvt Ltd.
Page 1 of 1 (9 items)