Scrollable Gridview with Freeze header and sort image.

• Download demo and source - 105.89 KB

Introduction

I was searching for a way to get a scrollable Gridview with a freeze header and I found different ways to do it, but most of them use CSS or JavaScript. What I want to find was a way to do it in the code file. (.CS or .VB)

Here I would try to explain how it could be done with code. (.CS)

Using the Code

You just need to add a Panel control then add a Table and Gridview control inside of Panel control.

in the .CS file you need to add this code:

AddSortDirectionImage Function

 
    /// summary
    ///   Email: Antonio.Suarez@GrupoKino.com
    ///Web Page: http://www.grupoKino.com    
    /// [Español]Funcion que agrega una imagen a la columna ordenada de un gridView 
    /// [English]Function that adds a image to the sorted column.
    /// summary
    /// param name="gridviewID"
    /// [Español]Gridview al cual se le agregara la imagen 
    /// [English]GridView to add sort image
    /// param
    /// param name="itemRow"
    /// [Español]Renglon del gridview al cual se le agrega la imagen 
    /// [English]Row of gridview to add sort image
    /// param

    public void AddSortDirectionImage(GridView gridviewID, GridViewRow itemRow)
    {
        if (gridviewID.AllowSorting == false)
            return;

        Image sortImage = new Image();
        Label space = new Label();

        sortImage.ImageUrl = (
            gridviewID.SortDirection ==
            SortDirection.Ascending ? @"~/sort_asc.gif" : @"~/sort_desc.gif");
        sortImage.Visible = true;
        space.Text = " ";


        for (int i = 0; i < gridviewID.Columns.Count; i++)
        {
            string colExpr = gridviewID.Columns[i].SortExpression;
            if (colExpr != "" && colExpr == gridviewID.SortExpression)
            {
                itemRow.Cells[i].Controls.Add(space);
                itemRow.Cells[i].Controls.Add(sortImage);
            }
        }
    }

And FreezeGridviewHeader Function

 

    /// summary
    ///  Author: Antonio Suarez
    ///   Email: Antonio.Suarez@GrupoKino.com
    ///Web Page: http://www.grupoKino.com    
    /// [Español]Funcion que copia el header de un gridview a un control tipo Table 
    /// [English]Function that copy a gridview header to a table control.
    /// summary
    /// param name="_gv1"
    /// [Español]Gridview del cual se copiara el encabezado.
    /// [English]GridView from where the header row will be copied
    /// param
    /// param name="_tb1"
    /// [Español]Renglon del gridview al cual se le agrega la imagen 
    /// [English]Row of gridview to add sort image
    /// 
    /// param name="_pc1"
    /// [Español]Panel que contendra tanto al gridview como al control table
    /// [English]Panel container of the gridview and table control.   
    /// param    
    protected void FreezeGridviewHeader(GridView _gv1, Table _tb1,Panel _pc1)
    {
        Page.EnableViewState = false;

        //[Español]Copiando las propiedades del renglon de encabezado
        //[English]Copying a header row data and properties    
        _tb1.Rows.Add(_gv1.HeaderRow);
        _tb1.Rows[0].ControlStyle.CopyFrom(_gv1.HeaderStyle);
        _tb1.CellPadding = _gv1.CellPadding;
        _tb1.CellSpacing = _gv1.CellSpacing;
        _tb1.BorderWidth = _gv1.BorderWidth;

        //if (!_gv1.Width.IsEmpty)
        //_gv1.Width = Unit.Pixel(Convert.ToInt32(_gv1.Width.Value) + Convert.ToInt32(
        //    _tb1.Width.Value) + 13);

        //[Español]Copiando las propiedades de cada celda del nuevo encabezado.
        //[English]Copying  each cells properties to the new header cells properties
        int Count = 0;
        _pc1.Width = Unit.Pixel(100);
        for (Count = 0; Count < _gv1.HeaderRow.Cells.Count - 1; Count++)
        {
            _tb1.Rows[0].Cells[Count].Width = _gv1.Columns[Count].ItemStyle.Width;
            _tb1.Rows[0].Cells[Count].BorderWidth = 
                _gv1.Columns[Count].HeaderStyle.BorderWidth;
            _tb1.Rows[0].Cells[Count].BorderStyle = 
                _gv1.Columns[Count].HeaderStyle.BorderStyle;
            _pc1.Width = Unit.Pixel(Convert.ToInt32(
                _tb1.Rows[0].Cells[Count].Width.Value) +
                Convert.ToInt32(_pc1.Width.Value) + 14);
        }
        //Panel1.Width = Unit.Pixel(Convert.ToInt32(
        //    _tb1.Rows[0].Cells[Count-1].Width.Value) + 12);
    }

Points of Interest

The point here is that it should work in the most of the graphical browser and we will not have to add fix for each browser compatibility.

History

We need to add edit functionality. I hope all this could be useful for you, if this work fine.

Other thing, if you have a page please add my web page link http://www.grupoKino.com


Antonio Suarez.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 23 of 23 (Total in Forum: 23) (Refresh) FirstPrevNext

Works with a static grid... Pak514 10:11 13 Dec '08   Doesn't work with horizontal scrolling or a dynamic grid with a large number of columns. Basically useless. Sign In·View Thread·PermaLink Very bad solution nsimeonov 15:53 5 Dec '08   Creating 2 tables with fixed column widths is basically wishful thinking. You cannot set width: 100% because then header and data columns will have different widths. This seems like working but is a terrible solution. There are way better ones on the net. Sign In·View Thread·PermaLink Re: Very bad solution Antonio Suarez 16:23 5 Dec '08   Hello nsimeonov, It is just another way, you have the last word. But, thanks you, for the time answering. Antonio. Antonio Suarez Sign In·View Thread·PermaLink My vote of 1 nsimeonov 15:51 5 Dec '08   Very bad solution! You are obligated to set column widths and we all know rendering html doesn't always stick to what you set. DO NOT USE THIS CODE! Sign In·View Thread·PermaLink Its not working?????? Nitish.1127 18:49 2 Nov '08   Hii, This code is not working show error??????? code is here....... ///where sorting is Occur and this function is called if (gridview1.Rows.Count != 0) { Table tab1 = new Table(); FreezeHeader(gvTable,tab1,Panel1); } ///the function is here........ protected void FreezeHeader(GridView _gv, Table _tbl, Panel _pnl) { Page.EnableViewState = false; _tbl.Rows.Add(_gv.HeaderRow); _tbl.Rows[0].ControlStyle.CopyFrom(_gv.HeaderStyle); _tbl.CellPadding = _gv.CellPadding; _tbl.CellSpacing = _gv.CellSpacing; _tbl.BorderWidth = _gv.BorderWidth; int count=0; _pnl.Width = Unit.Pixel(660); for(count=0;count<_gv.HeaderRow.Cells.Count-1;count++) { _tbl.Rows[0].Cells[count].Width = _gv.Columns[count].ItemStyle.Width; //error in this line error is-------- ///Index was out of range. Must be non-negative and less than the size of the collection. ///Parameter name: index _tbl.Rows[0].Cells[count].BorderWidth = _gv.Columns[count].HeaderStyle.BorderWidth; _tbl.Rows[0].Cells[count].BorderStyle = _gv.Columns[count].HeaderStyle.BorderStyle; _pnl.Width = Unit.Pixel(Convert.ToInt32(_tbl.Rows[0].Cells[count].Width.Value) + Convert.ToInt32(_pnl.Width.Value) + 14); } } Sign In·View Thread·PermaLink Here I am posted the small and workable C# code which work with the panel also Nitish.1127 0:25 3 Nov '08   if (gridview1.Rows.Count != 0) { gridview1.HeaderRow.Style.Add("position", "relative"); gridview1.HeaderRow.Style.Add("z-index", "10"); gridview1.HeaderRow.Style.Add("top", "expression(this.offsetParent.scrollTop-3)"); Panel1.Style.Add("overflow", "auto"); } Response.Write("Inside:"); ///last line for the panel where gridview is set. it also works with dynamic gridvirw Sign In·View Thread·PermaLink 2.00/5 (1 vote) it won't work imran prasla 9:09 24 Sep '08   the freeze headers will not work if you use pagerTemplate in the gridview Sign In·View Thread·PermaLink Re: it won't work Antonio Suarez 9:21 24 Sep '08   Hello imran prasla, I do not made this to use paging because the freeze header, so I did not test using pageTemplate, maybe you could fix it and send me the code to update the article. In what way do you want to use the article, maybe I could help you? Thank you. Antonio Suarez Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: it won't work imran prasla 4:36 25 Sep '08   I have a gridview where i am populating more than 1000 records. I have my own custom pager for gridview where I display page numbers and records count etc. If I use the freeze header technique that you discussed in your article, it will only freeze the headers and upon scrolling it will scroll page numbers' portion along with other rows as well. If you know a way of freezing headers with pager area (that uses the PagerTemplate) then do let me know. Apart from that the article is very good. Sign In·View Thread·PermaLink Re: it won't work Antonio Suarez 6:17 25 Sep '08   I think you could "clone" the pager row, as I do with the header, and put out side of the panel where the gridview is. Thank you. Antonio Suarez Sign In·View Thread·PermaLink aspx page coding for freeze???????? qtrmile69 9:21 1 Aug '08   I am kinda a newbie at all this ....so what would the code look like you have to add in the aspx page .... Thanks ....Brian qtrmile69@hotmail.com Sign In·View Thread·PermaLink 2.00/5 (1 vote) addtl.....: aspx page coding for freeze???????? qtrmile69 9:23 1 Aug '08   Just for the freezing portion Sign In·View Thread·PermaLink 1.00/5 (1 vote) Edit functionality scott.m.owen@hotmail.com 8:43 24 Jul '08   I was able to get edit mode to work by removing the following line from the FreezeGridviewHeader function: Page.EnableViewState = false; I then added the edit command manually to the datagrid; setting the width to be long enough to handle the update and cancel commands when the edit button is clicked: <asp:CommandField ShowEditButton="true" ItemStyle-Width="200px" /> I then adjusted the width of the container panel to match the width of all the columns. It would be nice however, to figure out the size of the columns at runtime though. This would make it much easier to make changes, and allow for dynamic column widths. Thanks Antonio, this is a very elegant solution without having to get mixed up in the css maze of different browsers. Sign In·View Thread·PermaLink Re: Edit functionality Antonio Suarez 21:29 24 Jul '08   Hello Scott, I will update the files with your suggestions. Yes i did the same with the columns width in a project, but I hope we can find the way to do it at runtime. Thank you. Antonio Suarez Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Edit functionality tommymro 9:02 21 Nov '08   I continued to have problems with trying to get the edit mode to work. If I removed the Page.EnableViewState = false line, my grid would not freeze the header. I modified the code to _pc1.EnableViewState = false; to set the panel's view state to false. I then created my own methods to edit and write the data changes back from the datagrid. I needed to remove the Page.EnableViewstate line because it was affecting other controls on my page. This does not completely solve the Edit funtionality question, but it certainly accomplished what I needed done. Thank you Antonio for providing this solution, and thanks Scott for pointing me in the right direction. Sign In·View Thread·PermaLink Two identical header rows scottlis 3:19 27 Jun '08   I am getting two identical header rows on sort and edit. Any ideas? Sign In·View Thread·PermaLink Re: Two identical header rows Antonio Suarez 21:45 24 Jul '08   Hello Scottlis, Sorry if i make you wait for an answer, but I did not see the e-mail. You are using the edit mode, check the scott.m.owen@hotmail.com comments and use his modifications to fix the two headers problem. Thank You. Antonio Suarez Sign In·View Thread·PermaLink [Message Removed] Mojtaba Vali 23:10 23 May '08   Spam message removed Sign In·View Thread·PermaLink 1.00/5 (1 vote) Improvements Helmar Dahmer 12:54 23 May '08   Good job! And it looks perfect when a few improvements have been executed: default.aspx: attribute Height for PanelGridViewData to 204px attribute ScrollBars for PanelContainer to None default.cs: add 2 lines after for{...} in function FreezeGridviewHeader: _tb1.Rows[0].Cells[_gv1.HeaderRow.Cells.Count - 1].Width = Unit.Pixel(Convert.ToInt32(_gv1.Columns[_gv1.HeaderRow.Cells.Count - 1].ItemStyle.Width.Value) ); _pc1.Width = Convert.ToInt32(_pc1.Width.Value -4); Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Improvements Antonio Suarez 13:20 23 May '08   Thank you Helmar, I did your improvements and it works perfectly. Did you try on edit mode? Antonio Suarez Sign In·View Thread·PermaLink Re: Improvements Member 3111816 14:08 5 Nov '08   Dear expert. This works great. Thank you so much. However, I hit one problem. My web page has a formview and a gridview. After I added your functions to fix the gridview headers, the gridview worked fine; however, the UpdateButton stopped to work when clicked 1st time in the formview. I found it is due to the "Page.EnableViewState = false;" in your function. Removing this line solves the clicking problem of the formview update button, but then the headers will not fixed after post-back. Is there a workaround for this? Thanks! ChuChu Sign In·View Thread·PermaLink 2.00/5 (1 vote) Minor Point Oakman 16:22 14 May '08   in your remarks it should be copying, not coping Jon Smith & Wesson: The original point and click interface Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Minor Point Antonio Suarez 20:01 14 May '08   You are right, i will fix it. Thank you Oakman. Did it work for you? Antonio Suarez Sign In·View Thread·PermaLink 5.00/5 (1 vote)

Last Visit: 17:23 5 Jul '09     Last Update: 17:23 5 Jul '09 1