Extended asp.net one of the built-in GridView controls

Asp.net| Control

This article Bilal Haidar explains in detail how to extend the asp.net2.0 built-in GridView control, and also explains the new and important features of the extended GridView control: The filtering capabilities of the context menu based on rows and gridviews rows.

　　 Introduction

This article focuses on a series of new features that extend the asp.net2.0 built-in gridview. This article describes two main features: a row based context menu (Row_base ContextMenu) and a filter-based line of the GridView, which I introduced the GridView control last week.

In our custom GridView control, we offer several extensions with "high efficiency" functionality, but these features are not the basic features of the GridView control, and as you'll see, we need to refactor these features. Extending the current GridView control allows you to be more capable of controls that the general GridView does not have, and you can use these new features repeatedly after you extend the functionality.

We are going to add the following features:

1, the line of the click

2, the line of double click

3, based on the context menu of the row

4, the header element ascending descending order

5, when the page records trees less than pagesize, the correction of the height of the GridView

6, the built-in filter text box

7, the built-in check box

In addition, we will add three simple buttons that can be used to add some simple validation functions to the client

• Confirm Buttons (Confirm button)

• Picture buttons (Confirm image button)

• Link buttons (Confirm link button)

The extended Xgrid control needs to derive from the GridView control, which means that the new control can run on the asp.net2.0.

The following code shows the starting part of the extension:

Namespace CustomControls
{
Namespace Grid
{
[ToolBoxData ("<{0}:xgrid runat=server> </{0}:xGrid>")]
public partial class Xgrid:gridview
{
To use this control, simply drag it through the Vs.net2005 toolbar directly onto the Web form. The specifics of how to add the control to the Vs.net2005 toolbar are not the scope of this article.

The following code fragment shows its basic use

<xgrid:xgrid id= "XGRID1" runat= "Server" autogeneratecolumns= "False"/>
　　 Click (Single Row click)

This is the first new feature added by the custom control, where you now place the mouse over a row of data and then click to cause the page data to be sent back, and you may think that using this feature to implement the master/detail page, yes, use Rowclick to achieve this function.

The associated properties are:

· Enablerowclick: This property can take a value of True/false, default to False

· Mouseovercolor: When the Enablerowclick is set to true, use this property to set the result that the mouse moves over a row of data display. This feature is used for both click and double-click.

The following figure shows the results of the run, showing the effect of clicking a row in the running result.

You can handle the results of a click in the Rowclick event to indicate the following:

protected void Xgrid1_rowclick (object sender, Rowclickeventargs e)
{
Response.Write ("You clicked row:" + e.gridviewrow.rowindex);
}
The Rowclickeventargs parameter is derived by default from the EventArgs class and adds a property named GridViewRow so that you can use this property to get the index of the current row.

　　Row double click (Double row click)

This is the second feature added to the extended GridView. All you need to do now is double-click on one line to generate a data postback to the server to process the request. You can double-click to have the current row be edited by default. The Rowdoubleclick event has been added to the double click of the row, which you can use to handle specific business logic

Related properties

Enablerowdoubleclick: Value is True or FALSE, the default value is False

Mouseovercolor: When Enablerowdoubleclick is set to True, you can use this property setting to set the effect of the mouse over the row, as you would click the row.

The following figure shows the results of the run

You can handle the Rowdoubleclick event with the following schematic code:

protected void Xgrid1_rowdoubleclick (object sender, Rowdoubleclickeventargs e)
{
Response.Write ("You double clicked row:" + e.gridviewrow.rowindex);
}
The Rowdoubleclickeventargs class derives from the EventArgs class and adds the GridViewRow property, which can give you a more complete control

　　 context menu based on Rows

It took us about 1.5 months to study the GridView control, but we found that none of the GridView controls can use ContextMenu, which means that the built-in GridView context menu control is not available.

We have to use the context Meun developed by Dino Esposito, which is published in MSDN Magazine, and is listed later in this article with a link to the file. The context menu developed by Dino Esposito is developed primarily using asp.net1.1 technology, and we have established a asp.net2.0 context menu project that copies his code and makes simple changes. One of the changes is the addition of the OnClientClick attribute in the context menu project, so that developers can hook up client-handling events to the contextual menu before processing a client-request postback.

The client code used by context menu is primarily JavaScript code, where the code has been included as a resource (Resource) in asp.net2.0.

The context menu is now a asp.net2.0-based project and has been integrated into each row of the extended GridView control, and now when you right-click each row, you will have access to the right click event. The extended GridView control also has a new property: Rightclickrow, which can return the current row context menu

The associated properties are as follows:

· The GridView control has a context menu, where the ID is set to the GridView control ID on the ASPX page

· Rightclickedrow: This property sets the context menu.

The following figure shows the results of the operation.

POPs up the context menu when you right-click on a row. Three options are shown here:

· Add a new Row: When this option is selected, the new CCB will appear in the record.

· Delete Row: Allows you to delete the line that is currently right-click

· Edit row: Run the mode for which you are setting the current line for editing mode