Gridview with row headers

Question

I am using the ASP.NET3.5 gridview control in a new project. My problem is that the gridview presents data in basic tabular format, whereas I want a grid with row header / grouping behaviors. An example of this would be Outlook web interface, which can group emails by date, as well as allowing you to select individual emails to display.

My problem: I can't see how this could be easily done with Gridview? I did find a product called Telerik that has a seemingly fancy Gridview, but I am hesitant to spend money on a single components that now also locks me into a third-party framework...

Answer 1

Asp.Net GridView control is part of data control family in Asp.Net server controls.Its best used for display of tabular data.Effects like grouping of rows etc are by by default not supported.Like you have mentioned , there are third party vendors in market who offer controls with these extra features.

Most of the time with asp.net server controls , providing an out of box feature requires creation of custom control by inheriting from the original one.Say for e.g. if you need sorting on all columns of gridview and also you need to highlight the currently selected column , then its best done by creating your own control which inturn inherit from Asp.Net GridView control.There are resources on net which explains on how this can be done.

Answer 2

Hey,

For a grouping feature, check out this example: http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html

This thing can be more easily done with a ListView than a GridView.

Answer 3

I remember struggling with such a problem before and I can sympathise with the lack of help out there on the topic so if you want a gridview, this is how you can do it:

Add the OnRowDataBound event to your gridview:

OnRowDataBound="grv_RowDataBound"

Add something like this to your code behind:

private DateTime currentDate;
private int extraCount;

protected void grv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //assuming the cell with index 5 is the cell with the Date in it
        if (currentDate != DateTime.Parse(e.Row.Cells[5].Text))
        {
            //making a header row (so it looks different to the other rows)
            var row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
            var headerCell = new TableHeaderCell();
            headerCell.ColumnSpan = 3; //however many columns you have in your gridview
            headerCell.Text = e.Row.Cells[5].Text;
            row.Cells.Add(headerCell);
            currentDate = DateTime.Parse(e.Row.Cells[5].Text);
            extraCount++;
            grvMortgages.Controls[0].Controls.AddAt(e.Row.RowIndex + extraCount, row);
        }
    }
}