Examples of XP-style drag columns, sortable, adjustable-width datagrid

Last Update:2017-02-28 Source: Internet

Author: User

Tags tostring visual studio

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Datagrid| can drag | sort

With the advantage of client-side scripting, we can create an XP-style DataGrid that can drag columns, change column widths, display, and hide columns, and here's all the code. When you debug yourself, be careful to modify the EMeng.Exam.UltraGrid path.

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>
Examples of &LT;TITLE&GT;XP-style drag columns, sortable, adjustable-width datagrid </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= "Ultragrid.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" >
An example of a <b> XP-style Drag column, sortable, adjustable-width datagrid. </b>
</div>
<div id= "COOLULTRAGRID1" 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;

A summary description of the

namespace EMeng.Exam.UltraGrid
{
///<summary>
///Ultragrid. This example shows you how to create a sortable, drag-and-drop, adjustable-width, XP-style DataGrid.
///from: "The Wonderful World of Mengxian"
///</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 coolUltraGrid1;
private void Page_Load (object sender, System.EventArgs e)
{
  //Place user code here to initialize page
   COOLULTRAGRID1.ATTRIBUTES.ADD ("Class", "Coolultragrid");
   coolUltraGrid1.Attributes.Add ("style", "width:100%;") Height:400 ");
   coolUltraGrid1.Attributes.Add ("BorderStyle", "2");
   coolUltraGrid1.Attributes.Add ("Altrowcolor", "oldlace");
   coolUltraGrid1.Attributes.Add ("Selectionstyle", "1");

Please modify the database connection string and query statement based on your database settings. Others do not modify.
OleDbConnection cn = new OleDbConnection ("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:\\xxx.mdb ");
cn. Open ();
String SqlString = "SELECT top D.title as document title, d.createdate as publish time, S.title as belongs column";
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);
///
Group 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>";
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More