Enable the Asp. NET DataGrid to be sorted, select, and pagination

Source: Internet
Author: User

DataGrid is an important control in Asp. NET. It is often made into a paginated and sortable DataGrid, and sometimes the selection function needs to be added. These are frequently used methods, which are actually relatively simple.
Design Concept:

For convenience, we connect to the Orders table of the NorthWind database of SQL Server 2000 to obtain the data view of this table from the database. Use the DataGrid SortCommand event to sort data. Add the CheckBox control to a template column for selection. You can use the "pagination" option of the property generator of the DataGrid or modify HTML to implement pagination.
HTML:

Add a DataGrid named dgOrder.
A template column is added with a CheckBox control named Cb in the template column. This column is used for selection.
Add a sort expression SortExpression to each column to be sorted.
Use the DataFormatString of the column to format the column, such as DataFormatString = "{0: d}" display date format.
Set PageSize = "15" to display 15 rows of data per page, and AllowPaging = "True" to allow paging.
The entire HTML page code:

<Form id = "Form1" method = "post" runat = "server">
<Asp: datagrid id = "dgOrder" runat = "server" Height = "515px"
Width = "718px" AutoGenerateColumns = "False" AllowSorting = "True"
CellPadding = "4" BorderWidth = "1px" BorderColor = "# A0ABEB"
PageSize = "15" BorderStyle = "Solid" BackColor = "White"
GridLines = "Vertical" ForeColor = "Black" AllowPaging = "True"
ShowFooter = "True">
<SelectedItemStyle ForeColor = "White" BackColor = "Black"> </SelectedItemStyle>
<AlternatingItemStyle BackColor = "# EEEEEE"> </AlternatingItemStyle>
<HeaderStyle HorizontalAlign = "Center" ForeColor = "White"
BorderColor = "#6876C5" BackColor = "#6876C5"> </HeaderStyle>
<FooterStyle ForeColor = "White" BackColor = "#6876C5"> </FooterStyle>
<Columns>
<Asp: TemplateColumn>
<ItemTemplate>
<FONT face = "">
<Asp: CheckBox id = "Cb" runat = "server"> </asp: CheckBox> </FONT>
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: BoundColumn DataField = "orderid" SortExpression = "orderid"
HeaderText = "ID">
<HeaderStyle Width = "180px"> </HeaderStyle>
</Asp: BoundColumn>
<Asp: BoundColumn DataField = "ShipCountry" SortExpression = "ShipCountry"
HeaderText = "ShipCountry">
<HeaderStyle Width = "180px"> </HeaderStyle>
</Asp: BoundColumn>
<Asp: BoundColumn DataField = "ShippedDate" SortExpression = "ShippedDate"
HeaderText = "ShippedDate" DataFormatString = "{0: d}">
<HeaderStyle Width = "180px"> </HeaderStyle>
</Asp: BoundColumn>
<Asp: BoundColumn DataField = "Freight" SortExpression = "Freight"
HeaderText = "Freight">
<HeaderStyle Width = "180px"> </HeaderStyle>
</Asp: BoundColumn>
<Asp: BoundColumn DataField = "ShipAddress" SortExpression = "ShipAddress"
HeaderText = "ShipAddress">
<HeaderStyle Width = "480px"> </HeaderStyle>
</Asp: BoundColumn>
</Columns>
<PagerStyle HorizontalAlign = "Center" ForeColor = "Black"
Position = "TopAndBottom" BackColor = "White" Mode = "NumericPages"> </PagerStyle>
</Asp: datagrid>
</Form>

Background code:

'Get the data view. The parameter is the column to be sorted.
Private Function GetDv (ByVal strSort As String) As DataView
'Define database connection
Dim dv As DataView
Dim CN As New SqlConnection ()
Try
'Initialize the connection string
CN. ConnectionString = "data source = pmserver;
Initial catalog = Northwind; persist security info = False; user id = sa; Password = sa ;"
CN. Open ()
'Obtain the orders table data from NorthWind.
Dim adp As SqlDataAdapter = New SqlDataAdapter ("select * from orders", CN)
Dim ds As New DataSet ()
Adp. Fill (ds)
'Get the data view
Dv = ds. Tables (0). DefaultView
Catch ex As Exception
# If DEBUG Then
Session ("Error") = ex. ToString ()
Response. Redirect (".../error. aspx") 'jump to the public error handling page of the program
# End If
Finally
'Close the connection
CN. Close ()
End Try
'Sort
Dv. Sort = strSort
Return dv
End Function
Private Sub Page_Load (ByVal sender As System. Object, ByVal e As System. EventArgs)
Handles MyBase. Load
If Not IsPostBack Then
ViewState ("strSort") = "orderid"
DgOrder. DataSource = GetDv (ViewState ("strSort"). ToString ())
DgOrder. DataBind ()
End If
End Sub
'Sort
Private Sub dgOrder_SortCommand (ByVal source As Object,
ByVal e As System. Web. UI. WebControls. DataGridSortCommandEventArgs) Handles dgOrder. SortCommand
DgOrder. CurrentPageIndex = 0
'Column to be sorted
ViewState ("strSort") = e. SortExpression. ToString ()
DgOrder. DataSource = GetDv (ViewState ("strSort"). ToString ())
DgOrder. DataBind ()
End Sub
'Pagination
Private Sub dgOrder_PageIndexChanged (ByVal source As Object,
ByVal e As System. Web. UI. WebControls. DataGridPageChangedEventArgs) Handles dgOrder. PageIndexChanged
'Get the page number of the page
DgOrder. CurrentPageIndex = e. NewPageIndex
DgOrder. DataSource = GetDv (ViewState ("strSort"). ToString ())
DgOrder. DataBind ()
End Sub

Shows the running result:

To know which records are selected, we can use the FindControl of the DataGridItem to get the CheckBox value. Let's add a button and then write the following code:

Private Sub button#click (ByVal sender As System. Object, ByVal e As System. EventArgs)
Handles Button1.Click
Dim item As DataGridItem
Dim StrScript As String
StrScript = ""
RegisterClientScriptBlock ("system message", StrScript)
End Sub

The preceding Code RegisterClientScriptBlock adds a Java Script dialog box. In fact, the Vb Script dialog box has more display and control modes than the Java Script dialog box, but the Netscape browser does not support it, you can select which script to use in the program based on the corresponding project ).


Summary:

DataGrid is a commonly used Web Control. Sometimes it can be used together with DataList. By modifying HTML pages, you can achieve good page effects. The above is just an example. To facilitate the whole process, I wrote the data access part (SQL) to the page. In software development, we generally write the part of the accessed data as the data layer, and call the data layer on the page to obtain the data, so that the logic is clear and easy to modify and maintain.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.