Tuesday, March 19, 2013

ASP.NET UpdatePanel and Gridview


Using update panel parts of webpage can be updated without refreshing the entire page. In the below example we will check how to edit contents in a gridview without refreshing the entire page.

1)  Create an ASP.NET web application

2)  Add default.aspx page

3)  Add scriptmanager
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>


4)Add updatepanel
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>

5)Add datagrid inside the update panel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
            <asp:GridView runat="server" ID="grvEmp" AutoGenerateColumns="false"
                onrowcancelingedit="grvEmp_RowCancelingEdit" onrowediting="grvEmp_RowEditing"
                onrowupdating="grvEmp_RowUpdating">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Employee Name
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("employee_name")%>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox runat="server" Text='<%# Eval("employee_name")%>' ID="txtName" ></asp:TextBox>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Action">
                        <ItemTemplate>
                            <asp:Button ID="btnEdit" Text="Edit" runat="server" CommandName="Edit" /><br />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Button ID="btnUpdate" Text="Update" runat="server" CommandName="Update" /><br />
                            <asp:Button ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" />
                        </EditItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
       </ContentTemplate>
    </asp:UpdatePanel>


6)Add a text box outside the update panel
<asp:TextBox runat="server" ID="txtTime"></asp:TextBox>
              
7)Create a function to return dataset to bind to datagrind
public DataSet GetEmpData()
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("employee_name");

            DataRow dr = dt.NewRow();
            dr[0] = "Employee 1";

            dt.Rows.Add(dr);

            ds.Tables.Add(dt);
            return ds;
        }


8) On page load set time and bind the gridview

  protected void Page_Load(object sender, EventArgs e)
        {
            txtTime.Text = DateTime.Now.ToString();
            if (!IsPostBack)
            {
                grvEmp.DataSource = GetEmpData();
                grvEmp.DataBind();
            }
        }

9)Handle the row edit,update and cancel events
  protected void grvEmp_RowEditing(object sender, GridViewEditEventArgs e)
        {
            grvEmp.EditIndex = e.NewEditIndex;
            grvEmp.DataSource = GetEmpData();
            grvEmp.DataBind();
        }

        protected void grvEmp_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {

        }
   

        protected void grvEmp_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            grvEmp.EditIndex = -1;
            grvEmp.DataSource = GetEmpData();
            grvEmp.DataBind();
        }


And we are done. Run the application and click on edit button on the gridview. You can see that only the grid is refreshed, time on the text box on main page does not change.

3 comments:

sharad said...

Nice and simple good post

gus said...

This is indeed very simple...

Max DiBiagio said...

good but I still have a small issue,
when grid refresh my focus on the textbox is lost, I was typing something...