June 28, 2021

Programmingempire

To begin with, the CRUD operations stand for Create, Read, Update, and Delete. As can be seen, the CRUD operations are essential in most web applications that maintain data. Today I will explain how to perform CRUD Operations with DataGrid in ASP.NET. Basically, DataGrid is a data-bound control in ASP.NET. Therefore, it can display the data from a data source.

The following example makes use of the data from a SQL Server database table called Items as shown below.

Database Table - Items — **Database Table – Items**

Since the above table contains four fields, we need to create four columns in the DataGrid. Also, each row in DataGrid represents a record in the table. At first, we place a DataGrid control from ToolBox on the WebForm. In its simplest form, the DataGrid control will look like this.

<asp:DataGrid ID="DataGrid1" runat="server"
> </asp:DataGrid>

Further, we specify certain properties related to the appearance of DataGrid as shown below.

<asp:DataGrid ID="DataGrid1" runat="server"
                 AutoGenerateColumns="false" DataKeyField="item_id" 
                BackColor="Lavender" Font-Bold="true" BorderColor="Navy"
                 BorderStyle="Outset" BorderWidth="4"
                  CellPadding="10" CellSpacing="10"
                 Font-Size="Large">
            </asp:DataGrid>

Because, we generate columns of the DataGrid manually, so AutoGenerateColumns property is set to false. Further, specify the key of the table using the DataKeyField property.

Since we need to perform the update, insert, and delete operations, the following event handler functions are required and should be specified as the properties in DataGrid.

In order to trigger the edit operation, the OnEditCommand property is assigned the corresponding method name.
Further, for performing update operations, OnUpdateCommand will be used.
For the purpose of canceling the edit operation, we use the OnCancelCommand property.
In order to run the delete query, we use the OnDeleteCommand property.
OnItemDataBound property is used to insert a record.

The following code shows these properties.

<asp:DataGrid ID="DataGrid1" runat="server"
                 AutoGenerateColumns="false" DataKeyField="item_id" 
                OnCancelCommand="DataGrid1_CancelCommand" 
                OnEditCommand="DataGrid1_EditCommand" 
                OnUpdateCommand="DataGrid1_UpdateCommand"
                 BackColor="Lavender" Font-Bold="true" BorderColor="Navy"
                 BorderStyle="Outset" BorderWidth="4"
                  CellPadding="10" CellSpacing="10"
                 Font-Size="Large" OnDeleteCommand="DataGrid1_DeleteCommand" 
                 OnItemCommand="DataGrid1_ItemCommand" ShowFooter="true">
            </asp:DataGrid>

Creating Columns for Performing CRUD Operations with DataGrid

In brief, the DataGrid control supports following columns.

For the purpose of using custom controls such as Labels, and TextBox, we use the TemplateColumn.
In order to display editing commands in a column, we use EditCommandColumn.
ButtonColumn shows a Command Button for each item. Therefore, we can display a custom button in front of each row such as a Delete button.
For the purpose of binding a field to a column, we use BoundColumn.
Lastly, the HyperlinkColumn displays the content of a column as a hyperlink.

Creating Templates inside a TemplateColumn

Since we can create a customized layout inside a column comprising of various controls, this column type uses a number of templates. The following list shows these templates.

Basically, ItemTemplate is the template that we use to display a data item and it may have Label control to display the value of data items. Also, the ItemTemplate can have any other control like an Image control to display a picture.
Whenever an item is selected for editing, the EditItemTemplate shows the corresponding layout. For instance, an EditItemTemplate can show text boxes for entering values.
HeaderTemplate and FooterTemplate are used to display the heading section and footer section respectively.

Now that we have an understanding of columns and templates in DataGrid, let us create columns to display data from the Items table mentioned above.

Creating Columns in a DataGrid Control.

Programmingempire

Creating Columns for Performing CRUD Operations with DataGrid

Creating Templates inside a TemplateColumn

Further Reading

You may also like...

Insert a Record Using ItemCommand Event in DataGrid

Binding Data to Web Control in ADO.NET

Display Images Using DataList Control