Click here to Skip to main content
11,648,785 members (85,888 online)
Click here to Skip to main content

Scrollable Gridview with Freeze header and sort image.

, 14 May 2008 CPOL 116.3K 4.4K 83
Rate this:
Please Sign up or sign in to vote.
this is an easy way to get Freeze GridView header and add image sort. And it works on IE,Firefox and Others. work inside and outside of updatepanel.

AntonioSuarez_gridview_ff.JPGAntonioSuarez_gridview_ie.JPG

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Antonio Suarez
Web Developer Health Company
Mexico Mexico
Working as:
Web Developer.

Free Time:
Web Developer.



message.
Espero no esperar y mientras mas espero, espero que esperar.

You may also be interested in...

Comments and Discussions

 
Questioncan not dim as new image Pin
Member 834559923-May-14 10:53
memberMember 834559923-May-14 10:53 
GeneralMy vote of 1 Pin
Sanjay K. Gupta29-Aug-12 0:20
memberSanjay K. Gupta29-Aug-12 0:20 
GeneralMy vote of 3 Pin
Vinayak B15-Feb-12 20:08
memberVinayak B15-Feb-12 20:08 
GeneralMy vote of 1 Pin
deveshbhattacharya17-Oct-10 3:04
memberdeveshbhattacharya17-Oct-10 3:04 
GeneralWorks with a static grid... Pin
Pak51413-Dec-08 9:11
memberPak51413-Dec-08 9:11 
GeneralVery bad solution Pin
nsimeonov5-Dec-08 14:53
membernsimeonov5-Dec-08 14:53 
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.
GeneralRe: Very bad solution Pin
Antonio Suarez5-Dec-08 15:23
memberAntonio Suarez5-Dec-08 15:23 
GeneralMy vote of 1 Pin
nsimeonov5-Dec-08 14:51
membernsimeonov5-Dec-08 14:51 
QuestionIts not working?????? Pin
Nitish.11272-Nov-08 17:49
memberNitish.11272-Nov-08 17:49 
AnswerHere I am posted the small and workable C# code which work with the panel also Pin
Nitish.11272-Nov-08 23:25
memberNitish.11272-Nov-08 23:25 
Generalit won't work Pin
imran prasla24-Sep-08 8:09
memberimran prasla24-Sep-08 8:09 
GeneralRe: it won't work Pin
Antonio Suarez24-Sep-08 8:21
memberAntonio Suarez24-Sep-08 8:21 
GeneralRe: it won't work Pin
imran prasla25-Sep-08 3:36
memberimran prasla25-Sep-08 3:36 
GeneralRe: it won't work Pin
Antonio Suarez25-Sep-08 5:17
memberAntonio Suarez25-Sep-08 5:17 
GeneralRe: it won't work Pin
kirtiarora1-Mar-12 17:01
memberkirtiarora1-Mar-12 17:01 
GeneralEdit functionality Pin
scott.m.owen@hotmail.com24-Jul-08 7:43
memberscott.m.owen@hotmail.com24-Jul-08 7:43 
GeneralRe: Edit functionality Pin
Antonio Suarez24-Jul-08 20:29
memberAntonio Suarez24-Jul-08 20:29 
GeneralRe: Edit functionality Pin
tommymro21-Nov-08 8:02
membertommymro21-Nov-08 8:02 
GeneralTwo identical header rows Pin
scottlis27-Jun-08 2:19
memberscottlis27-Jun-08 2:19 
GeneralRe: Two identical header rows Pin
Antonio Suarez24-Jul-08 20:45
memberAntonio Suarez24-Jul-08 20:45 
General[Message Removed] Pin
Mojtaba Vali23-May-08 22:10
memberMojtaba Vali23-May-08 22:10 
GeneralImprovements Pin
Helmar Dahmer23-May-08 11:54
memberHelmar Dahmer23-May-08 11:54 
GeneralRe: Improvements Pin
Antonio Suarez23-May-08 12:20
memberAntonio Suarez23-May-08 12:20 
GeneralRe: Improvements Pin
Member 31118165-Nov-08 13:08
memberMember 31118165-Nov-08 13:08 
GeneralMinor Point Pin
Oakman14-May-08 15:22
memberOakman14-May-08 15:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150804.4 | Last Updated 14 May 2008
Article Copyright 2008 by Antonio Suarez
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid