Edit Update GridView With Ajax ModalPopUpExtender Example

This Example explains How To Edit Update GridView Rows Records With Ajax ModalPopUpExtender In Asp.Net Using C# and VB.NET.

I'm using northwind database and SqlDataSource control for record updation to reduce as much code behind as possible.

Create a Bin folder in solution explorer and put AjaxControlToolkit.dll in it.
Place ToolkitScriptManager and UpdatePanel on page, Configure SqlDataSource to fetch records from Employees table and assign it as DataSource of GridView.

Edit GridView With Ajax ModalPopUpExtender

Place Gridview inside ContentTemplate Add one ButtonField in Grid And define EmployeeID as it's DataKeyNames property.

HTML SOURCE OF GRIDVIEW
   1:  <Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" 
   2:                             runat="server"/>
   3:  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   4:  <ContentTemplate>
   5:    
   6:  <asp:GridView ID="gvParent" runat="server" 
   7:                AutoGenerateColumns="False" 
   8:                DataKeyNames="EmployeeID" 
   9:                DataSourceID="SqlDataSource1" 
  10:                onrowcommand="gvParent_RowCommand">
  11:  <Columns>
  12:  <asp:ButtonField Text="Edit" CommandName="OpenPopUp"/>
  13:  <asp:BoundField DataField="EmployeeID" HeaderText="ID" 
  14:                  InsertVisible="False" ReadOnly="True" 
  15:                  SortExpression="EmployeeID"/>
  16:  <asp:BoundField DataField="LastName" HeaderText="LastName" 
  17:                  SortExpression="LastName"/>
  18:  <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
  19:                  SortExpression="FirstName"/>
  20:  <asp:BoundField DataField="Country" HeaderText="Country" 
  21:                  SortExpression="Country"/>
  22:  </Columns>
  23:  </asp:GridView>
  24:   
  25:  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
  26:  ConnectionString=
  27:  "<%$ ConnectionStrings:NorthwindConnectionString %>" 
  28:  SelectCommand="SELECT [EmployeeID], [LastName], 
  29:                [FirstName], [Country] FROM [Employees]">
  30:  </asp:SqlDataSource>

Add one button on the page and set it's style display property to none. Drag ModalPopUpExtender on page and set it's properties as show below.
   1:  <asp:Button ID="btnPopUp" runat="server" 
   2:              style="display:none" />
   3:      
   4:  <Ajax:ModalPopupExtender ID="modalPopUpExtender1" 
   5:                           runat="server"
   6:                           TargetControlID="btnPopUp"
   7:                           PopupControlID="pnlModalPopUp"
   8:                           BackgroundCssClass="modalBackground"
   9:                           CancelControlID="btnCancel"
  10:                           X="20"
  11:                           Y="50">
  12:  </Ajax:ModalPopupExtender>

Place one Panel on the page and another gridview to edit records in popup, populate it using SqlDataSource2 with SelectParameters provided in RowCommand Event of parent Grid.
   1:  <asp:Panel runat="Server" ID="pnlModalPopUp">
   2:   
   3:  <asp:GridView ID="gvEdit" runat="server" 
   4:                AutoGenerateColumns="False" 
   5:                DataKeyNames="EmployeeID" 
   6:                DataSourceID="SqlDataSource2">
   7:  <Columns>
   8:  <asp:ButtonField Text="Update" CommandName="Update"/>
   9:  <asp:TemplateField HeaderText="Last Name">
  10:      <ItemTemplate>
  11:      <asp:TextBox ID="txtLastName" runat="server" 
  12:                   Text='<%# Bind("LastName") %>'/>
  13:      </ItemTemplate>
  14:  </asp:TemplateField>
  15:   
  16:  <asp:TemplateField HeaderText="First Name">
  17:      <ItemTemplate>
  18:      <asp:TextBox ID="txtFirstName" runat="server" 
  19:                   Text='<%# Bind("FirstName") %>'/>
  20:      </ItemTemplate>
  21:  </asp:TemplateField>
  22:   
  23:  <asp:TemplateField HeaderText="Country">
  24:      <ItemTemplate>
  25:      <asp:TextBox ID="txtCountry" runat="server" 
  26:                   Text='<%# Bind("Country") %>'/>
  27:      </ItemTemplate>
  28:  </asp:TemplateField>               
  29:  </Columns>
  30:  </asp:GridView>
  31:   
  32:  <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
  33:                     onupdated="SqlDataSource2_Updated"
  34:                     ConnectionString=
  35:  "<%$ ConnectionStrings:NorthwindConnectionString %>" 
  36:  SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], 
  37:                 [Country] FROM [Employees] 
  38:                 WHERE ([EmployeeID] = @EmployeeID)" 
  39:                     
  40:  UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, 
  41:                [FirstName] = @FirstName, [Country] = @Country 
  42:                WHERE [EmployeeID] = @EmployeeID">
  43:  <SelectParameters>
  44:  <asp:Parameter Name="EmployeeID" Type="Int32" />
  45:  </SelectParameters>
  46:   
  47:  <UpdateParameters>
  48:  <asp:Parameter Name="LastName" Type="String" />
  49:  <asp:Parameter Name="FirstName" Type="String" />
  50:  <asp:Parameter Name="Country" Type="String" />
  51:  <asp:Parameter Name="EmployeeID" Type="Int32" />
  52:  </UpdateParameters>
  53:  </asp:SqlDataSource>
  54:   
  55:  <asp:Button ID="btnCancel" runat="server" 
  56:              Text="Cancel"/>
  57:  </asp:Panel>
  58:  </ContentTemplate>
  59:  </asp:UpdatePanel>

Write this code in RowCommand Event of parent and Updated Event of SqlDataSource2 respectively.

C# CODE
protected void gvParent_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "OpenPopUp")
        {
            lblMessage.Text = "";
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            int id = Convert.ToInt32(gvParent.DataKeys[rowIndex].Value);
            SqlDataSource2.SelectParameters["EmployeeID"].DefaultValue = id.ToString();
            modalPopUpExtender1.Show();
        }
    }
    protected void SqlDataSource2_Updated(object sender, SqlDataSourceStatusEventArgs e)
    {
        gvParent.DataBind();
        lblMessage.Text = "Record Updated";
    }

VB.NET
Protected Sub gvParent_RowCommand(sender As Object, e As GridViewCommandEventArgs)
 If e.CommandName = "OpenPopUp" Then
  lblMessage.Text = ""
  Dim rowIndex As Integer = Convert.ToInt32(e.CommandArgument)
  Dim id As Integer = Convert.ToInt32(gvParent.DataKeys(rowIndex).Value)
  SqlDataSource2.SelectParameters("EmployeeID").DefaultValue = id.ToString()
  modalPopUpExtender1.Show()
 End If
End Sub
Protected Sub SqlDataSource2_Updated(sender As Object, e As SqlDataSourceStatusEventArgs)
 gvParent.DataBind()
 lblMessage.Text = "Record Updated"
End Sub

Build and run the application.

Download Sample Code


If you like this post than join us or share

1 comments:

Unknown said...

Thanks Sir, for such a nice and helpful tutorial. It is really a very useful information.

I have a doubt, though somewhat off-topic. As the GridView has been placed within the UpdatePanel. Which means, that whenever we click 'Edit' button in any row, whole GridView will be posted back. Is it possible to postback only the row which has been clicked, or maybe not postback at all..? Because posting back the whole grid just to show that data in a popup, which is already available on the page, doesn't seems to be an efficient task.

Thanks.
Gurjeet Singh


Find More Articles