Post
Ask Question

GridView Control in ASP.NET: Part 5

Please you do read earlier parts of this article for complete understanding in GridView.

Part - 4

Using Fields with GridView Control

As to solve some of problems like enabling the GridView to render its columns automatically is that we give up any control over column formatting. For example, the BoxOfficeTotals column is displayed as a decimal amount without any currency formatting. The EnTRyDate column always displays in short-date and long-time format. The solution to such problems is to specify explicitly the fields that a GridView displays. The GridView control supports the following types of fields:

  • BoundField Enables us to display the value of a data item as text.
  • CheckBoxField Enables us to display the value of a data item as a check box.
  • CommandField Enables us to display links for editing, deleting, and selecting rows.
  • ButtonField Enables us to display the value of a data item as a button (image button, link button, or push button).
  • HyperLinkField Enables us to display the value of a data item as a link.
  • ImageField Enables us to display the value of a data item as an image.
  • TemplateField Enables us to customize the appearance of a data item.

Using CommandFields

We use CommandField to customize the appearance of the Edit, Delete, Update, Cancel and Select buttons displayed by the GridView control by default. We can change these all control by own. Let's take a look.

Grid5.gif

 <%@ Page Language="VB" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script runat="server">
 </script>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
    <title></title>
 </head>
<body>
     <form id="form1" runat="server">
    <div>

        <asp:GridView 
        ID="GridView1" 
        runat="server" 
        AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1" 
        EmptyDataText="There are no data records to display." 
        Width="788px" 
        DataKeyNames="ID">
            <Columns>
                <asp:BoundField 
                DataField="ID" 
                HeaderText="ID" 
                SortExpression="ID" />
                <asp:BoundField 
                DataField="NAME" 
                HeaderText="NAME" 
                SortExpression="NAME" />
                <asp:BoundField 
                DataField="ADDRESS" 
                HeaderText="ADDRESS" 
                SortExpression="ADDRESS" />
                <asp:BoundField 
                DataField="MOBILE" 
                HeaderText="MOBILE" 
                SortExpression="MOBILE" />
                <asp:CommandField
            ButtonType="Image"
            ShowEditButton="true"
            EditText="Edit Movie"
            EditImageUrl="~/images/edit.GIF"
            UpdateText="Update Movie"
            updateimageurl="~/images/update.GIF"
            ShowCancelButton="true"
            CancelText="Cancel Edit"
            cancelimageurl="~/images/cancel.GIF"
            ShowDeleteButton="true"
            DeleteText="Delete Movie"
            Deleteimageurl="~/images/delete.GIF"/>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>" 
            DeleteCommand="DELETE FROM MYTB WHERE ID=@ID" 
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>" 
            SelectCommand="SELECT [ID], [NAME], [ADDRESS], [MOBILE] FROM [MYTB]" 
            UpdateCommand="UPDATE MYTB SET ID =@ID, NAME =@NAME, ADDRESS =@ADDRESS, MOBILE =@MOBILE WHERE ID=@ID">
        </asp:SqlDataSource>

       </div>
    </form>
 </body>
</html>

Notice that we do not enable the AutoGenerateEditButton or AutoGenerateDeleteButton properties when using a CommandField. Instead, we use the CommandField to set up the standard editing buttons explicitly.

The CommandField supports the following properties:

  • ButtonType Enables we to specify the type of button displayed by the CommandField. Possible values are Button, Image, and Link.
  • CancelImageUrl Enables we to specify an image to display for the Cancel button.
  • CancelText Enables we to specify the text to display for the Cancel button.
  • CausesValidation Enables we to disable validation when an edit button is clicked.
  • DeleteImageUrl Enables we to specify an image to display for the Delete button.
  • DeleteText Enables we to specify the text to display for the Delete button.
  • EditImageUrl Enables we to specify an image to display for the Edit button.
  • EditText Enables we to specify the text todisplay for the Edit button.
  • InsertImageUrl Enables we to specify an image to display for the Insert button.
  • InsertText Enables we to specify the text to display for the Insert button.
  • NewImageUrl Enables we to specify an imageto display for the New button (does not apply to GridView).
  • NewText Enables we to specify the text to display for the New button.
  • SelectImageUrl Enables we to specify the image to display for the Select button.
  • SelectText Enables we to specify the text to display for the Select button.
  • ShowCancelButton Enables we to display theCancel button.
  • ShowDeleteButton Enables we to display theDelete button.
  • ShowEditButton Enables we to display the Edit button.
  • ShowInsertButton Enables we to display theInsert button (does not apply to GridView).
  • ShowSelectButton Enables we to display theSelect button.
  • UpdateImageUrl Enables we to specify the image to display for the Update button.
  • UpdateText Enables we to specify the text to display for the Update button.
  • ValidationGroup Enables we to associate the edit buttons with a validation group.

Note: Continue in Next Part.
HAVE A GREAT CODING!


Similar Articles