Click here to Skip to main content
11,487,979 members (74,478 online)
Click here to Skip to main content

Editable GridView in ASP.NET 2.0

, 26 Nov 2012 CPOL 754.9K 44.4K 199
Rate this:
Please Sign up or sign in to vote.
This article will give you an overview of how to use an ASP.NET GridView completely, and how to use RowEditing, RowUpdating, RowDeleting, RowCommand, RowDataBound, RowCancelingEdit, and Pagination in a DataGrid. From this article, you will have a clear view of GridView data inserting, deleting, and

EditableGridView

Introduction

This article will give you an overview of how to use an asp:GridView completely, and how to use RowEditing, RowUpdating, RowDeleting, RowCommand, RowDataBound, RowCancelingEdit, and Pagination in a DataGrid. From this article, you will have a clear view of the GridView data insert, delete, and update operations.

Background

GridView is a very popular control in ASP.NET, and for website development, it is a very important control. This control is especially important for CRUD operations.

Using the code

Make two tables in a database: Contact and ContactType. This is just an example of how we shall add, edit, and delete data in a GridView. I have also used a textbox, a drop down list, and a checkbox which we use in the case of data add, delete, and update.

Step by step

Take a web project, go to an .aspx page, for example, Default.aspx, and add an ASP.NET GridView:

<asp:GridView ID="grdContact" runat="server" 
 AutoGenerateColumns="False" DataKeyNames="Id, Type" 
 OnRowCancelingEdit="grdContact_RowCancelingEdit" 
 OnRowDataBound="grdContact_RowDataBound" 
 OnRowEditing="grdContact_RowEditing" 
 OnRowUpdating="grdContact_RowUpdating" ShowFooter="True" 
 OnRowCommand="grdContact_RowCommand" 
 OnRowDeleting="grdContact_RowDeleting">

This is the GridView with all the necessary properties enabled and the events called.

For every column of the GridView, we need to make an <asp:TemplateField> field. I am using an <EditItemTemplate> to put the edit control, an <ItemTemplate> to bind data in a control, and a <FooterTemplate> to insert the control. Here is an example of a template field:

<asp:TemplateField HeaderText="Name" HeaderStyle-HorizontalAlign="Left"> 
   <EditItemTemplate> 
    <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox> 
   </EditItemTemplate> 
   <FooterTemplate> 
    <asp:TextBox ID="txtNewName" runat="server" ></asp:TextBox> 
   </FooterTemplate> 
   <ItemTemplate> 
    <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label> 
   </ItemTemplate>
</asp:TemplateField>

Editable_GridView/Editable_GridView2.png

Let's take a look at the code for the GridView:

  1. Initialize the GridView: To fill data in the GridView, I have written a method named FillGrid() which takes data from a DataTable and shows it in the grid.
        public void FillGrid()
        {
            ContactTableAdapter contact = new ContactTableAdapter();
            DataTable contacts = contact.GetData();        
            if (contacts.Rows.Count > 0)
            {
                grdContact.DataSource = contacts;
                grdContact.DataBind();
            }
            else
            {
                contacts.Rows.Add(contacts.NewRow());
                grdContact.DataSource = contacts;
                grdContact.DataBind();
    
                int TotalColumns = grdContact.Rows[0].Cells.Count;
                grdContact.Rows[0].Cells.Clear();
                grdContact.Rows[0].Cells.Add(new TableCell());
                grdContact.Rows[0].Cells[0].ColumnSpan = TotalColumns;
                grdContact.Rows[0].Cells[0].Text = "No Record Found";
            }
        }
  2. Fill dynamic values: There are two dropdownlist controls available in this example. One of the dropdownlists dynamically loads data from another table. In the RowDataBound event of the GridView control, insert the following code:
        protected void grdContact_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            ContactTypeTableAdapter contactType = new ContactTypeTableAdapter();
            DataTable contactTypes = contactType.GetData();
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Label lblType = (Label)e.Row.FindControl("lblType");
                if (lblType != null)
                {
                    int typeId = Convert.ToInt32(lblType.Text);
                    lblType.Text = (string)contactType.GetTypeById(typeId);
                }
                DropDownList cmbType = (DropDownList)e.Row.FindControl("cmbType");
                if (cmbType != null)
                {   
                    cmbType.DataSource = contactTypes;
                    cmbType.DataTextField = "TypeName";
                    cmbType.DataValueField = "Id";
                    cmbType.DataBind();
                    cmbType.SelectedValue = 
                      grdContact.DataKeys[e.Row.RowIndex].Values[1].ToString();
                }
            }
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                DropDownList cmbNewType = (DropDownList)e.Row.FindControl("cmbNewType");
                cmbNewType.DataSource = contactTypes;
                cmbNewType.DataBind();
            }
        }
  3. Insert data: I have initialized the GridView control with the DataTable, and also have some values filled in the footer dropdownlist, cmbNewType. Except Id, I have put FooterTemplate for every column because all the field are available. Clicking on "Insert" will enter data in your database table.
    protected void grdContact_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        ContactTableAdapter contact = new ContactTableAdapter();
        bool flag= false;
        if (e.CommandName.Equals("Insert"))
        {
            TextBox txtNewName = 
              (TextBox)grdContact.FooterRow.FindControl("txtNewName");
            CheckBox chkNewActive = 
              (CheckBox)grdContact.FooterRow.FindControl("chkNewActive");
            DropDownList cmbNewType = 
              (DropDownList)grdContact.FooterRow.FindControl("cmbNewType");
            DropDownList ddlNewSex = 
              (DropDownList)grdContact.FooterRow.FindControl("ddlNewSex");
            if (chkNewActive.Checked) flag = true; else flag = false;
            contact.Insert(txtNewName.Text, ddlNewSex.SelectedValue, 
                           cmbNewType.SelectedValue, flag);
            FillGrid();
        }
    }
  4. Update data: In the case of data update, we do the same things as the insert. In the case of insert, I always took the footer row, but in the case of update, I take the current RowIndex or the selected RowIndex. Click on Edit first, then call RowEditing, then the update and cancel options come.
    protected void grdContact_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        ContactTableAdapter contact = new ContactTableAdapter();
        bool flag = false;
        Label lblId = (Label)grdContact.Rows[e.RowIndex].FindControl("lblId");
        TextBox txtName = (TextBox)grdContact.Rows[e.RowIndex].FindControl("txtName");
        CheckBox chkActive = 
          (CheckBox)grdContact.Rows[e.RowIndex].FindControl("chkActive");
        DropDownList cmbType = 
          (DropDownList)grdContact.Rows[e.RowIndex].FindControl("cmbType");
        DropDownList ddlSex = 
          (DropDownList)grdContact.Rows[e.RowIndex].FindControl("ddlSex");
        if (chkActive.Checked) flag = true; else flag = false;
        contact.Update(txtName.Text, ddlSex.SelectedValue, 
                       cmbType.SelectedValue, flag,Convert.ToInt32(lblId.Text));
        grdContact.EditIndex = -1;
        FillGrid();
        
    }
    protected void grdContact_RowEditing(object sender, GridViewEditEventArgs e)
    {
        grdContact.EditIndex = e.NewEditIndex;
        FillGrid();
    }
    protected void grdContact_RowCancelingEdit(object sender, 
                              GridViewCancelEditEventArgs e)
    {
        grdContact.EditIndex = -1;
        FillGrid();
    }
  5. Deleting data: Now, you may need to delete data. The GridView calls RowDeleting for the delete event.
    protected void grdContact_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
        ContactTableAdapter contact = new ContactTableAdapter();
        int id = Convert.ToInt32(grdContact.DataKeys[e.RowIndex].Values[0].ToString());
        contact.Delete(id);
        FillGrid();
    }

Points of Interest

So, now you have a DatGrid that is editable? Do you want to use CSS to give an excellent look of your grid? Just go to this link for a GridView CSS.

Happy coding Smile | :)

History

I was working on an admin panel in one of my projects, and saw that I needed many add, delete, and update operations for that panel. Now, I can easily solve that problem without a lot of programming by using an editable GridView. Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ashrafur Rahaman
Software Developer (Senior)
Canada Canada
Software engineer with broad experience in enterprise application development, product deployment automation, software test & test automation, application & system management, and manage big projects and team using proven agile technologies.

Passionate on Microsoft technologies, developed solutions using C#, .net (1.1/2.0/3.5/4), SQL Server (2005/2008). Work on Powershell, SSRS, SSIS, WPF, Ajax, WCF, JQuery.

Develop innovative application with cutting edge technologies always boosting inside.

Comments and Discussions

 
QuestionReg ContactTableAdapter Pin
Member 1140969328-Jan-15 10:46
memberMember 1140969328-Jan-15 10:46 
QuestionContactTableAdapter Pin
Upadhyay Praveen17-Jan-15 1:19
memberUpadhyay Praveen17-Jan-15 1:19 
General<h1>Satyaveer Maurya</h1> Pin
Member 83106252-Nov-14 18:59
memberMember 83106252-Nov-14 18:59 
QuestionInvalid Postback or Callback Argument Pin
Member 1115538815-Oct-14 3:52
memberMember 1115538815-Oct-14 3:52 
Questionvote Pin
tabish ahmad15-Oct-14 2:28
membertabish ahmad15-Oct-14 2:28 
QuestionThanks!! Pin
Mallemoer14-Oct-14 2:14
memberMallemoer14-Oct-14 2:14 
GeneralThanks Ashrafur Pin
BalajiRamasamy17-Sep-14 2:04
memberBalajiRamasamy17-Sep-14 2:04 
GeneralMy vote of 5 Pin
BalajiRamasamy17-Sep-14 2:02
memberBalajiRamasamy17-Sep-14 2:02 
AnswerGridView Edit Update Using BoundField Pin
Ranjeet patil30-Aug-14 1:57
memberRanjeet patil30-Aug-14 1:57 
Questioncan you implement a search function also in the editable gridview? Pin
Member 1087227030-Jun-14 22:39
memberMember 1087227030-Jun-14 22:39 
QuestionTestDatabaseTableAdapters Pin
Member 1073960011-Apr-14 1:51
memberMember 1073960011-Apr-14 1:51 
QuestionExcellent Article Pin
Member 100532324-Mar-14 23:31
memberMember 100532324-Mar-14 23:31 
QuestionWell done! +5 Pin
kmoorevs13-Jan-14 15:11
memberkmoorevs13-Jan-14 15:11 
Generalthanks Pin
Member 968194519-Oct-13 5:11
memberMember 968194519-Oct-13 5:11 
GeneralMy vote of 5 Pin
syed210925-Sep-13 1:58
membersyed210925-Sep-13 1:58 
QuestionWhat the? Pin
Member 102499753-Sep-13 11:21
memberMember 102499753-Sep-13 11:21 
QuestionVisual Studio 2012 version? Pin
angwal27-Jun-13 6:23
memberangwal27-Jun-13 6:23 
GeneralMy vote of 2 Pin
Abhijeet Patil19-May-13 2:27
memberAbhijeet Patil19-May-13 2:27 
GeneralRe: My vote of 2 Pin
Rohan Leuva27-Aug-13 3:50
professionalRohan Leuva27-Aug-13 3:50 
GeneralMy vote of 3 Pin
Member 99584925-Apr-13 14:54
memberMember 99584925-Apr-13 14:54 
GeneralMy vote of 5 Pin
Menon Santosh27-Mar-13 21:31
memberMenon Santosh27-Mar-13 21:31 
Good Article
Question.Problem accessing xsd Pin
Dimaz Janu19-Mar-13 17:44
memberDimaz Janu19-Mar-13 17:44 
QuestionShowing 5 Errors Pin
Girish_Sharma16-Mar-13 2:31
memberGirish_Sharma16-Mar-13 2:31 
QuestionHide Insert option Pin
Girish_Sharma14-Mar-13 20:42
memberGirish_Sharma14-Mar-13 20:42 
AnswerRe: Hide Insert option Pin
Ashrafur Rahaman15-Mar-13 6:13
memberAshrafur Rahaman15-Mar-13 6:13 
GeneralRe: Hide Insert option Pin
Girish_Sharma16-Mar-13 2:33
memberGirish_Sharma16-Mar-13 2:33 
QuestionDefinition of ContactTypeTableAdapter Pin
Vineesh Madhavan28-Feb-13 1:01
memberVineesh Madhavan28-Feb-13 1:01 
QuestionNeed advice Pin
Dimaz Janu26-Feb-13 18:22
memberDimaz Janu26-Feb-13 18:22 
AnswerRe: Need advice Pin
Ashrafur Rahaman3-Mar-13 5:14
memberAshrafur Rahaman3-Mar-13 5:14 
GeneralRe: Need advice Pin
Dimaz Janu4-Mar-13 14:46
memberDimaz Janu4-Mar-13 14:46 
GeneralMy vote of 5 Pin
Dimaz Janu26-Feb-13 18:08
memberDimaz Janu26-Feb-13 18:08 
QuestionThank you Ashrafur - this was very helpful Pin
Ginger Decker25-Feb-13 11:26
memberGinger Decker25-Feb-13 11:26 
GeneralMy vote of 5 Pin
Varun Sareen10-Dec-12 19:30
memberVarun Sareen10-Dec-12 19:30 
GeneralMy vote of 3 Pin
Md. Humayun Rashed26-Nov-12 5:42
memberMd. Humayun Rashed26-Nov-12 5:42 
Questionnice:) Pin
Ashwin78626-Sep-12 22:44
memberAshwin78626-Sep-12 22:44 
GeneralMy vote of 5 Pin
saikiranmai4-Sep-12 22:29
membersaikiranmai4-Sep-12 22:29 
QuestionEdit update Delete in Gridview Pin
jigs080817-Aug-12 6:29
memberjigs080817-Aug-12 6:29 
QuestionGood Pin
padma777.vathi29-Jul-12 22:15
memberpadma777.vathi29-Jul-12 22:15 
GeneralMy vote of 3 Pin
padma777.vathi29-Jul-12 22:12
memberpadma777.vathi29-Jul-12 22:12 
GeneralLimited select query and XSD file Pin
maxgo17-Jul-12 11:52
membermaxgo17-Jul-12 11:52 
GeneralTwo footers? [modified] Pin
shawnperolis12-Jul-12 5:50
membershawnperolis12-Jul-12 5:50 
GeneralRe: Two footers? Pin
shawnperolis17-Jul-12 5:18
membershawnperolis17-Jul-12 5:18 
GeneralMy vote of 4 Pin
dippaul31-May-12 1:04
memberdippaul31-May-12 1:04 
GeneralMy vote of 1 Pin
Destiny7777-May-12 16:16
memberDestiny7777-May-12 16:16 
GeneralMy vote of 5 Pin
LSADev2-May-12 10:37
memberLSADev2-May-12 10:37 
QuestionCan you post the SQL DB Creation Script for the Database used for this Article ? Pin
Muzaffar Ali Rana5-Apr-12 9:21
memberMuzaffar Ali Rana5-Apr-12 9:21 
AnswerRe: Can you post the SQL DB Creation Script for the Database used for this Article ? Pin
Muhammad Owais Qureshi2-Jun-12 10:37
memberMuhammad Owais Qureshi2-Jun-12 10:37 
QuestionEdit event is not firing on one click Pin
supermario ballotelli20-Mar-12 20:46
membersupermario ballotelli20-Mar-12 20:46 
QuestionThe type or namespace name 'TestDatabaseTableAdapters' could not be found Pin
Justin Greene12-Mar-12 4:33
memberJustin Greene12-Mar-12 4:33 
BugRe: The type or namespace name 'TestDatabaseTableAdapters' could not be found [modified] Pin
Destiny7777-May-12 16:13
memberDestiny7777-May-12 16:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 26 Nov 2012
Article Copyright 2008 by Ashrafur Rahaman
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid