In DataGrid, we can implement the effects similar to the Windows Explorer, ie, columns are sorted, and the column color is different from other columns. Below is the code implemented:
DataGridlikeWindowsExplorer.aspx
<%
@ Page Language
=
"
C #
"
Codebehind
=
"
DataGridlikeWindowsExplorer.aspx.cs
"
Autoeventwireup
=
"
False
"
Inherits
=
"
Aspxwebcs.DataGridlikeWindowSexplorer
"
%>
DOCTYPE HTML PUBLIC "- // w3c // DTD HTML 4.0 Transitional // En"
>
<
HTML
>
<
HEAD
>
<
Title
>
DataGridlikeWindowSexplorer
Title
>
<
Meta
Name
= "Generator"
Content
= "Microsoft Visual Studio 7.0"
>
<
Meta
Name
= "Code_Language"
Content
= "C #"
>
<
Meta
Name
= "VS_DEFAULTCLIENTScript"
Content
= "JavaScript"
>
<
Meta
Name
= "vs_targetschema"
Content
= "http://schemas.microsoft.com/intellisense/ie5"
>
<
Style
Type
= "Text / CSS"
>
.gridtooltip
{
Border-right
:
Black 1px Solid
;
Padding-Right
:
4px
;
Border-top
:
Black 1px Solid
;
Padding-left
:
4px
;
Z-Index
:
200
;
Left
:
0px
;
Visibility
:
Hidden
;
Padding-bottom
:
4px
;
Font
:
9pt bold Song
;
Border-left
:
Black 1px Solid
;
Width
:
150px
;
Color
:
WHITE
;
Padding-top
:
4px
;
Border-bottom
:
Black 1px Solid
;
Position
:
Absolute
;
TOP
:
0px
;
Background-color
:
# ff3316
}
Style
>
{Ps..1}
->
HEAD
>
<
Body
MS_Positioning
= "GridLayout"
>
<
ASP: PlaceHolder
Id
= "TIPS_PLACEHOLDER"
Runat
= "Server"
>
ASP: PlaceHolder
>
<
FORM
id
= "DataGridLikeWindowSexplorer"
Method
= "POST"
Runat
= "Server"
>
<
Div
Align
= "center"
>
<
H4
>
Northwind staff table
H4
>
<
ASP: DATAGRID
Id
= "WinexplorerView_DataGrid"
Runat
= "Server"
Bordercolor
= "# Ff6600"
Borderstyle
= "None"
Borderwidth
= "5px"
Backcolor
= "White"
Cellpadding
= "5"
ALLOWSORTING
= "True"
AutogenerateColumns
= "False"
Allowpaging
= "True"
Gridlines
= "Horizontal"
PageSize
= "5"
>
<
SelectEdItemStyle
Font-bold
= "True"
Forecolor
= "White"
Backcolor
= "# 669999"
>
SelectEdItemStyle
>
<
ItemStyle
Forecolor
= "# 000066"
>
ItemStyle
>
<
HEADERSTYLE
Font-bold
= "True"
Horizontalalign
= "Center"
Forecolor
= "Navy"
Backcolor
= "# Ffcc00"
>
HEADERSTYLE
>
<
Footerstyle
Forecolor
= "# 000066"
Backcolor
= "White"
>
Footerstyle
>
<
Columns
>
<
ASP: BoundColumn
Datafield
= "Lastname"
Sortexpression
= "Lastname"
Headertext
= "Last name"
>
ASP: BoundColumn
>
<
ASP: BoundColumn
Datafield
= "Firstname"
Sortexpression
= "Firstname"
Headertext
= "Name"
>
ASP: BoundColumn
>
<
ASP: BoundColumn
Datafield
= "Title"
Sortexpression
= "Title"
Headertext
= "Position"
>
ASP: BoundColumn
>
<
ASP: BoundColumn
Datafield
= "Birthdate" sortexpression
= "Birthdate"
Headertext
= "Date of birth"
DataFormatString
= "{0: D}"
/>
ASP: BoundColumn
>
<
ASP: BoundColumn
Datafield
= "City"
Sortexpression
= "City"
Headertext
= "Residential Land"
>
ASP: BoundColumn
>
Columns
>
<
Pagerstyle
Horizontalalign
= "Left"
Forecolor
= "# 000066"
Backcolor
= "White"
Mode
= "Numericpages"
>
Pagerstyle
>
ASP: DATAGRID
>
Div
>
FORM
>
Body
>
HTML
>
C # (DataGridLikeWindowsExplorer.aspx.cs):
Using
System;
Using
System.collections;
Using
System.componentmodel;
Using
System.data;
Using
System.data.sqlclient;
Using
System.drawing;
Using
System.Web;
Using
System.Web.caching;
Using
System.Web.SessionState;
Using
System.Web.ui;
Using
System.Web.ui.WebControls;
Using
System.Web.ui.htmlControls;
Namespace
askXWEBCS {
///
///
DataGridLikeWindowsExplorer's summary description.
///
public
Class
DataGridlikeWindowsExplorer: system.web.ui.page {
protected
System.Web.ui.WebControls.DataGrid WinexplorerView_datagrid;
protected
System.data.sqlclient.sqldataadapter m_sqldataadapter;
protected
System.data.sqlclient.sqlcommand m_sqlselectcommand;
protected
System.data.sqlclient.sqlconnection m_sqlconnection;
protected
System.Data.DataSet m_dsemployees;
protected
System.Data.DataView M_DVEMPLOYEES;
protected
System.collections.hashtable colheadermap;
protected
String
M_STRSORTEXPR;
protected
String
M_STRSORTORDER;
protected
int
m_isortcolumnidx;
protected
System.Web.ui.WebControls.PlaceHolder Tips_PlaceHolder; protected
String
Strconn
=
"
Data Source = .; user ID = sa; password =; initial catalog = northwind;
"
;
Private
Void
Page_load
Object
Sender, System.EventArgs E) {m_isortcolumnidx
=
-
1
M_STRSORTEXPR
=
""
M_STRSORTORDER
=
""
ProcessViewState (); prepareColumnHeadermap ();
IF
(
!
ISPostBack) {bindgridtoview ();}}
Private
Void
PrepareColumnHeadermap () {colheadermap
=
New
Hashtable ();
int
IDX
=
0
;
Foreach
(DataGridColumn Column Col
in
WinExplorerView_dataGrid.columns) {colheadermap [col.sortexpression]
=
IDX
}}
Private
Void
Retrievedata () {
IF
(
NULL
==
Cache [
"
Employeesds
"
]) {
String
TMP
=
"
Select Lastname, Firstname, Title, Birthdate, City from Employees
"
M_SQLConnection
=
New
SqlConnection (STRCONN); M_SQLSELECTCOMMAND
=
New
SQLCOMMAND (TMP, M_SQLCONNECTION); M_SQLDataAdapter
=
New
SqlDataAdapter (m_sqlselectcommand); m_dsemployees
=
New
Dataset
"
Employees
"
); M_sqldataadapter.fill (m_dsemployees); cache.insert
"
Employeesds
"
M_DSemPloyees,
NULL
, DateTime.now.addminutes (
1
), Cache.noslidingexpiration;
Else
{M_dsemployees
=
(Dataset) cache [
"
Employeesds
"
}}
Private
Void
ProcessViewState () {
IF
(
NULL
! =
ViewState [
"
Sortexpr
"
]) {M_STRSORTEXPR
=
ViewState [
"
Sortexpr
"
] .ToString ();
IF
(
NULL
! =
ViewState [
"
Sortorder
"
]) {M_STRSORTORDER
=
ViewState [
"
Sortorder
"
] .ToString ();
Privatevoid
Bindgridtoview () {
String
strsort
=
""
;
IF
(
0
! =
M_STRSORTEXPR.LENGTH) {strsort
=
M_STRSORTEXPR;
IF
(
0
! =
M_STRSORTORDER.LENGTH) {strsort
=
(
"
"
M_STRSORTORDER);}} retrievedata (); m_dvemployees
=
New
DataView (m_dsemployees.tables [
0
],
""
STRSORT, DATAVIEWSTATE.CURRENTROWS; WINEXPLORVIEW_DATAGRID.DATASOURCE
=
m_dvemployees; winexplorerview_datagrid.database ();
Private
Color getSortcolumnColor () {
IF
(
NULL
==
THIS
.M_STRSORTORDER
||
String.empty
==
THIS
.M_STRSORTORDER
||
0
==
THIS
.m_strsortorder.length) {
Return
Color.gold;
IF
(m_strsortorder.compareto (
"
ASC
"
)
==
0
) {
Return
Color.gold;
Else
{
Return
Color.blanchedalmond;}}
Private
Void
OnpageIndexchange
Object
Source, System.Web.ui.WebControls.DataGridPageChangeDeventargs e) {WINEXPLORERVIEW_DATAGRID.CURRENTPAGEINDEX
=
E.NEWPAGEINDEX; Bindgridtoview ();
Private
Void
OnserthView
Object
Source, System.Web.ui.WebControls.DataGridsortCommandEventArgs e) {m_strsortexpr
=
E.Sortexpression; ViewState [
"
Sortexpr
"
]
=
M_STRSORTEXPR;
IF
(
0
==
M_STRSORTORDER.LENGTH) {m_strsortorder
=
"
ASC
"
}
Else
IF
(m_strsortorder.compareto (
"
ASC
"
)
==
0
) {M_STRSORTORDER
=
"
DESC
"
}
Else
{M_STRSORTORDER
=
"
ASC
"
ViewState [
"
Sortorder
"
]
=
M_STRSORTORDER;
//
Find the column number where the Click event is located
m_isortcolumnidx
=
Convert.TOINT32 (
THIS
.colheadermap [m_strsortexpr]; bindgridtoview ();
Privatevoid
OnItemcreated
Object
Sender, System.Web.ui.WebControls.DataGriditeMeventArgs E) {
IF
(E.Item.itemType
==
ListItemType.Header) {
int
IDX
=
0
;
Foreach
(TableCell Cl
in
E.Item.cells) {cl.attributes.add (
"
OnMouseover
"
,
"
Showheadertip
"
IDX.toString ()
"
);
"
CL.Attributes.add (
"
OnMouseout
"
,
"
HideHeadertip
"
IDX.toString ()
"
);
"
IDX
}}
IF
(E.Item.itemType
==
ListItemType.Item
||
E.Item.itemType
==
ListItemType.alternatingItem) {
IF
(
-
1
! =
m_isortcolumnidx) {E.Item.cells [M_IsortColumnIDX] .BackColor
=
Getsortcolumncolor ();}}}
protected
Override
Void
OnPrender (Eventargs E) {
///
Tooltip text
int
NCOUNT
=
THIS
.Winexplorerview_datagrid.columns.count;
for
(
int
i
=
0
I
<
Ncount; i
) {Panel PNL
=
New
Panel (); pnl.cssclass
=
"
Gridtooltip
"
PNL.ID
=
"
HTIP
"
I.TOString (); Literal LT
=
New
Literal (); lt.text
=
THIS
.Getheadertooltiptext (i); pnl.controls.add (lt);
THIS
.Tips_PlaceHolder.Controls.add (pnl);
Base
(E);
Private
String
GetHeadertooltiptext
int
iColidx) {
Switch
(iColidx) {
Case
0
:
Return
"
Staff member's surname
"
;
Case
1
:
Return
"
Staff name
"
;
Case
2
:
Return
"
Staff position
"
;
Case
3
:
Return
"
date of birth
"
;
Case
4
:
Return
"
Residence
"
;
DEFAULT
:
Throw
New
Argumentexception
"
Invalid column serial number
"
,
"
Index
"
}}
#REGION
Web Form Designer generated code
Override
protected
Void
Oninit (Eventargs E) {INITIALIZEComponent ();
Base
.Onit (e);
Private
Void
InitializationComponent () {
THIS
.Winexplorerview_datagrid.Itemcreated
=
New
System.Web.ui.WebControls.DataGriditeMeventHandler
THIS
.Onitemcreated;
THIS
.Winexplorerview_datagrid.pageIndexchanged
=
New
System.Web.ui.WebControls.DataGridPageChangeDeventHandler
THIS
.Onindexchange;
THIS
.Winexplorerview_datagrid.sortcommand
=
New
System.Web.ui.WebControls.DataGridsortCommandeventhandler
THIS
.Onstview);
THIS
.Load
=
New
System.eventhandler
THIS
.Page_load);
#ndregion
}
