Go to: extend the gridview control (on)

ExtensionGridviewWidget

This articleBilal HaidarExplain in detail how to expandASP. net2.0Built-inGridviewControls, also explains the extendedGridviewNew important features of controls:Line-based context menu andGridviewsThe row filtering function.

 

Introduction

This article focuses onASP. net2.0Built-inGridviewProceedA series of new functions. This article introduces two main features: the line-based context menu (Row_base contextmenu) And filter-basedGridviewLast week, I introducedGridviewControl.

 In our customGridviewControl, provides several"High Efficiency"However, these functions are notGridviewThe basic functions provided by the control. As you will see, We Need To refactor these functions.

Extend the currentGridviewControls allow you to better control the GeneralGridviewFunctions are not available. In addition, you can use these new features repeatedly in the future.

We are going to add the following features:

1, Row click

2Double-click a row

3, Line-based context menu

4, Ascending and descending order of header Elements

5When the number of trees on the page is smallerPagesize, CorrectedGridviewHeight

6, Built-in filter text box

7, Built-in check box

In addition, we will add three simple buttons to add some simple validation functions on the client.

Confirm button (Confirm button)

Image button (Confirm image button)

Link button (Confirm link button)

 

ExtendedXgridControl needsGridviewControl, which means that the new control can beASP. net2.0.

BelowCodeThe start part of the extension is displayed:

Namespace customcontrols

{

Namespace Grid

{

[Toolboxdata ("<{0}: xgrid runat = Server> </{0}: xgrid>")]

Public partial class xgrid: gridview

{

 

To use this control, you just need to pass it throughVs. net2005Drag and Drop the toolbarWebForm. How to add the controlVs. net2005ToolbarThis is not the scope of this article.

The following code snippet shows its basic usage.

 

<Xgrid: xgrid id = "xgrid1" runat = "server" autogeneratecolumns = "false"/>

 

Click (Single Row click)

This is the first new feature added to the custom control. Now you place the cursor over a row of data and click it to cause the page data to be sent back./From the page, yes, useRowclickThis function can be implemented.

The related attributes are:

Enablerowclick: This attribute can be setTrue/false, Default value:False

Mouseovercolor: WhenEnablerowclickSetTrueYou can use this attribute to set the result of moving the cursor over a row of data. Click and double-click to use this function.

The running result is displayed. In this running result, the effect of clicking a row is displayed.

 

 

You canRowclickThe code for processing the clicked results in the event is as follows:

 

Protected void xgrid1_rowclick (Object sender, rowclickeventargs E)

{

Response. Write ("You clicked row:" + E. gridviewrow. rowindex );

}

 

RowclickeventargsThe default parameter is fromEventargsClass, and added a nameGridviewrowTo obtain the index of the current row.

 

 

Double-click a row (Double Row click)

 This is for expansionGridviewThe second feature added. You only need to double-click a row to send a request to the server for processing data. You can double-click to make the current row the default value for editing. Double-click the row.RowdoubleclickEvent. You can use this event to process specific business logic.

 

Related attributes

Enablerowdoubleclick: The value isTrueOrFalseThe default value isFalse

Mouseovercolor: WhenEnablerowdoubleclickSetTrueYou can use this attribute to set the effect of moving the mouse over a row, which is the same as that of clicking a row.

 

 The running result is displayed.

 

You can handleRowdoubleclickEvent. The sample code is as follows:

 

Protected void xgrid1_rowdoubleclick (Object sender, rowdoubleclickeventargs E)

{

Response. Write ("You double clicked row:" + E. gridviewrow. rowindex );

}

 

RowdoubleclickeventargsClass timeEventargsClass derived and addedGridviewrowAttribute, which gives you a more comprehensive control

 

 

Line-based context menu

We spent about one and a half months studying the event.GridviewControl, but we find that there is noGridviewControls can be usedContextmenuThat is, the built-inGridviewThe Context Menu Control is unavailable.

We have to useDino espositoDevelopedContext meunThe development document of this menu is published inMsdnIn a magazine, this article will list links to this file in the document.

Dino espositoDevelopedContext MenuMain useASP. net1.1Technology development, we have establishedASP. net2.0 context menuProject, which copies its code and makes simple changes. One of the changes is inContext MenuAddedOnclientclickProperties, so that before sending a response from the client to the server, the developer can link the client processing event to the context menu.

Context MenuThe client code used is mainlyJavascriptCode. The Code here isASP. net2.0As a resource (Resource.

Context MenuIt is already based onASP. net2.0Project has been integrated into the extendedGridviewEach row of the control. Now, when you right-click each row, you can access the right-click event. ExtendedGridviewThe widget also has a new property:RightclickrowThis attribute returns the context menu of the current row.

The related attributes are as follows:

GridviewControls have context menus.IDInAspxOn the pageGridviewWidgetID

Rightclickedrow: Set the context menu for this attribute.

The running result is displayed.

 

 

When you right-click a rowContext MenuMenu. Three options are displayed:

Add a new row: When this option is selected, a new row is displayed in the record.

Delete row: Allows you to delete the row currently right-clicked

Edit row: Run the command to set the current row mode. Edit mode

 

 

 

(Unfinished)

Source Address:

Http://aspalliance.com/946

 

Click here to download this articleSource code

Upload/2006_11/06112213024782.zip