Cutting Edge: Extending asp.net DataGrid control with client behavior

asp.net|datagrid| Client | control

Cutting Edge: Extending asp.net DataGrid control with client behavior

(You can drag columns and client sorting)

English Original: Extend the asp.net DataGrid with client-side behaviors
Author: Dino Esposito
Translation: MASTERLRC
Source: CuttingEdge0401.exe

Like the pizza chef's rolling pin, the DataGrid control is a very basic and useful tool for a skilled asp.net developer (translator: The foreigner metaphor, it feels so strange). Although, in ASP.net 1.x, the DataGrid is already a very powerful and versatile control and Server tool. However, we can still make it more powerful by adding a bit of client script to it. Recently, I saw some of the highlights that Dave Massy wrote for the "DHTML Dude" section of MSDN Online a few years ago. Dave discusses some creative ways to make HTML <Table> elements powerful, one of which is how to sort the contents of a table and drag columns in a table.

He also demonstrated the use of the dhtmlbehavior of <Table> elements. I realized that when the DataGrid control was rendered as HTML on the browser, it was a <Table> element; Although it may contain many style attributes, its basic structure is still a typical HTML Table. This makes me realize that I can create a DataGrid control with a client-side sort and drag column feature. This is our month's content, you can download the source code to verify what I said is not a falsehood.

DHTML Behavior Quick Guide

The DHTML behavior plays a very important role in our extended DataGrid control. In a moment you'll notice that I didn't use the method Dave used in his original form, and I made a little change in order for behavior to work in the ASP.net control. While using this modified component does not require any Javascript skills, knowing the techniques of DHTML behavior gives you a better understanding of how server-side and client work together.

The DHTML Behavior is the Behavior style of CSS (cascading style sheet cascading style sheet), bound to an HTML tag script component for those old browsers that do not support CSS or do not recognize Behavior styles, automatically hurry sickness the Unrecognized style. To get an insight into DHTML see: scripting evolves to a much powerful technology:html behaviors in Depth a DHTML behavior is a Javascrip a set of functions that is a collection of public members defined by special syntax. Generally speaking, these public members are some attributes and events, and sometimes also may be methods; Behavior works on top of existing HTML elements, allowing you to overwrite and extend the Behavior of HTML elements. The method is: Behavior associates its own defined code with the DHTML event. For example, the behavior operation OnMouseDown and onmouseup events that provide drag column functionality. Also, all key DHTML behavior support the Oncontentready event, which is fired when HTML subtree (all HTML within the specified element) is resolved. When the Oncontentreadey event fires, it is a good time to initialize behavior.

In fact, the core of behavior is a COM object that exposes a range of interfaces to Microsoft Internet Explorer (4.0 or later) browsers. Eventually you can write it as a C + + Meta component or HTML component (HTC) text file The HTC file can be html,asp,asp in the hosting application they file (s). NET) on the server, you do not need to install on the client.

The following code shows how to add a <table≷ tag with the ability to drag columns by using the "DRAGDROP.HTC" behavior:

<table style= "Behavior:url (DRAGDROP.HTC);" > Here the "dragdrop.htc" file must be used in the same directory as the file that uses it.

A DataGrid that can be dragged

After reading Dave Massy's article, I downloaded the DRAGDROP.HTC sample component, and then I tried to bind it to the DataGrid component in an experimental page. As follows:

thegrid.style["behavior"] = "url (dragdrop.htc)"; Strangely, the component is not working. Considering the fact that the DataGrid is completely a Table on the client side, I decided to compare the code for Dave's example Table with the HTML code generated by the ASP.net DataGrid. I noticed that the HTML Table generated in the DataGrid in ASP.net 1.x does not contain THEAD and tbody elements. And these two elements are just the key factors in the example behavior function. Although the drag and drop columns do not directly require THEAD and tbody two elements, these two elements are very helpful in locating the table header and the table body.

There are two ways to solve this problem: rewrite a behavior that does not use THEAD and tbody; write a DataGrid control that generates a Table with THEAD and tbody tags. For a asp.net developer like me, I believe it's easier to develop a custom control than to write a behavior. Because at least we can do the code root debugging effectively. So I created a new Visual Studio. NET solution, adding a asp.net application engineering and a Web Control library project. You have the following prototype of the new DataGrid control:

[ToolBoxData ("<{0}:D atagrid runat=\" Server\ "/>")]public class datagrid:system.web.ui.webcontrols.datagrid{ Public DataGrid (): Base () {Enablecolumndrag = True;dragcolor = Color.Empty; Hitcolor = Color.Empty;} ...}

The constructor initializes three public custom properties: Enablecolumndrag, Dragcolor, and Hitcolor. Enablecolumndrag is a Boolean property that represents whether a column can be dragged. If this property is set to False, the custom DataGrid control will not add drag column behavior. The other two properties represent the background color of the dragged column and the color of the column to be pressed.

Note that these two color properties do not affect any of the logic of the DataGrid server control. They are server-side properties that output only HTML values (this value is useful only for client behavior). The values of these two properties are rendered as custom properties of the <table> label generated by grid. The markup code for the DataGrid is created in the Render method of the control, as follows:

 protected override void Render (HtmlTextWriter output) {//Sets attributes for the DragDrop Behaviorif (enablecolumndr AG) {if (Dragcolor!= color.empty) attributes["dragcolor"] = DragColor.Name.ToLower (); if (Hitcolor!=) attributes["Hitcolor"] = HitColor.Name.ToLower (); Capturethe Defaultoutputof the DataGrid stringwriterwriter = new StringWriter (); Htmltextwriterbuffer = new HtmlTextWriter (writer); Base. Render (buffer); string gridmarkup = writer.  ToString (); Parse the markup to insert missing tags//find the ' a ' > and insert 
 int occurrence; 
 Insertpoint = Gridmarkup.indexof (">") + 1; Len of 
 Gridmarkup = Gridmarkup.insert (Insertpoint, ""); 
 Insertpoint = Gridmarkup.indexof ("") + 5;
            



Len of 
 Gridmarkup = Gridmarkup.insert (