Freeze (Lock) Columns in SPGridView

I saw many examples with freezing columns in SPGridView, but I have no idea why none of them work for me. I mean - no freezing.

I will be grateful for watching my code.

The following are snippets of code that are ready to run. It should work on IE 8+ (other browsers don't matter).

I will give 100 points for a solution that 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;} 

separated code:

 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 infer

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
+7
source share
2 answers

The problem you are facing (based on the example site associated with you) is that the "working version" on the Internet only works in Quirks mode, but your SharePoint 2010 page does not even open in Quirks mode, if you force it on the main page.

If you can use jQuery, you can easily duplicate the first column (if you want the first column), I will play with some code and then edit it.

EDIT with 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 for:

 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 .: don't forget to use <%= tbl.ClientID %> to capture the actual id in javascript

+5
source

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

0
source

All Articles