June 29, 2021

Programmingempire

This article demonstrates how to Insert a Record Using ItemCommand Event in DataGrid. Before proceeding further, you can go through these articles for an understanding of the DataGrid control.

Since we are using the same database table Items in this example, there are four fields in the table for which the will enter values – item_id, item_name, price, quantity.

In order to use controls like a TextBox that allows users to enter values, we need to use a template within a column. For instance, suppose we are using ItemTemplate in a TemplateColumn to show the value of a field, then we can also use a FooterTemplate to display a TextBox also within the same column. The following code shows the DataGrid control with FooterTemplate.

             <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" 
                 OnItemCommand="DataGrid1_ItemCommand" ShowFooter="true">
                <Columns>
                    <asp:TemplateColumn>
                        <HeaderStyle BackColor="LightBlue" ForeColor="Navy"/>
                        <HeaderTemplate>
                            Item ID
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server"
                                Text='<%#DataBinder.Eval(Container,"DataItem.item_id") %>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Button ID="Button1" runat="server" Text="Insert"
                                 CommandName="AddNew"/>
                            <asp:TextBox ID="t11" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn>
                        <HeaderStyle BackColor="LightBlue" ForeColor="Navy"/>
                        <HeaderTemplate>
                            Item Name
                        </HeaderTemplate>
                        <ItemTemplate>
                           <asp:Label ID="Label2" runat="server" 
                               Text='<%#DataBinder.Eval(Container,"DataItem.item_name") %>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="t4" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn>
                        <HeaderStyle BackColor="LightBlue" ForeColor="Navy"/>
                        <HeaderTemplate>
                            Price
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" 
                                Text='<%#DataBinder.Eval(Container,"DataItem.price") %>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="t5" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn>
                        <HeaderStyle BackColor="LightBlue" ForeColor="Navy"/>
                        <HeaderTemplate>
                            Quantity
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label4" runat="server" 
                                Text='<%#DataBinder.Eval(Container,"DataItem.quantity") %>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="t6" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateColumn>
                </Columns>
            </asp:DataGrid>

The following image shows the resulting DataGrid with FooterTemplate. As can be seen, the first column also includes a command button. Also, we set the ShowFooter property in the DataGrid to true so that the footer section remains visible.

As can be noted, the DataGrid handles the ItemCommand event so that we can define the corresponding event handler for performing the insert operations. The following code demonstrates the ItemCommand event handler.

        protected void DataGrid1_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
        {
            TextBox tx, ty, tz, tw;
            if (e.CommandName.Equals("AddNew"))
            {

                tx = (TextBox)e.Item.FindControl("t11");
                ty = (TextBox)e.Item.FindControl("t4");
                tz = (TextBox)e.Item.FindControl("t5");
                tw = (TextBox)e.Item.FindControl("t6");

                int k = Int32.Parse(tx.Text);
                String s1 = ty.Text.Trim();
                int a = Int32.Parse(tz.Text);
                int b = Int32.Parse(tw.Text);

                String str = "insert into Items values(@iid, @in, @pr, @qu)";
                Connect();
                SqlCommand cmd = new SqlCommand(str, c1);
                cmd.Parameters.AddWithValue("@iid", k);
                cmd.Parameters.AddWithValue("@in", s1);
                cmd.Parameters.AddWithValue("@pr", a);
                cmd.Parameters.AddWithValue("@qu", b);

                int n = cmd.ExecuteNonQuery();
                if (n > 0)
                {
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "inserted", "<script>alert('Record Inserted Successfully')</script>");
                    DataGrid1.EditItemIndex = -1;
                    c1.Close();
                    BindGrid();
                }
                else
                {
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "inserted", "<script>alert('Record Not Inserted')</script>");
                    DataGrid1.EditItemIndex = -1;
                    c1.Close();
                    BindGrid();
                }
            }
        }

Whenever a user clicks the Insert button, its CommandName property identifies it. Further, the FindControl() method retrieves the data from a specific TextBox. The data is inserted in the database table using a parameterized query.

Output

**Demonstrating How to Insert a Record Using ItemCommand Event in DataGrid**

In order to understand how to perform the Edit operation using a DataGrid, click on the following link.

Programmingempire

Further Reading

You may also like...

XML Documents and DataSet in ASP.NET

Custom Validator Control in ASP.NET

Binding Data to Web Control in ADO.NET