|
|
<!--------------------------------------------------------------------------->
<!-- INTRODUCTION
The Code Project article submission template (HTML version)
Using this template will help us post your article sooner. To use, just
follow the 3 easy steps below:
1. Fill in the article description details
2. Add links to your images and downloads
3. Include the main article text
That's all there is to it! All formatting will be done by our submission
scripts and style sheets.
-->
<!--------------------------------------------------------------------------->
<!-- IGNORE THIS SECTION -->
<html>
<head>
<title>The Code Project</title>
<Style>
BODY, P, TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt }
H2,H3,H4,H5 { color: #ff9900; font-weight: bold; }
H2 { font-size: 13pt; }
H3 { font-size: 12pt; }
H4 { font-size: 10pt; color: black; }
PRE { BACKGROUND-COLOR: #FBEDBB; FONT-FAMILY: "Courier New", Courier, mono; WHITE-SPACE: pre; }
CODE { COLOR: #990000; FONT-FAMILY: "Courier New", Courier, mono; }
</style>
<link rel="stylesheet" type=text/css href="http://www.codeproject.com/styles/global.css">
</head>
<body bgcolor="#FFFFFF" color=#000000>
<!--------------------------------------------------------------------------->
<!------------------------------- STEP 1 --------------------------->
<!-- Fill in the details (CodeProject will reformat this section for you) -->
<pre>
Title: ASP.NET 2.0 - Scrollable Gridview with Freeze header and sort image that works inside and outside of UpdatePanel. It works in Firefox and Internet Explorer too.
Author: Antonio Suarez
Email: Antonio.Suarez@GrupoKino.com
Member ID: 12345
Language: C++, C# 2.0 etc
Platform: ASP.NET, .NET 2.0
Technology: ASP.NET, C#
Level: Beginner, Intermediate, Advanced
Description: This an easy way to get Freeze GridView header and add image sort. And it works on IE,Firefox and Others
SubSection Suggest a subsection...
License: Free(<a href="http://www.codeproject.com/info/licenses.aspx">CPOL, CPL, MIT, etc</a>) Gratis.
</pre>
<!------------------------------- STEP 2 --------------------------->
<!-- Include download and sample image information. -->
<ul class=download>
<li><a href="AntonioSuarez_gridview_demo_src.zip">Download source and demo project - 99.6 Kb </a></li>
</ul>
<p><img src="AntonioSuarez_gridview_ie.JPG" alt="Sample Image - maximum width is 600 pixels">
<img src="AntonioSuarez_gridview_ff.JPG" alt="Sample Image - maximum width is 600 pixels"></p>
<!------------------------------- STEP 3 --------------------------->
<!-- Add the article text. Please use simple formatting (<h2>, <p> etc) -->
<h2>Introduction</h2>
<p>
I was searching for a way to get a <strong>scrollable</strong> <strong>Gridview</strong>
with a <strong>freeze</strong> <strong>header</strong> 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 <strong>code file</strong>. (.CS or .VB)<p>
Here I would try to explain how it could be done with code. (.CS)
</p>
<h2>Using the Code</h2>
<p>
You just need to add a <strong>Panel</strong> control then add a <strong>Table
</strong>and <strong>Gridview</strong> control inside of Panel control.</p>
<p>
in the .CS file you need to add this code:
</p>
<p>
<strong>AddSortDirectionImage Function:</strong></p>
<pre>
/// <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);
}
}
}
</pre>
<strong>
<br />
And FreezeGridviewHeader Function: </strong>
<pre>
/// <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>
/// <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]Coping 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]Coping 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);
}
</pre>
<h2>Points of Interest</h2>
<p>
The point here is that it should <strong>work</strong> <strong>in</strong> the <strong>
most</strong> of the graphical <strong>browser</strong> and we <strong>will not have
to add fix for each browser compatibility.</strong><h2>History</h2>
<p>
We need to add edit functionality.<br />
<br />
<br />
I hope all this could be useful for you, if this work fine.
<p>
Other thing, if you have a page please add my web page link <strong><a href="http://www.grupoKino.com">
http://www.grupoKino.com</a></strong></p>
<p>
</p>
<p>
<strong>Antonio Suarez.</strong><br />
</p>
<p>
<!------------------------------- That's it! --------------------------->
</p>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip