For other types of data, the text content is displayed alternately, The CheckBoxField check box displays the boolean data type, and the CommandField displays a Button. The buttons can be normal buttons, LinkButton hyperlink buttons, and ImageButton image buttons, the GridView control also provides Templatefield and uses the template. you can customize templates for data fields. templates can contain various static text, lable, and TextBox text boxes. in addition, there are various Templatefield templates that can be used to provide users with Templates in different situations. For example, the ItemTemplate display template can be used to create the display data, but the EditItemTemplate editing template can be used to create the custom header template, FooterTemplate custom table tail template at the time of editing, HeaderTemplate, and FooterTemplate.
Today, we will introduce how to use Templatefield to set the appearance style of the GridView. in the following example, we will use the GridView control to display the employee ID, LastName, FirtName, and BrthDote fields of the employees (employee table) in the Northwind database, and list all employees, employee's last name, name (and display the last name and name in the same grid) hire date, when we edit the data, hire date is displayed in the calendar control.
Create a page and add a SqlDataSource control to the page in the design diagram to provide the data to be displayed for the GridView control, create a connection, and select local or .) in SQL Servert hybrid Verification Mode, enter the user name and password, select a database named Northwind and test the connection. After the connection is successfully tested, save the connection string and click "Next, select the Employees table in "specify from table or view" and select LastName, FirstName, Title, HireDate, and other fields in the selection column. Click "advanced", select the "generate INSERT, UPDATE, and DELETE statements" and "use open concurrency" check boxes, and click "finish" to complete the selection of data.
Add the GridView control to the page. On the convenient task panel, select SqlDataSource and close the convenient task panel. In this way, a data binding control is created. Set the automatic format for the GridView control. Save and run 1,
Figure 1
The HTML code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default. aspx. cs" Inherits = "_ Default" %><! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Asp: SqlDataSource ID = "SqlDataSource1" runat = "server" ConflictDetection = "CompareAllValues"
ConnectionString = "<% $ ConnectionStrings: northwindConnectionString %> "DeleteCommand =" delete from [Employees] WHERE [EmployeeID] = @ original_EmployeeID AND [LastName] = @ reply AND [FirstName] = @ reply AND [Title] = @ original_Title AND [HireDate] = @ original_HireDate"
InsertCommand = "insert into [Employees] ([LastName], [FirstName], [Title], [HireDate]) VALUES (@ LastName, @ FirstName, @ Title, @ HireDate )"
OldValuesParameterFormatString = "original _ {0}" SelectCommand = "SELECT [EmployeeID], [LastName], [FirstName], [Title], [HireDate] FROM [Employees]"
UpdateCommand = "UPDATE [Employees] SET [LastName] = @ LastName, [FirstName] = @ FirstName, [Title] = @ Title, [HireDate] = @ HireDate WHERE [EmployeeID] = @ original_EmployeeID AND [LastName] = @ reply AND [FirstName] = @ original_FirstName AND [Title] = @ original_Title AND [HireDate] = @ original_HireDate ">
<DeleteParameters>
<Asp: Parameter Name = "original_EmployeeID" Type = "Int32"/>
<Asp: Parameter Name = "original_LastName" Type = "String"/>
<Asp: Parameter Name = "original_FirstName" Type = "String"/>
<Asp: Parameter Name = "original_Title" Type = "String"/>
<Asp: Parameter Name = "original_HireDate" Type = "DateTime"/>
</DeleteParameters>
<UpdateParameters>
<Asp: Parameter Name = "LastName" Type = "String"/>
<Asp: Parameter Name = "FirstName" Type = "String"/>
<Asp: Parameter Name = "Title" Type = "String"/>
<Asp: Parameter Name = "HireDate" Type = "DateTime"/>
<Asp: Parameter Name = "original_EmployeeID" Type = "Int32"/>
<Asp: Parameter Name = "original_LastName" Type = "String"/>
<Asp: Parameter Name = "original_FirstName" Type = "String"/>
<Asp: Parameter Name = "original_Title" Type = "String"/>
<Asp: Parameter Name = "original_HireDate" Type = "DateTime"/>
</UpdateParameters>
<InsertParameters>
<Asp: Parameter Name = "LastName" Type = "String"/>
<Asp: Parameter Name = "FirstName" Type = "String"/>
<Asp: Parameter Name = "Title" Type = "String"/>
<Asp: Parameter Name = "HireDate" Type = "DateTime"/>
</InsertParameters>
</Asp: SqlDataSource>
</Div>
<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False" CellPadding = "4"
DataKeyNames = "EmployeeID" performanceid = "sqlperformance1" ForeColor = "#333333" GridLines = "None"
Width = "640px">
<FooterStyle BackColor = "#990000" Font-Bold = "True" ForeColor = "White"/>
<Columns>
<Asp: BoundField DataField = "EmployeeID" HeaderText = "EmployeeID" InsertVisible = "False"
ReadOnly = "True" SortExpression = "EmployeeID"/>
<Asp: BoundField DataField = "LastName" HeaderText = "LastName" SortExpression = "LastName"/>
<Asp: BoundField DataField = "FirstName" HeaderText = "FirstName" SortExpression = "FirstName"/>
<Asp: BoundField DataField = "Title" HeaderText = "Title" SortExpression = "Title"/>
<Asp: BoundField DataField = "HireDate" HeaderText = "HireDate" SortExpression = "HireDate"/>
</Columns>
<RowStyle BackColor = "# FFFBD6" ForeColor = "#333333"/>
<SelectedRowStyle BackColor = "# FFCC66" Font-Bold = "True" ForeColor = "Navy"/>
<PagerStyle BackColor = "# FFCC66" ForeColor = "#333333" HorizontalAlign = "Center"/>
<HeaderStyle BackColor = "#990000" Font-Bold = "True" ForeColor = "White"/>
<AlternatingRowStyle BackColor = "White"/>
</Asp: GridView>
</Form>
</Body>
</Html>
Currently, the names and surnames of each employee are displayed in different tables. We can also display both the surname and name in a table. here, we need to use Templatefield to edit the template. we can add a new Templatefield, add the required tag and syntax databinding, click the Smart Tag connecting to the GridView in the editing column, and select the edit column option. select the option "convert the field to TemplateField" in the lower left corner of the Boundfield attribute, and click "convert to Templatefield", as shown in figure 2.
Figure 2
At this time, we did not find any changes in the design view. In fact, the TemplateField has set the default EditItemTemplate for the firstName field to define the template and ItemTemplate when editing the ordinary template, and replaced the original code.
<Asp: BoundField DataField = "FirstName" HeaderText = "FirstName" SortExpression = "FirstName"/> the new Code is as follows:
As you can see, Templatefield is divided into two templates-ItemTemplate custom common templates use the Lable label to display the data field firstName. When EditItemTemplate is edited, the template displays the data field firstName In the textbox text box. you can see that both templates contain the <% # bind ("fieldname") %> statement to specify the data field to be bound. All the fields we bind are fieldname.
In the design view, you can click the intelligent tag of the GridView template to select an item for editing the touch version to go to the editing interface of the GridView template. 3.
Figure 3
We need to display both the last name and name in a grid. In this case, we only need to edit the ItemTemplate. Select a Lable control from the toolbox and add it to the template editing interface of ItemTemplate. 4.
Figure 4
After adding the Lable tag to the ItemTemplate, We need to bind the data field to it, click the Lable Smart tag, and select Edit databindings option. 5.
Figure 5
The databindings dialog box will pop up. Here you can select the property to be bound and the bound data field. In the property to be bound, select the Text attribute. In the field binding, select the LastName field. 6.
Figure 6
Note: In the databindings dialog box, there is a check box for two-way data binding. This is used only when data is inserted and edited. We will introduce this point later. We will run this program, we can see that both the LastName and FirstName fields are displayed in the FirstName column. 7.
Figure 7
This completes the first step. The following is the HTML code of the modified GridView control:
<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False" CellPadding = "4"
Next, we need to display the employee employment date in the editing state in the calendar control. Click the Smart Tag connecting to the GridView in the editing column and select the edit column option. select the hireddate field, select the option to convert the secondary field to TemplateField in the lower left corner of the Boundfield attribute, and click "convert to Templatefield", as shown in figure 8.
Figure 8
When we enter the "Edit touch" tab again, click the intelligent tag of the GridView, select the edit template, the templatefield contains the tag of ItemTemplate and edititemplatee, select the edititemplatee option of hiredateTemplatefield, and delete the lable tag, select the calendar control from the toolbox and place it on the EditItemTemplate editing template interface. Then, design the Style of the calendar control. 9.
Figure 9
We select the data field to be displayed for the calendar control, and select the selecteddate attribute and the VisibleDate attribute for data binding on the binable attribute respectively. When we click Edit to modify the data of the GridView, in the hireddate column, it is not a text box. Let's enter the date to be modified, but a calendar control that can be used to select a date. This allows you to easily modify the date, it also prevents the exception caused by the fact that the field entered by the user is not a date, as shown in 10.
Figure 10
Run the Program 11.
Figure 11
So far, we have applied two templates: two data fields are displayed simultaneously in the same grid, when editing data, a calendar control is used to select a date instead of entering the editing content in a text box.
The HTML code of the GridView control is as follows:
<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False" CellPadding = "4"</ItemTemplate>
</Asp: TemplateField>
</Columns>
<RowStyle BackColor = "# FFFBD6" ForeColor = "#333333"/>
<SelectedRowStyle BackColor = "# FFCC66" Font-Bold = "True" ForeColor = "Navy"/>
<PagerStyle BackColor = "# FFCC66" ForeColor = "#333333" HorizontalAlign = "Center"/>
<HeaderStyle BackColor = "#990000" Font-Bold = "True" ForeColor = "White"/>
<AlternatingRowStyle BackColor = "White"/>
</Asp: GridView>
You can use templates in the GridView control to flexibly display data, which is highly flexible. You can set unnecessary templates based on different requirements.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
