Post
Ask Question

Create Editable GridView In 3 Steps

In this article, I am going to show how to create an editable GridView in simple steps without coding.
 
Now start Visual Studio and create a new web application project with an empty web form.

Step 1: Add a GridView in the empty form, also add datasource to the gridvew as in the following image:
 
gridview

Step 2:

Now go to Edit Template in the gridview and add textbox in the gridview according to the DataSource available in the database. Choose EditBinding option in the TextBox Task and add the data accordingly as in the following image:

Templet

Step 3:

Add a new column Edit, Update and Delete like the following image. Also add the update comment in the Sql data source. After adding the column now save the project and run application.

Sample GridView Code
  1. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Stu_Id" DataSourceID="SqlDataSource1">  
  2.     <Columns>  
  3.         <asp:BoundField DataField="Stu_Id" HeaderText="Stu_Id" InsertVisible="False" ReadOnly="True" SortExpression="Stu_Id" />  
  4.         <asp:BoundField DataField="Stu_Name" HeaderText="Stu_Name" SortExpression="Stu_Name" />  
  5.         <asp:BoundField DataField="Stu_Age" HeaderText="Stu_Age" SortExpression="Stu_Age" />  
  6.         <asp:BoundField DataField="Stu_class" HeaderText="Stu_class" SortExpression="Stu_class" />  
  7.         <asp:CommandField AccessibleHeaderText="Edit Data" HeaderText="Edit Data" ShowEditButton="True" />  
  8.     </Columns>  
  9.     <EmptyDataTemplate>  
  10.         <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("Stu_Name", "{0}") %>'></asp:TextBox>  
  11.         <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("Stu_Age", "{0:D}") %>'></asp:TextBox>  
  12.         <asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("Stu_class", "{0}") %>'></asp:TextBox>  
  13.     </EmptyDataTemplate>  
  14. </asp:GridView>  
  15. <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Demo]" UpdateCommand="update Demo set Stu_Name=@Stu_Name,Stu_Age=@Stu_Age,Stu_class=@Stu_class where Stu_Id=@Stu_Id "></asp:SqlDataSource>  
aspx

Run the Application. It will show the output like the following. If you click the Edit button it allows us to Edit the values and save the changes in the
database. Check the following screenshots:
 
Application


Similar Articles