ASP.NET DATAGRID Control In-depth study

ASP.NET DATAGRID Control In-depth study

Sort DATAGRID

First we start from a demonstration, in this demonstration I will use a button to click on the data in the event sort table. Then introduce a set of properties - HyperLinkColumn, BottonColumn, and BoundColumn, using these properties to add some interesting custom features to DataGrid.

Below we first ended from the last place - Listing A. Here is the output of the Middle Code in List A.

DataGrid output

The first change in note is that the column name in the head is now clickable. If you run this example, you will find that the data will be automatically sorted when you click on each field.

Now let's take a look at the code that causing this change. First of all, I will introduce the strsortby variable, which is used to store the name of the sort parameter. The page_load () function has also changed: When the page is first loaded, the ID field is selected as the default sort parameter.

An instance of the DataView object is created below for changing the order in the run. As long as this property is set to the column to be sorted, DataView will work for us.

Finally, some new attributes using the DataGIRD control will bond these things together. ALLOWSORTING is active, and the onsortcommand property specifies the event processor that needs to be called when a sort request is received. The second property has been set to DGSUPERHEROES_SORT (), which will be automatically called by the .NET compiler when we click on the field name of the header. In this function, the sortexpression property saves the field name of the sort parameter and then re-bound DataGrid according to this field to achieve sorting.

Add a link to DataGrid

Next, we can improve the interface of the DataGrid in the following way: only the summary of the information in front, and insert some hyperlinks in the DataGrid, then display the details when you click on these links. Listing B shows how to achieve this, Figure B shows the corresponding output: Figure B

Insert hyperlink in DataGrid This DataGrid only contains two columns - the first column is ID, the second column is the name. If you click any of the name, you will call another ASP.NET script to display all the details of the option.

The most important thing in this script is the AutogenerateColumns property. If this property is set to FALSE, you can guarantee that the .NET compiler does not automatically generate the column of DataGrid according to the fields of the table.

Very obvious question is, then how to make a column? Very simple, use the element, this element will ring the definition of the columns you need to display.

The first column is the type, which allows us to bind a column of DataGrid to a field of the database table. The desired field is given the DataField property of the element.

Then, element allows us to insert a special column where there is a link to each line of DataGrid. DataTextField Properties Control Columns To display the table fields, DataNaviGateFormatString properties Control hyperlink URL target (note {0} format for variable fill), DataNavigateURLField property Specifies the database field used to fill it.

If you click Super Hero's name, you will enter more.aspx scripts, which is passed as a GET parameter, then get information from the database and display the information on the page. The previous example introduced a column containing hyperlinks. Now, you will see how to introduce a column that can run custom commands when you click. For example, when the user clicks on a column, hide or display an element on the page.

First, add two columns in the DataGrid created in front. The first new column uses the details of the selected record to populate another DataGrid (on the same page), and the second column is used to display or hide this new DataGrid when the user clicks on a button.

The list C is the code generated, and the figure below is the simple output of the inventory:

Figure C

Using the DataGrid display / hide the detailed information script actually contains two DataGrid: The first is "DgsuperHeroes", used to display the name of Superheroes, the second is "DGSUPERHEROES_DETAILS", used to display the selected hero details. By default, the second DataGrid is invisible when the page is loaded because its Visible property is set to false.

Now return to "DGSUPERHEROES" DataGrid, you will find that we have set the AutoGenerateColumns property to "false" and introduce four custom columns: two used to record ID and name, there are two of the saved command.

There are three useful properties: Headertext, the text of the control meter, the text, and the text, which controls the text displayed in each row; CommandName, used to specify a unique identifier for each command.

"DGSUPERHEROES" DataGrid definition also introduces the onItemCommand property, which specifies the event processor called when the user clicks on a link. In this example, the event processor is called superhero_details (), which uses the COMMANDNAME to distinguish the call to "Show Details" and "Hide Details" request. Note that the event is explicitly transformed into a LinkButton.

Sharing your DataGrid skills and tricks After studying this two part courses, I have tried to explain how many things in ASP.NET in ASP.NET. In addition, how to use the easiest way to add rank sequence to DataGrid, then I will quickly introduce three useful but some complex properties of the DataGrid control: element, used to bind DataGrid columns To the specific field of the database table; element, is used to insert hyperlinks in the DataGrid; element makes it easier to introduce the custom command into the DataGrid. You may wish to share your favorite DataGrid tips or tricks with you.