Data Bound Controls in ASP.Net - Part 3 (Grid View control)

 The GridView control allows for tabular data display and editing using a declarative approach. GridView is the successor to the DataGrid control. The following features are available in the GridView control.
·         Binding to data source controls, such as SqlDataSource.
·         Built-in updating, deleting and sorting capabilities.
·         Built-in paging and row selection capabilities.
·         Programmatic access to the GridView object model to dynamically set properties, handle events, and so on.
·         Multiple key fields.
·         Multiple data fields for the hyperlink columns.
·         Customizable appearance through themes and styles.

Each column in the GridView control is represented by a DataControlField object. By default, the AutoGenerateColumns property is set to true, which creates an AutoGeneratedField object for each field in the data source. Each field is then rendered as a column in the GridView control in the order that each field appears in the data source.
You can also manually control which column fields appear in the GridView control by setting theAutoGenerateColumns property to false and then defining your own column field collection. Different column field types determine the behavior of the columns in the control.
The following table lists the different column field types that can be used.
Column field type
Description
BoundField
Displays the value of a field in a data source. This is the default column type of the GridView control.
ButtonField
Displays a command button for each item in the GridView control. This allows you to create a column of custom button controls, such as the Add or the Remove button.
CheckBoxField
Displays a check box for each item in the GridView control. This column field type is commonly used to display fields with a Boolean value.
CommandField
Displays predefined command buttons to perform selecting, editing, or deleting operations.
HyperLinkField
Displays the value of a field in a data source as a hyperlink. This column field type allows you to bind a second field to the hyperlink's URL.
ImageField
Displays an image for each item in the GridView control.
TemplateField
Displays user-defined content for each item in the GridView control according to a specified template. This column field type allows you to create a custom column field.


To define a column field collection declaratively, first add opening and closing <Columns> tags between the opening and closing tags of the GridView control.

<asp:GridView ID="gvObj" runat="server" Width="100%" >
<Columns>

</Columns>
</asp:GridView>

Next, list the column fields that you want to include between the opening and closing <Columns> tags. The columns specified are added to the Columns collection in the order listed. The Columns collection stores all the column fields in the control and allows you to programmatically manage the column fields in the GridView control.

Explicitly declared column fields can be displayed in combination with automatically generated column fields. When both are used, explicitly declared column fields are rendered first, followed by the automatically generated column fields.
<asp:GridView  ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="true">
<Columns>
<asp:BoundField DataField ="MyField1" HeaderText="Col-1" HeaderStyle-CssClass="cssGridHeader" ItemStyle-CssClass="cssGrid" FooterStyle-CssClass="cssGridFooter"  />
<asp:BoundField DataField ="MyField2" HeaderText="Col-2" HeaderStyle-CssClass="cssGridHeader" ItemStyle-CssClass="cssGrid" FooterStyle-CssClass="cssGridFooter"  />
</Columns>
</asp:GridView>

The GridView control can be bound to a data source control (such as SqlDataSource, ObjectDataSource, etc.), as well as any data source that implements the System.Collections.IEnumerable interface (such as System.Data.DataView, System.Collections.ArrayList, or System.Collections.Hashtable).

Use one of the following methods to bind the GridView control to the appropriate data source type:
·         To bind to a data source control, set the DataSourceID property of the GridView control to the ID value of the data source control. The GridView control automatically binds to the specified data source control and can take advantage of the data source control's capabilities to perform sorting, updating, deleting, and paging functionality. This is the preferred method to bind to data.

<asp:GridView ID="cgvObject" runat="server" Width="100%" DataSourceID="MySqlSource1" >

·         To bind to a data source that implements the System.Collections.IEnumerable interface, programmatically set the DataSource property of the GridView control to the data source and then call the DataBind method. When using this method, the GridView control does not provide built-in sorting, updating, deleting, and paging functionality. You need to provide this functionality yourself.


this.gvObj.DataSource = oDataTable;
this.gvObj.DataBind();

The automatic updating, deleting, and selection functionalities are enabled when a button in a ButtonField orTemplateField column field, with a command name of "Edit", "Delete", and "Select", respectively, is clicked. The GridView control can automatically add a CommandField column field with an Edit, Delete, or Select button if the AutoGenerateEditButton, AutoGenerateDeleteButton, or AutoGenerateSelectButton property is set to true, respectively.

<asp:GridView  ID="gvObj" runat="server" Width="100%" AutoGenerateColumns="false" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" AllowPaging="true"
> 
       <Columns>
              <asp:TemplateField>
                     <HeaderTemplate>
MyColumnHeader
</HeaderTemplate>
                     <ItemTemplate>
                           <a href="#">My Column Data</a>
                     </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Instead of displaying all the records in the data source at the same time, the GridView control can automatically break the records up into pages. To enable paging, set the AllowPaging property to true.
Inserting records into the data source is not directly supported by the GridView control. However, it is possible to insert records by using the GridView control in conjunction with the DetailsView or FormView control.

You can customize the appearance of the GridView control by setting the style properties for the different parts of the control. The following table lists the different style properties.
Style property
Description
AlternatingRowStyle
The style settings for the alternating data rows in the GridView control. When this property is set, the data rows are displayed alternating between the RowStyle settings and the AlternatingRowStyle settings.
EditRowStyle
The style settings for the row being edited in the GridView control.
EmptyDataRowStyle
The style settings for the empty data row displayed in the GridView control when the data source does not contain any records.
FooterStyle
The style settings for the footer row of the GridView control.
HeaderStyle
The style settings for the header row of the GridView control.
PagerStyle
The style settings for the pager row of the GridView control.
RowStyle
The style settings for the data rows in the GridView control. When theAlternatingRowStyle property is also set, the data rows are displayed alternating between the RowStyle settings and the AlternatingRowStyle settings.
SelectedRowStyle
The style settings for the selected row in the GridView control.

<asp:GridView  ID="gvObj" runat="server" Width="100%" >
       <Columns>
              <asp:TemplateField>
                     <HeaderStyle CssClass="cssGridHeader"></HeaderStyle>
                     <HeaderTemplate>
MyColumnHeader
</HeaderTemplate>
                     <ItemStyle CssClass="cssGrid" Width="30px"></ItemStyle>
                     <ItemTemplate>
                           <a href="#">My Column Data</a>
                     </ItemTemplate>
                     <FooterStyle CssClass="cssGridFooter"></FooterStyle>
</asp:TemplateField>
</Columns>
</asp:GridView>

You can also show or hide different parts of the control. The following table lists the properties that control which parts are shown or hidden.
Property
Description
ShowFooter
Shows or hides the footer section of the GridView control.
ShowHeader
Shows or hides the header section of the GridView control.

Events

The GridView control provides several events that you can program against. This allows you to run a custom routine whenever an event occurs. The following table lists the events supported by the GridView control.
Event
Description
PageIndexChanged
Occurs when one of the pager buttons is clicked, but after the GridView control handles the paging operation. This event is commonly used when you need to perform a task after the user navigates to a different page in the control.
PageIndexChanging
Occurs when one of the pager buttons is clicked, but before the GridView control handles the paging operation. This event is often used to cancel the paging operation.
RowCancelingEdit
Occurs when a row's Cancel button is clicked, but before the GridView control exits edit mode. This event is often used to stop the canceling operation.
RowCommand
Occurs when a button is clicked in the GridView control. This event is often used to perform a task when a button is clicked in the control.
RowCreated
Occurs when a new row is created in the GridView control. This event is often used to modify the contents of a row when the row is created.
RowDataBound
Occurs when a data row is bound to data in the GridView control. This event is often used to modify the contents of a row when the row is bound to data.
RowDeleted
Occurs when a row's Delete button is clicked, but after the GridView control deletes the record from the data source. This event is often used to check the results of the delete operation.
RowDeleting
Occurs when a row's Delete button is clicked, but before the GridView control deletes the record from the data source. This event is often used to cancel the deleting operation.
RowEditing
Occurs when a row's Edit button is clicked, but before the GridView control enters edit mode. This event is often used to cancel the editing operation.
RowUpdated
Occurs when a row's Update button is clicked, but after the GridView control updates the row. This event is often used to check the results of the update operation.
RowUpdating
Occurs when a row's Update button is clicked, but before the GridView control updates the row. This event is often used to cancel the updating operation.
SelectedIndexChanged
Occurs when a row's Select button is clicked, but after the GridView control handles the select operation. This event is often used to perform a task after a row is selected in the control.
SelectedIndexChanging
Occurs when a row's Select button is clicked, but before the GridView control handles the select operation. This event is often used to cancel the selection operation.
Sorted
Occurs when the hyperlink to sort a column is clicked, but after the GridView control handles the sort operation. This event is commonly used to perform a task after the user clicks on a hyperlink to sort a column.
Sorting
Occurs when the hyperlink to sort a column is clicked, but before the GridView control handles the sort operation. This event is often used to cancel the sorting operation or to perform a custom sorting routine.


Comments

Popular posts from this blog

Data Bound Controls in ASP.Net - Part 4 (FormView and DetailsView controls)

JavaScript - ES2015 (aka ES6)

The Clickjacking attack and X-Frame-Options