Gridview displays several methods of head and detail (including dynamic video teaching)

Source: Internet
Author: User

Data Table design often involves head and detail design. Let's look at the most common example (beifeng database. Orders can be divided into two data tables: Order head file (orders) and Order detail details (Order details. Of course, such data indicates that there is a relationship between orders. For example, the relationship is the order number (orderid)

So how to display such information on the screen?

 

    1. The gridview displays multiple orders. When you click an order, the gridview displays the Order details.
    2. Nest display of the gridview package
    3. The gridview displays orders multiple times. When you click a certain order, add a row in the gridview to display the Order details.

The design methods are as follows:

1. The gridview displays orders multiple times. When you click an order, the gridview displays the Order details.

It's okay to drag and drop the file and set it. You don't need to write it at all.Program, Please refer to the following Video Teaching

 

Http://vip2.blueshop.com.tw/topcat/DEMO/DemoHeadDetail/DemoHeadDetail1.html

 

2. Nest display of the gridview package

There are few programs written in this way. I have already mentioned this article. Please refer to the following link.

 

Http://www.dotblogs.com.tw/topcat/archive/2008/04/30/3755.aspx

 

3. The gridview displays orders multiple times. When you click a certain order, add a row in the gridview to display the Order details.

Program in this wayCodeA little more, because it is necessary to dynamically write the gridrow and use the program code to dynamically generate the details gridview

For the image preparation process, see the following video.

 

Http://vip2.blueshop.com.tw/topcat/DEMO/DemoHeadDetail/DemoHeadDetail2.html

The program code in the rowdatabound event of the gridview is as follows:

 

 

     Protected   Sub Gvorders_rowdatabound ( Byval Sender As   Object , Byval E As System. Web. UI. webcontrols. gridviewroweventargs) Handles Gvorders. rowdatabound If   Not (Viewstate ( "Corderid" ) Is   Nothing ) Then  If E. Row. rowtype = datacontrolrowtype. datarow Then  Dim DRV As Datarowview = E. Row. dataitem Dim Orderid As   String = CSTR (Viewstate ( "Corderid" ))'Only the rows with the same orders should be handled.  If   CSTR (DRV. Item ( "Orderid" ) = Orderid Then  'Obtain the response string  Dim Connstr As   String = Web. configuration. webconfigurationmanager. connectionstrings ( "Nwind" ). Connectionstring 'Create a able object  Dim DT As   New Datatable 'Establish connection Using Conn As  New Sqlconnection (connstr) 'Settings query limit Method'  Dim Sqltxt As   String = "" Sqltxt + = "Select *" Sqltxt + = "From [Order Details]" Sqltxt + = "Where orderid = @ orderid"  'Create command object  Dim Cmks As   New Sqlcommand (sqltxt, Conn) 'Set the metric data Cmmd. Parameters. addwithvalue ( "@ Orderid" , Viewstate ("Corderid" )) 'Create a dataadapter  Dim Da As   New Sqldataadapter (cmmd) Da. Fill (DT) End Using 'Create the detail gridview  Dim Gvdetail As   New Gridview 'Specify the data source Gvdetail. datasource = dt 'Set the number of auto-generated buckets Gvdetail. autogeneratecolumns = True  'Data Processing endpoint Gvdetail. databind () 'Generate a new gridviewrow Dim Gvrow As   New Gridviewrow (0,-1, datacontrolrowtype. datarow, datacontrolrowstate. Normal) 'Create a cell  Dim Tcell As   New Tablecelltcell. Controls. Add (gvdetail) 'Set a cell. Tcell. Attributes. Add ( "Colspan" , "7" ) 'Setting... Tcell. Attributes. Add ( "Align" , "Center" ) 'Cell into gridviewrow Gvrow. cells. Add (Tcell)'Gridviewrow' is placed in the gridview. E. Row. Parent. Controls. addat (E. Row. rowindex + 2, gvrow) End   If  End   If  End   If  End Sub

The last related program is attached here.

Theaddetail.zip

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.