asp.net|datagrid| Control First we'll start with a demo, in which I'll use a button to click on the event to sort the data in the table. It then describes a set of properties--hyperlinkcolumn, Bottoncolumn, and BoundColumn that you can use to add some interesting customizations to the DataGrid.
Let's start with listing a, where we ended last time. The following is the output of the code in listing A.
The output of the DataGrid
The first change to note is that the column names in the header are now clickable. Run this example yourself and you'll find that when you click on each field, the data is sorted automatically.
Now let's look at the code that triggers this change. First I'll 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.
The following creates an instance of the DataView object that is used to change the order of arrangement at run time. Just set this property to the column you want to sort, and DataView will do the sorting work for us.
Finally, use some of the new properties of the Datagird control to glue these things together. AllowSorting activates the sort, and the Onsortcommand property specifies the event handler that needs to be invoked when a sort request is received. The second property is already set to Dgsuperheroes_sort (), which will be invoked automatically by the. NET compiler when we click on the field name of the header. In this function, the SortExpression property holds the name of the field that is selected as the sort parameter, and then rebind the DataGrid based on the field, thus sorting is implemented.
Add a link to the DataGrid
Next, we can improve the DataGrid interface by showing only a summary of the information in front of it, inserting some hyperlinks in the DataGrid, and then displaying the details when you click on the links. Listing B shows how to achieve this effect, and Figure B shows the corresponding output:
Figure B
Inserting a hyperlink in the DataGrid
Here the DataGrid contains only two columns--the first column is the ID, and the second column is the name. If you click on any of the names, you will get another asp.net script showing all the details of the option.
The most important thing in this script is the AutoGenerateColumns attribute. This property, if set to false, guarantees that the. NET compiler does not automatically generate columns for the DataGrid based on the table's fields.
The obvious question is, then how do I generate the column? Quite simply, using the <Columns> element, this element will surround the definition of the column that needs to be displayed.
The first column is a <asp:BoundColumn> type that allows us to bind a column of the DataGrid to a field in a database table. The required fields are assigned the DataField property of the <asp:BoundColumn> element.
Then the,<asp:hyperlinkcolumn> element allows us to insert a special column in which there is a link to each row of the DataGrid. The DataTextField property controls the table field to display in the column, and the Datanavigateformatstring property controls the URL target of the hyperlink (note that the {0} format is used for variable filling), The Datanavigateurlfield property specifies the database field to fill.
If you click on the name of the superhero, you go to the more.aspx script, which passes the ID as a get parameter, then gets the information from the database and displays the information on the page.
command center
The previous example introduces a column that contains a hyperlink. Now you'll see how to introduce a column that enables you to run custom commands when a user clicks on it. For example, when a user clicks on a column, it hides or displays an element on the page.
First, add two columns to the DataGrid you created earlier. The first new column fills another DataGrid (on the same page) using the details of the selected record, and the second column is used to show or hide the new DataGrid when the user clicks a button.
Listing C is the generated code, and the following figure is a simple output of the list in the code:
Figure C
Show/hide details using the DataGrid
The script actually contains two DataGrid: The first is "dgsuperheroes", which displays the name of the superhero (superheroes), and the second is "dgsuperheroes_details", which displays the details of the selected hero. By default, the second DataGrid is not visible when the page is loaded because its Visible property is set to False.
Now back to the "Dgsuperheroes" DataGrid, you'll find that we've set the AutoGenerateColumns property to "false" and introduced four custom columns: Two <asp for record IDs and names: Boundcolumn>, there are also two <asp:ButtonColumn> to save the command.
Each <asp:ButtonColumn> has three useful properties: HeaderText, which controls the text that is displayed on the header line, text, control the text that is displayed for each line; CommandName, which specifies a unique identifier for each command.
The "dgsuperheroes" DataGrid definition also introduces the OnItemCommand attribute, which specifies the event handler that is invoked when a user clicks on a <asp:ButtonColumn> link. In this example, the event handler is called Superhero_details (), which uses CommandName to differentiate calls to the show details and hide details requests. Note that the event (as an input parameter to the event handler) is explicitly transformed into a LinkButton.
Share your DataGrid tips and tricks
After learning the two sections of this article, I've tried to delve into the many things in the very cool DataGrid control in asp.net. It also shows you how to add a row to the DataGrid in the simplest way, and then I quickly introduced three useful but somewhat complex attribute:<asp:boundcolumn> elements of the DataGrid control, used to put the DataGrid column is bound to the database table's specific field;<asp:hyperlinkcommand> element, which inserts a hyperlink;<asp:buttoncolumn> element into the DataGrid, allowing custom commands to be introduced into the DataGrid More easily. Go to discussion Board to share your favorite DataGrid tips or tricks.
