DataGrid Custom Field content

Because the autogeneratecolumn attribute of the DataGrid web control is set to true, all fields in the data source are automatically generated. To customize the fields to be displayed in the DataGrid web control, set the autogeneratecolumn attribute to false and set the columns attribute. The syntax is as follows:

<Property name = "columns">
<Asp: boundcolumn/>
<Asp: buttoncolumn/>
<Asp: editcommandcolumn/>
<Asp: hyperlinkcolumn/>
<Asp: templatecolumn>
Sample settings...
</ASP: templatecolumn>
</Property>

The fields that the DataGrid web control allows us to define are shown in the following table:

Field type description
The content of the boundcolumn field is displayed as a label.
The content of the buttoncolumn field is displayed as a hyperlink or button.
Editcommandcolumn provides data compilation commands without displaying field data.
The content of the hyperlinkcolumn field is displayed as a hyperlink.
The content of the templatecolumn field is displayed in a custom sample.

BelowProgramCodeThe snippets show the following fields:

<Asp: DataGrid id = "DGA" allowpaging = "true" pagesize = "5"
Onpageindexchanged = "dga_pagechg" runat = "server"
Pagerstyle-mode = "numericpages" bordercolor = "#808080"
Headerstyle-font-names = "Courier New"
Headerstyle-backcolor = "# d1dceb"
Autogeneratecolumns = "false">
<Property name = "columns">
<Asp: boundcolumn
Headertext = "name"
Datafield = "username"/>
<Asp: buttoncolumn
Headertext = "phone"
Buttontype = "Pushbutton"
Datatextfield = "usertel"/>
<Asp: hyperlinkcolumn
Headertext = "email"
Datanavigateurlfield = "useremail"
Datatextfield = "useremail"/>
<Asp: templatecolumn
Headertext = "Address">
<Template Name = "itemtemplate">
<Asp: Image imageurl = "ico1.gif" runat = "server"/>
<% # Container. dataitem ("useradd") %>
</Template>
</ASP: templatecolumn>
<Asp: editcommandcolumn
Headertext = "edit"
Buttontype = "Pushbutton"
Canceltext = "abandon"
Edittext = "edit"
Updatetext = "OK"/>
</Property>
</ASP: DataGrid>

The common basic attributes of these fields are shown in the following table:

Attribute description
The text displayed at the bottom of the field.
Headerimageurl is used to replace the image file address of the field title.
The text to be displayed in the headertext field title.
Reference of the DataGrid to which the field returned by the owner belongs.
Sortfield specifies the name of the field in the data source to be sorted by this field.
Status of the returned field.
Visible is used to set whether to display a field, true/false.
These fields also support many style objects, allowing us to flexibly customize their display appearances, as shown in the following table:

Style object style Category Description
The style to be displayed in the footerstyle tableitem footer.
The style to be displayed in the headerstyle tableitem header.
Itemstyle: The style to be displayed for each project.

Boundcolumn

The main function of boundcolumn is to use label to display the content of a field in the data source. The syntax is as follows:

<Asp: boundcolumn
Datafield = "performancefield"
Dataformatstring = "formatstring"
Footertext = "footertext"
Headerimageurl = "url"
Headertext = "headertext"
Readonly = "True | false"
Sortfield = "performancefieldtosortby"
Visible = "True | false"
Footerstyle-property = "value"
Headerstyle-property = "value"
Itemstyle-property = "value"
/>

In addition to common basic attributes and style objects, common attributes are shown in the following table:

Attribute description
The name of the data source field to be displayed in datafield.
The format of the data to be displayed in dataformatstring.
Readonly sets whether the field is read-only, true/false.

The following code snippets use boundcolumn to display the field content:

<Asp: DataGrid id = "DGA" allowpaging = "true" pagesize = "5"
Onpageindexchanged = "dga_pagechg" runat = "server"
Pagerstyle-mode = "numericpages" bordercolor = "#808080"
Headerstyle-font-names = "Courier New"
Headerstyle-backcolor = "# d1dceb"
Autogeneratecolumns = "false">
<Property name = "columns">
<Asp: boundcolumn
Headertext = "name"
Headerstyle-font-bold = "true"
Headerstyle-horizontalalign = "center"
Datafield = "username"/>
<Asp: boundcolumn
Headertext = "phone"
Headerstyle-font-bold = "true"
Headerstyle-horizontalalign = "center"
Datafield = "usertel"/>
<Asp: boundcolumn
Headertext = "Address"
Headerstyle-font-bold = "true"
Headerstyle-horizontalalign = "center"
Datafield = "useradd"/>
</Property>
</ASP: DataGrid>

Buttoncolumn

The main function of boundcolumn is to use linkbutton or Pushbutton to display the content of a field in the data source and trigger the event of the DataGrid web control. The syntax is as follows:

<Asp: buttoncolumn
Buttontype = "linkbutton | Pushbutton"
Commandname = "command name"
Datatextfield = "datasourcefield"
Datatextformatstring = "formatstring"
Footertext = "footertext"
Headerimageurl = "url"
Headertext = "headertext"
Readonly = "True | false"
Sortfield = "performancefieldtosortby"
TEXT = "buttoncaption"
Visible = "True | false"
/>

In addition to common basic attributes and style objects, common attributes are shown in the following table:

Attribute description
The type of the button to be used by the buttontype. The default value is linkbutton.
Commandname command name.
Datatextfield specifies the name of the data source field to be displayed on the control.
The format of the data to be displayed in datatextformatstring.
Text sets the text to be displayed on the control. If the datatextfield attribute is specified, this attribute is invalid.

The following code example uses boundcolumn to display the field content and displays the records selected by the user:

<% @ Import namespace = system. Data. Ado %>
<% @ Import namespace = system. Data %>
<! -- # Include file = "gettable. Inc" -->
<HTML>
<Form runat = "server">
<Asp: DataGrid id = "DGA" allowpaging = "true" pagesize = "5"
Onpageindexchanged = "dga_pagechg" runat = "server"
Pagerstyle-mode = "numericpages" bordercolor = "#808080"
Headerstyle-font-names = "Courier New"
Headerstyle-backcolor = "# d1dceb"
Headerstyle-font-bold = "true" headerstyle-horizontalalign = "center"
Autogeneratecolumns = "false"
Onitemcommand = "dga_icmd">
<Property name = "columns">
<Asp: buttoncolumn
Headertext = "name"
Datatextfield = "username"/>
<Asp: boundcolumn
Headertext = "phone"
Datafield = "usertel"/>
<Asp: boundcolumn
Headertext = "Address"
Datafield = "useradd"/>
</Property>
</ASP: DataGrid>
</Form>
<Asp: Label id = "label1" runat = "server"/>
<Script language = "VB" runat = "server">
Sub page_load (sender as object, e as eventargs)
If page. ispostback = false then
Dim dtdatatable as datatable = gettable ("ch08 \ myweb. mdb", "members ")
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End if
Label1.text = "You have not selected any records currently ."
End sub
Sub dga_pagechg (sender as object, e as datagridpagechangedeventargs)
Dim dtdatatable as datatable = gettable ("ch08 \ myweb. mdb", "members ")
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub
Sub dga_icmd (sender as object, e as datagridcommandeventargs)
Dim shtrow as short = E. Item. itemindex + 1
If shtrow <> 0 then
Label1.text = "you clicked the data in the" & shtrow. tostring () & "field, which <br> indicates the data in the data source"
Label1.text + = (DGA. currentpageindex * DGA. pagesize) + shtrow). tostring & "pen record ."
End if
End sub
</SCRIPT>
</Html>

In the preceding example, we specify the onitemcommand attribute of the DataGrid web control as dga_icmd, which indicates that the dga_ccmd event is triggered when the user name is displayed in buttoncolumn, And the dga_icmd event program is executed. The following code snippet is shown:

Sub dga_icmd (sender as object, e as datagridcommandeventargs)
Dim shtrow as short = E. Item. itemindex + 1
If shtrow <> 0 then
Label1.text = "you clicked the data in the" & shtrow. tostring () & "field, which <br> indicates the data in the data source"
Label1.text + = (DGA. currentpageindex * DGA. pagesize) + shtrow). tostring & "pen record ."
End if
End sub

In this event program, we use E. item. the itemindex attribute obtains the index values of the items selected by the user. Since the index starts from 0, we add 1 to indicate that the items selected are selected. If no item is selected, the E. Item. itemindex attribute is returned to-1. Because the shtrow variable is the result of adding 1 to E. Item. itemindex, we can determine whether the shtrow variable has any options by judging whether the shtrow variable is 0.
Because E. item. the itemindex property returns the item selected by the user on the DataGrid web control, not the address recorded in the data source. Therefore, After calculating the current page index multiplied by the number of records on each page, add the current field to obtain the actual address of the data in the data source. Therefore, if the user selects the fourth field on the sixth page, the expression is (5*5) + 4, and the result 29 is the actual order recorded in the data source.
To obtain the index value of the record in the data source, because the index value starts from 0, you only need to subtract 1.

Hyperlinkcolumn

Hyperlinkcolumn is mainly used to display the content of a field in the data source through a hyperlink, And you can specify the address to be enabled when the user clicks the project. The syntax is as follows:

<Asp: hyperlinkcolumn
Datanavigateurlfield = "performancefield"
Datanavigateurlformatstring = "formatexpression"
Datatextfield = "datasourcefield"
Datatextformatstring = "formatexpression"
Footertext = "footertext"
Headerimageurl = "url"
Headertext = "headertext"
Navigateurl = "url"
Readonly = "True | false"
Sortfield = "performancefieldtosortby"
Target = "window"
TEXT = "hyperlinktext"
Visible = "True | false"
/>

In addition to common basic attributes and style objects, common attributes are shown in the following table:

Attribute description
Datanavigateurlfield specifies the field value to be used as the target address of the hyperlink.
Datanavigateurlformatstring sets the format string to enable the link.
Datatextfield specifies the name of the data source field to be displayed on the control.
The format of the data to be displayed in datatextformatstring.
Navigateurl: Set the URL to be linked. If the datanavigateurlfield attribute is specified,
This attribute is invalid.
Target: set the target to be enabled for the link.
Text
Set the text to be displayed on the control. If the datatextfield attribute is specified
The property is invalid.

The following code example uses hyperlink column to display the user's email box field. If the user clicks a record, the mail editing software is Enabled:

<% @ Import namespace = system. Data. Ado %>
<% @ Import namespace = system. Data %>
<! -- # Include file = "gettable. Inc" -->
<HTML>
<Form runat = "server">
<Asp: DataGrid id = "DGA" allowpaging = "true" pagesize = "5"
Onpageindexchanged = "dga_pagechg" runat = "server"
Pagerstyle-mode = "numericpages" bordercolor = "#808080"
Headerstyle-font-names = "Courier New"
Headerstyle-backcolor = "# d1dceb"
Headerstyle-font-bold = "true"
Headerstyle-horizontalalign = "center"
Autogeneratecolumns = "false">
<Property name = "columns">
<Asp: boundcolumn
Headertext = "name"
Datafield = "username"/>
<Asp: boundcolumn
Headertext = "phone"
Datafield = "usertel"/>
<Asp: hyperlinkcolumn
Headertext = "email"
Datanavigateurlfield = "useremail"
Datatextfield = "useremail"
Datanavigateurlformatstring = "mailto: {0}"/>
</Property>
</ASP: DataGrid>
</Form>
<Script language = "VB" runat = "server">
Sub page_load (sender as object, e as eventargs)
If page. ispostback = false then
Dim dtdatatable as datatable = gettable ("ch08 \ myweb. mdb", "members ")
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End if
End sub
Sub dga_pagechg (sender as object, e as datagridpagechangedeventargs)
Dim dtdatatable as datatable = gettable ("ch08 \ myweb. mdb", "members ")
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub
</SCRIPT>
</Html>

In the above example, we use the useremail field as the display and target to be linked. Because we want users to enable outlook to edit emails when selecting any project in this field, we must add mailto: before the user's email address :」. To achieve this goal, you can set the datanavigateurlformatstring attribute;

The following code snippet is shown:

Datanavigateurlformatstring = "mailto: {0 }"
"{0}" is replaced by the content of datanavigateurlfield. Therefore, the execution result is as follows:
If the hyperlink content is a URL, set the content of the navigateurlformatstring attribute to "http: // {0 }"」
You can.

Editcommandcolumn

The main function of editcommandcolumn is to use linkbutton or Pushbutton to issue the command for editing data and trigger the event of the DataGrid web control. When the editcommandcolumn enters the editing mode, a textbox is generated for the user to edit. It can also be used with the templatecolumn. We will describe the templatecolumn later. The syntax is as follows:

ASP: editcommandcolumn
Buttontype = "linkbutton | Pushbutton"
Canceltext = "cancelbuttoncaption"
Edittext = "editbuttoncaption"
Footertext = "footertext"
Headerimageurl = "url"
Headertext = "headertext"
Readonly = "True | false"
Sortfield = "performancefieldtosortby"
Updatetext = "updatebuttoncaption"
Visible = "True | false"
/>

In addition to common basic attributes and style objects, common attributes are shown in the following table:

Attribute description
The type of the button to be used by the buttontype. The default value is linkbutton.
Edittext: edit the text to be displayed to the user.
The text to be displayed to the user when updatetext updates the data.
Canceltext does not edit the text to be displayed to the user.
When you click the control that displays edittext, The DataGrid web control automatically triggers the oneditcommand event and executes the event program specified by the oneditcommand attribute; if you click the control image that displays updatetext and canceltext content, the onupdatecommand and oncancelcommand events are also automatically triggered. The following code example adds a ditcommandcolumn field and displays the button selected by the user:

<% @ Import namespace = system. Data. Ado %>
<% @ Import namespace = system. Data %>
<! -- # Include file = "gettable. Inc" -->
<HTML>
<Form runat = "server">
<Asp: DataGrid id = "DGA" allowpaging = "true" pagesize = "5"
Onpageindexchanged = "dga_pagechg" runat = "server"
Pagerstyle-mode = "numericpages" bordercolor = "#808080"
Headerstyle-font-names = "Courier New"
Headerstyle-backcolor = "# d1dceb"
Headerstyle-font-bold = "true" headerstyle-horizontalalign = "center"
Oneditcommand = "dga_ecmd" onupdatecommand = "dga_ucmd"
Oncancelcommand = "dga_ccmd">
<Property name = "columns">
<Asp: boundcolumn
Headertext = "name"
Datafield = "username"/>
<Asp: boundcolumn
Headertext = "phone"
Datafield = "usertel"/>
<Asp: editcommandcolumn
Headertext = "edit"
Buttontype = "Pushbutton"
Edittext = "edit"
Updatetext = "Update"
Canceltext = "abandon"/>
</Property>
</ASP: DataGrid>
</Form>
<Asp: Label id = "label1" runat = "server"/>
<Script language = "VB" runat = "server">
Dim dtdatatable as datatable = gettable ("ch08 \ myweb. mdb", "members ")
Sub page_load (sender as object, e as eventargs)
If page. ispostback = false then
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End if
End sub
Sub dga_pagechg (sender as object, e as datagridpagechangedeventargs)
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub
Sub dga_ecmd (sender as object, e as datagridcommandeventargs)
Label1.text = "you clicked the number" & (E. Item. itemindex + 1). tostring & "Edit fields ."
DGA. edititemindex = E. Item. itemindex
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub
Sub dga_ucmd (sender as object, e as datagridcommandeventargs)
Label1.text = "you clicked the number" & (E. Item. itemindex + 1). tostring & "Update of fields ."
DGA. edititemindex =-1
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub
Sub dga_ccmd (sender as object, e as datagridcommandeventargs)
Label1.text = "you clicked the number" & (E. Item. itemindex + 1). tostring & "discard of fields ."
DGA. edititemindex =-1
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub
</SCRIPT>
</Html>

In the above example, because the datatable object is intended for use by other event programs, we declare it in the webpage-class declaration area.
We also specify the oneditcommand event, onupdatecommand event, and oncancelcommand event. When you press the edit button, the specified dga_ecmd event program is automatically triggered, as shown in the following code example:

Sub dga_ecmd (sender as object, e as datagridcommandeventargs)
Label1.text = "you clicked the number" & (E. Item. itemindex + 1). tostring & "Edit fields ."
DGA. edititemindex = E. Item. itemindex
DGA. datasource = dtdatatable. defaultview
Page. databind ()
End sub

The code snippet above sets the edititemindex attribute of the DataGrid to the index value of the record selected by the user, so the record enters the editing mode; in this case, the "edit" button in the original field is changed to "Update" and "discard 」.
If you click Update or discard after editing, the specified onupdatecommand is triggered.
Or oncancelcommand events. These events finally set the edititemindex attribute of the DataGrid object to-1,
Indicates that no project is edited and the data is returned to the original display mode.

Note: The above code is in the form of VB, where system. Data. Ado should be system. Data. oledb
* *** From Asp.net programming Basics