Freezing (Locking) columns in SPGridView

Question

I'have seen many examples with freezing columns in SPGridView, but I have no idea, why none of them doesn't work for me. I mean - there is no frozing.

I will be gratefull for a look at my code.

Below are pieces of code, which are ready to launch. It has to works on IE 8+ (other browsers don't matter).

I'll give a 100 points for solution which will work.

style

/* Locks the left column */

td.locked, th.locked {

font-size: 7pt;

text-align: left;

background-color:inherit;

color:Black;

position:relative;

cursor: default;

left: expression(document.getElementById("div-datagrid").scrollLeft-2); /*IE5+ only*/

}

/* Locks table header */

th {

font-size: 7pt;

font-weight: bold;

text-align: center;

background-color: navy;

color: white;

height:15pt;

border-right: 1px solid silver;

position:relative;

cursor: default;

top: expression(document.getElementById("div-datagrid").scrollTop-2); /*IE5+ only*/

z-index: 10;
}


/*
div#div-datagrid {
width: 420px;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}
*/
/*
.container 
{
    overflow:auto;
    margin-left:10px;
    height:300px; 
    width:710px;
 }
*/

div#div-datagrid {
width: 500px;
height: 300px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}

/* Locks table header */
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*IE5+ only*/
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;}

/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial;
             background-color:#ffffff; height:35px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial;
             background-color:#eeeeee; height:35px;}

codebehind:

using System;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

    namespace MySPGridView.VisualWebPart1
    {
        [ToolboxItemAttribute(false)]
        public class VisualWebPart1 : WebPart
        {
            // Visual Studio might automatically update this path when you change the Visual Web Part project item.
            private const string _ascxPath = @"~/_CONTROLTEMPLATES/FirstSPGridView/SPGridViewWebPartTest/VisualWebPart1UserControl.ascx";

            SPGridView _grid;


            private ObjectDataSource gridDS;




            protected override void CreateChildControls()
            {

                base.CreateChildControls();
                try
                {
                    SPSite mySite = SPContext.Current.Site;
                    SPWeb myWeb = mySite.OpenWeb();

                    //Using RunWithElevatedPrivileges

                    SPSecurity.RunWithElevatedPrivileges(delegate()
                    {
                        using (SPSite siteCollection = new SPSite(mySite.ID))
                        {
                            using (SPWeb web = siteCollection.OpenWeb(myWeb.ID))
                            {
                                const string GRIDID = "grid";
                                const string DATASOURCEID = "gridDS";

                                gridDS = new ObjectDataSource();
                                gridDS.ID = DATASOURCEID;
                                gridDS.SelectMethod = "SelectData";
                                gridDS.TypeName = this.GetType().AssemblyQualifiedName;
                                gridDS.ObjectCreating += new ObjectDataSourceObjectEventHandler(gridDS_ObjectCreating);

                                this.Controls.Add(gridDS);

                                _grid = new SPGridView();
                                _grid.RowDataBound += GridView1_RowDataBound;
                                _grid.AutoGenerateColumns = false;
                                _grid.ID = GRIDID;
                                _grid.DataSourceID = gridDS.ID;
                                _grid.AutoGenerateColumns = false;

                                HtmlGenericControl div = new HtmlGenericControl("div");
                                div.Attributes.Add("id", "div-datagrid");

                                div.Controls.Add(_grid);
                                Controls.Add(div);


                            }
                        }
                    });
                }
                catch (Exception ex)
                {
                    throw new NotImplementedException();
                }


            }


            protected sealed override void LoadViewState(object savedState)
            {
                base.LoadViewState(savedState);

            }

            private void gridDS_ObjectCreating(object sender, ObjectDataSourceEventArgs e)
            {
                e.ObjectInstance = this;
            }

            protected override void OnPreRender(EventArgs e)
            {

                CssRegistration css = new CssRegistration();
                css.After = "corev4.css";

                css.Name = "CustomStyle.css";
                this.Controls.Add(css);
            }


            protected sealed override void Render(HtmlTextWriter writer)
            {
                try
                {
                    GenerateColumns();
                    _grid.DataBind();
                    LockColumns();
                    base.Render(writer);
                }
                catch (Exception e)
                {
                    throw new NotImplementedException();
                }
            }


            private void GenerateColumns()
            {

                BoundField clientNameColumn = new BoundField();
                clientNameColumn.HeaderText = "Client";
                clientNameColumn.DataField = "LastName";
                clientNameColumn.SortExpression = "LastName";
                _grid.Columns.Add(clientNameColumn);


                BoundField birthDayColumn = new BoundField();
                birthDayColumn.HeaderText = "BirthDate";
                birthDayColumn.DataField = "BirthDate";
                birthDayColumn.DataFormatString = "{0:d}";

                birthDayColumn.SortExpression = "BirthDate";
                _grid.Columns.Add(birthDayColumn);

                BoundField FrenchOccupationColumn = new BoundField();
                FrenchOccupationColumn.HeaderText = "FrenchOccupation";
                FrenchOccupationColumn.DataField = "FrenchOccupation";
                FrenchOccupationColumn.SortExpression = "FrenchOccupation";
                _grid.Columns.Add(FrenchOccupationColumn);

                BoundField HouseOwnerFlagColumn = new BoundField();
                HouseOwnerFlagColumn.HeaderText = "HouseOwnerFlag";
                HouseOwnerFlagColumn.DataField = "HouseOwnerFlag";
                HouseOwnerFlagColumn.SortExpression = "HouseOwnerFlag";
                _grid.Columns.Add(HouseOwnerFlagColumn);

                BoundField NumberCarsOwnedColumn = new BoundField();
                NumberCarsOwnedColumn.HeaderText = "NumberCarsOwned";
                NumberCarsOwnedColumn.DataField = "NumberCarsOwned";
                NumberCarsOwnedColumn.SortExpression = "NumberCarsOwned";
                _grid.Columns.Add(NumberCarsOwnedColumn);

                BoundField AddressLine1Column = new BoundField();
                AddressLine1Column.HeaderText = "AddressLine1";
                AddressLine1Column.DataField = "AddressLine1";
                AddressLine1Column.SortExpression = "AddressLine1";
                _grid.Columns.Add(AddressLine1Column);

                BoundField AddressLine2Column = new BoundField();
                AddressLine2Column.HeaderText = "AddressLine2";
                AddressLine2Column.DataField = "AddressLine2";
                AddressLine2Column.SortExpression = "AddressLine2";
                _grid.Columns.Add(AddressLine2Column);

                BoundField AddressLine3Column = new BoundField();
                AddressLine3Column.HeaderText = "AddressLine3";
                AddressLine3Column.DataField = "AddressLine3";
                AddressLine3Column.SortExpression = "AddressLine3";
                _grid.Columns.Add(AddressLine3Column);

                BoundField AddressLine4Column = new BoundField();
                AddressLine4Column.HeaderText = "AddressLine4";
                AddressLine4Column.DataField = "AddressLine4";
                AddressLine4Column.SortExpression = "AddressLine4";
                _grid.Columns.Add(AddressLine4Column);

                BoundField AddressLine5Column = new BoundField();
                AddressLine5Column.HeaderText = "AddressLine5";
                AddressLine5Column.DataField = "AddressLine5";
                AddressLine5Column.SortExpression = "AddressLine5";
                _grid.Columns.Add(AddressLine5Column);

                BoundField AddressLine6Column = new BoundField();
                AddressLine6Column.HeaderText = "AddressLine6";
                AddressLine6Column.DataField = "AddressLine6";
                AddressLine6Column.SortExpression = "AddressLine6";
                _grid.Columns.Add(AddressLine6Column);

                BoundField AddressLine7Column = new BoundField();
                AddressLine7Column.HeaderText = "AddressLine7";
                AddressLine7Column.DataField = "AddressLine7";
                AddressLine7Column.SortExpression = "AddressLine7";
                _grid.Columns.Add(AddressLine7Column);

                BoundField AddressLine8Column = new BoundField();
                AddressLine8Column.HeaderText = "AddressLine8";
                AddressLine8Column.DataField = "AddressLine8";
                AddressLine8Column.SortExpression = "AddressLine8";
                _grid.Columns.Add(AddressLine8Column);

                BoundField AddressLine9Column = new BoundField();
                AddressLine9Column.HeaderText = "AddressLine9";
                AddressLine9Column.DataField = "AddressLine9";
                AddressLine9Column.SortExpression = "AddressLine9";
                _grid.Columns.Add(AddressLine9Column);

                BoundField AddressLine10Column = new BoundField();
                AddressLine10Column.HeaderText = "AddressLine10";
                AddressLine10Column.DataField = "AddressLine10";
                AddressLine10Column.SortExpression = "AddressLine10";
                _grid.Columns.Add(AddressLine10Column);

                BoundField AddressLine11Column = new BoundField();
                AddressLine11Column.HeaderText = "AddressLine11";
                AddressLine11Column.DataField = "AddressLine11";
                AddressLine11Column.SortExpression = "AddressLine11";
                _grid.Columns.Add(AddressLine11Column);

                BoundField AddressLine12Column = new BoundField();
                AddressLine12Column.HeaderText = "AddressLine12";
                AddressLine12Column.DataField = "AddressLine12";
                AddressLine12Column.SortExpression = "AddressLine12";
                _grid.Columns.Add(AddressLine12Column);

                BoundField AddressLine13Column = new BoundField();
                AddressLine13Column.HeaderText = "AddressLine13";
                AddressLine13Column.DataField = "AddressLine13";
                AddressLine13Column.SortExpression = "AddressLine13";
                _grid.Columns.Add(AddressLine13Column);

                BoundField AddressLine14Column = new BoundField();
                AddressLine14Column.HeaderText = "AddressLine14";
                AddressLine14Column.DataField = "AddressLine14";
                AddressLine14Column.SortExpression = "AddressLine14";
                _grid.Columns.Add(AddressLine14Column);



            }

            private void LockColumns()
            {

                //_grid.Columns[0].HeaderStyle.CssClass = "FrozenHeader";
                //_grid.Columns[1].HeaderStyle.CssClass = "FrozenHeader";
                //_grid.Columns[2].HeaderStyle.CssClass = "FrozenHeader";
                //_grid.Columns[3].HeaderStyle.CssClass = "FrozenHeader";
                //_grid.Columns[4].HeaderStyle.CssClass = "FrozenHeader";

                //_grid.Columns[1].HeaderStyle.CssClass = "FrozenHeader";
                //_grid.Columns[1].HeaderStyle.CssClass = "FrozenCell";

                //_grid.HeaderRow.Cells[0].CssClass = "locked";

                //_grid.HeaderRow.Cells[1].CssClass = "locked";

                //_grid.HeaderRow.Cells[2].CssClass = "locked";

                foreach (GridViewRow row in _grid.Rows)
                {
                    //if (row.RowType == DataControlRowType.DataRow)
                    //{

                    //row.Cells[0].CssClass = "FrozenCell";
                    //row.Cells[1].CssClass = "FrozenCell";
                    //row.Cells[2].CssClass = "FrozenCell";
                    //row.Cells[3].CssClass = "FrozenCell";
                    //row.Cells[4].CssClass = "FrozenCell";

                    //row.Cells[0].CssClass = "locked";
                    //row.Cells[0].CssClass = "locked";

                    //row.Cells[1].CssClass = "locked";

                    //row.Cells[2].CssClass = "locked";
                    //}
                }


            }


            public DataTable SelectData()
            {
                #region hardcoded data
                //DataTable dataSource = new DataTable();

                //dataSource.Columns.Add("ID");
                //dataSource.Columns.Add("Name");
                //dataSource.Columns.Add("Region");
                //dataSource.Columns.Add("Total Sales");

                //dataSource.Rows.Add(1, "J. Smith", "Europe", 10000);
                //dataSource.Rows.Add(2, "J. Smith", "North America", 15000);
                //dataSource.Rows.Add(3, "J. Smith", "Asia", 5000);
                //dataSource.Rows.Add(4, "S. Jones", "Europe", 7000);
                //dataSource.Rows.Add(5, "S. Jones", "North America", 30000);
                //dataSource.Rows.Add(6, "S. Jones", "Asia", 8700);
                //dataSource.Rows.Add(7, "W. Nguyen", "Europe", 3000);
                //dataSource.Rows.Add(8, "W. Nguyen", "North America", 50000);
                //dataSource.Rows.Add(9, "W. Nguyen", "Asia", 25000);
                //return dataSource;

                #endregion
                var dataGet = new DataTable();
                SPSecurity.RunWithElevatedPrivileges(delegate()
                                                         {
                                                             using (
                                                                 var conn =
                                                                     new SqlConnection(
                                                                         "Data Source=localhost;Initial Catalog=AdventureWorksDW2008R2;Integrated Security=True")
                                                                 )
                                                             {
                                                                 var adapter = new SqlDataAdapter();
                                                                 //adapter.SelectCommand =
                                                                 //    new SqlCommand("Select TOP 100 LastName,Birthdate,FirstName FROM DimCustomer WHere firstName like 'A%'");
                                                                 //adapter.SelectCommand =
                                                                 //    new SqlCommand("Select TOP 20 LastName,Birthdate,'FirstName_1' as FirstName FROM DimCustomer WHere firstName like 'A%' UNION ALL Select TOP 20 LastName,Birthdate,'FirstName_2' as FirstName FROM DimCustomer WHere firstName like 'B%'");
                                                                 adapter.SelectCommand =
                                                                     new SqlCommand("Select TOP 20 LastName,Birthdate,'FirstName_1' as FirstName,FrenchOccupation,HouseOwnerFlag,NumberCarsOwned,AddressLine1,AddressLine2,Phone,DateFirstPurchase,CommuteDistance, 'adressssss3' as AddressLine3,'adressssss4' as AddressLine4,'adressssss5' as AddressLine5,'adressssss6' as AddressLine6,'adressssss7' as AddressLine7,'adressssss8' as AddressLine8,'adressssss9' as AddressLine9,'adressssss10' as AddressLine10,'adressssss11' as AddressLine11,'adressssss12' as AddressLine12,'adressssss13' as AddressLine13,'adressssss14' as AddressLine14   FROM DimCustomer WHere firstName like 'A%' UNION ALL Select TOP 20 LastName,Birthdate,'FirstName_2' as FirstName,FrenchOccupation,HouseOwnerFlag,NumberCarsOwned,AddressLine1,AddressLine2,Phone,DateFirstPurchase,CommuteDistance, 'adressssss3' as AddressLine3,'adressssss4' as AddressLine4,'adressssss5' as AddressLine5,'adressssss6' as AddressLine6,'adressssss7' as AddressLine7,'adressssss8' as AddressLine8,'adressssss9' as AddressLine9,'adressssss10' as AddressLine10,'adressssss11' as AddressLine11,'adressssss12' as AddressLine12,'adressssss13' as AddressLine13,'adressssss14' as AddressLine14  FROM DimCustomer WHere firstName like 'B%'");
                                                                 adapter.SelectCommand.Connection = conn;
                                                                 conn.Open();

                                                                 adapter.Fill(dataGet);

                                                             }
                                                         });

                dataGet.Columns["Birthdate"].DataType = System.Type.GetType("System.DateTime");

                return dataGet;


            }

            protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    if (e.Row.Cells.Count > 1)
                    {

                        _grid.HeaderRow.Cells[0].CssClass = "locked";
                        e.Row.Cells[0].CssClass = "locked";
                    }
                }
            }
        }
    }

view:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs"
    Inherits="FirstSPGridView.VisualWebPart1.VisualWebPart1UserControl" %>
<%@ Register TagPrefix="MySPGridView" Namespace="MySPGridView" %>

I output I have

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Answer 1

The problem you are facing (based on the example site you linked) is that the "working version" on the web only works in Quirks Mode, but your SharePoint 2010 page won't even open in Quirks Mode if you force that on the Master Page.

If you are able to use jQuery you can easily create a duplicate of the first column (if you want the first column), I'll play around with some code and with edit this later.

EDIT w/ solution: http://jsfiddle.net/q48dS/

EDIT2: On your Visual Web Part:

<div id="container">
<SharePoint:SPGridView runat="server" DataSource="<%# Items %>" ShowHeader="true"
    AutoGenerateColumns="False" ID="tbl" Visible="false">
    <Columns>
      <asp:BoundField DataField="Column0" HeaderText="Column0" />
      <asp:BoundField DataField="Column1" HeaderText="Column1" />
      <asp:BoundField DataField="Column2" HeaderText="Column2" />
      <asp:BoundField DataField="Column3" HeaderText="Column3" />
      <asp:BoundField DataField="Column4" HeaderText="Column4" />
      <asp:BoundField DataField="Column5" HeaderText="Column5" />
      <asp:BoundField DataField="Column6" HeaderText="Column6" />
      <asp:BoundField DataField="Column7" HeaderText="Column7" />
      <asp:BoundField DataField="Column8" HeaderText="Column8" />
      <asp:BoundField DataField="Column9" HeaderText="Column9" />
      <asp:BoundField DataField="Column10" HeaderText="Column10" />
      <asp:BoundField DataField="Column11" HeaderText="Column11" />
    </Columns>
  </SharePoint:SPGridView>
  </div>

Code Behind:

protected object Items
{
  get
  {
    var dt = new DataTable("Itens");
    dt.Columns.Add("Column0");
    dt.Columns.Add("Column1");
    dt.Columns.Add("Column2");
    dt.Columns.Add("Column3");
    dt.Columns.Add("Column4");
    dt.Columns.Add("Column5");
    dt.Columns.Add("Column6");
    dt.Columns.Add("Column7");
    dt.Columns.Add("Column8");
    dt.Columns.Add("Column9");
    dt.Columns.Add("Column10");
    dt.Columns.Add("Column11");

    for (var i = 0; i < 30; i++)
      dt.Rows.Add("lorem ipsum dolor" + i, "sit amet" + i, "consequetur" + i, "elit" + i, "lorem ipsum dolor" + i, "sit amet" + i, "consequetur" + i, "elit" + i, "lorem ipsum dolor" + i, "sit amet" + i, "consequetur" + i);

    return dt;

  }
}

protected void Page_Load(object sender, EventArgs e)
{
  DataBind();
}

ps.: dont forget to use <%= tbl.ClientID %> to grab the actual Id in the javascript

Answer 2

if you can, use RadGrid for ASP.Net AJAX (Telerik). see this link