With the advantages of client scripts, we can create an XP-style DataGrid that can drag columns, change the column width, and display and hide columns. below is all Code . Modify the emeng. Exam. ultragrid path when debugging by yourself.
View examples
Ultragrid. aspx
<% @ Page Language = "C #" codebehind = "ultragrid. aspx. cs" autoeventwireup = "false"
Inherits = "emeng. Exam. ultragrid. ultragrid" %>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> An Example of an XP-style drag-and-drop column, a sorted, and a DataGrid with a changeable width </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Meta name = "generator" content = "Microsoft Visual Studio 7.0">
<Meta name = "code_language" content = "C #">
<LINK rel = "stylesheet" type = "text/CSS" href = "ultrabod.css">
<Meta name = "vs_defaultclientscript" content = "JavaScript">
<Meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5">
</Head>
<Body ms_positioning = "gridlayout">
<Form ID = "dragablexpstyletable" method = "Post" runat = "server">
<Div align = "center" style = "padding: 5px">
<B> An Example of an XP-style DataGrid that can be dragged, sorted, or changed in width. </B>
</Div>
<Div id = "coolultr1_d1" runat = "server">
<Div class = "gridhead">
<Div class = "gridrow" id = "gridrow" runat = "server"> </div>
</Div>
<Asp: literal id = "rowitem" runat = "server"> </ASP: literal>
</Div>
</Form>
</Body>
</Html>
Ultragrid. aspx. CS
Using system;
Using system. collections;
Using system. componentmodel;
Using system. Data;
Using system. Data. oledb;
Using system. drawing;
Using system. Web;
Using system. Web. sessionstate;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. htmlcontrols;
Namespace emeng. Exam. ultragrid
{
/// <Summary>
/// Summary of ultragrid. This example demonstrates how to create an XP-style DataGrid that can be sorted, dragged, and resized.
/// From: [wonderful world of Meng xianhui]
/// </Summary>
Public class ultragrid: system. Web. UI. Page
{
Protected system. Web. UI. htmlcontrols. htmlgenericcontrol gridrow;
Protected system. Web. UI. webcontrols. Literal rowitem;
Protected system. Web. UI. htmlcontrols. htmlgenericcontrol coolultr1_d1;
Private void page_load (Object sender, system. eventargs E)
{
// Place user code here to initialize the page
Coolultragrid1.attributes. Add ("class", "coolultragrid ");
Coolultrated1.attributes. Add ("style", "width: 100%; Height: 400 ");
Coolultrated1.attributes. Add ("borderstyle", "2 ");
Coolultrated1.attributes. Add ("altrowcolor", "oldlace ");
Coolultrated1.attributes. Add ("selectionstyle", "1 ");
/// Modify the database connection string and query statement according to your database settings. Do not modify others.
Oledbconnection Cn = new oledbconnection ("provider = Microsoft. Jet. oledb.4.0; Data Source = C:" XXX. mdb ");
CN. open ();
String sqlstring = "select top 30 d. title as document title, D. createdate as release date, S. Title As topic ";
Sqlstring + = "from document D, subject s where D. PID = S. ID order by D. createdate DESC ";
Oledbcommand cmd = new oledbcommand (sqlstring, CN );
Oledbdatareader Dr;
Dr = cmd. executereader (commandbehavior. closeconnection );
///
/// Combined Header
///
Int fieldnumber = dr. fieldcount;
Int colwidth, TMP = 0;
If (fieldnumber = 0)
Response. End ();
Colwidth = (INT) 100/fieldnumber;
String tableheader = "";
For (INT I = 0; I <fieldnumber; I ++)
{
If (dr. Read ())
{
If (I = FieldNumber-1)
Tableheader + = "<span width = '" + (100-tmp ). tostring () + "% '>" + dr. getname (I ). tostring () + "</span> ";
Else
Tableheader + = "<span width = '" + colwidth. tostring () + "% '>" + dr. getname (I ). tostring () + "</span> ";
TMP + = colwidth;
}
}
Gridrow. innerhtml = tableheader;
Int rownumber = 1;
Tableheader = "<Div class = 'gridbody'> ";
While (dr. Read ())
{
Tableheader + = "<Div class = 'gridrow' id = 'row" + rownumber. tostring () + "'> ";
For (INT I = 0; I <fieldnumber; I ++)
{
Tableheader + = "<span>" + dr. getvalue (I). tostring () + "</span> ";
}
Tableheader + = "</div> ";
Rownumber ++;
}
Tableheader + = "</div> ";
Rowitem. Text = tableheader;
CN. Close ();
}
# Region web form designer generated code
Override protected void oninit (eventargs E)
{
//
// Codegen: This call is required by the ASP. NET web form designer.
//
Initializecomponent ();
Base. oninit (E );
}
/// <Summary>
/// The designer supports the required methods-do not use the code editor to modify
/// Content of this method.
/// </Summary>
Private void initializecomponent ()
{
This. Load + = new system. eventhandler (this. page_load );
}
# Endregion
}
}
