Add, Edit, Delete, Paging records in Gridview using jQuery

Pratikshagzb
Posted by in jQuery category on for Beginner level | Views : 59520 red flag
Rating: 4.5 out of 5  
 2 vote(s)

In this article, I shall show how to add, edit, update, paginate records in GridView. To show this I have used XML file as back end and also using JqueryBlock UI Plugin to give user a nice experience while inserting or updating record.


 Download source code for Add, Edit, Delete, Paging records in Gridview using jQuery

About JqueryBlock UI Plugin


The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Usage is very simple. To block user activity for the page:

$.blockUI();

DisadvantageUsing the XMLHttpRequest object in synchronous mode causes the entire browser to lock until the remote call completes. This is usually not a desirable behavior.

JQuery will block the UI until the update panel is refreshed completely. But instead of blocking the complete page I am blocking only the contents of the DIV dvgv. To achieve this I am using the JQuery BlockUI Plugin .

 

Picture-1

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="scripts/jquery.blockUI.js" type="text/javascript"></script>

<script type = "text/javascript">

    function BlockUI(elementID) {

        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_beginRequest(function () {

            $("#" + elementID).block({ message: '<table align = "center"><tr><td>' +

     '<img src="images/loadingAnim.gif"/></td></tr></table>',

                css: {},

                overlayCSS: { backgroundColor: '#000000', opacity: 0.6

                }

            });

        });

        prm.add_endRequest(function () {

            $("#" + elementID).unblock();

        });

    }

    $(document).ready(function () {

 

        BlockUI("dvgv");

        $.blockUI.defaults.css = {};

    });

    function Hidepopup() {

        $find("popup").hide();

        return false;

    }

</script>

 

Let me explain the above script part that I am using in my page.

 

The Sys.WebForms namespace contains classes related to partial-page rendering in the Microsoft Ajax Library.

Sys.WebForms.PageRequestManager.getInstance() ---This manages partial-page updates of UpdatePanel controls in the browser and  can be used to customize a Web page by using client script.

 

Prm.add_beginRequest- PageRequestManager beginrequest event is  raised before the processing of an asynchronous postback starts and the postback request is sent to the server.I have used this to block UI and  start an animation that notifies the user that the postback is being processed. I have also applied .css for the color used in the animation and to set opacity.

Prm.add_endRequest-PageRequestManager end request event is raised after an asynchronous postback is finished and control has been returned to the browser.I have used here  to unblock UI.

With $(document).ready() you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.I have used this to  should ensure that it will run after loading the complete document.

BlockUI("dvgv")- it will prevent user activity with div  dvgv  contained elements   until it is deactivated

$.blockUI.defaults.css = {} is used to style the blocking part.

$find("popup").hide()-The .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.I have used this to hide the popup.

 

ModalPopupExtender- I have used  ModalPopup extender  to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. When displayed, only the modal content can be interacted with  clicking on the rest of the page does nothing.

 

Pitfalls of using Jquery with Ajax-Recurring ID Selectors are slow. So the performance can be somewhat slow.

 

Add,Update ,Delete for Gridview is usual as in any other program.

Picture 2


To Bind data to XML File.

void binddata()
{
     DataSet ds = new DataSet();
     ds.ReadXml(Server.MapPath("empdata.xml"));
     gv.DataSource = ds;
     gv.DataBind();
}

 

Picture 3:

Steps to Insert value in XML file

1.To insert row in XML file. Click insert button .Pop up appears as in Picture 3.

2. Enter values and click Add button.

Steps to Update value

1.Similarly for Editing record. Click Edit button. Pop up appears.

2. Enter values and click Update button.

It will block the Grid until the update panel finishes its work refer to Picture-1.

protected void insertinXML(object sender, EventArgs e)

    {

        txtempID.Text = string.Empty;

        txtName.Text = string.Empty;

    txtCity.Text = string.Empty;

        txtSalary.Text = string.Empty;

        count = 99;

        popup.Show();

    }

 

protected void Edit(object sender, EventArgs e)

{

  

  using (  GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)

    {

        txtempID.Text = row.Cells[0].Text;

        txtName.Text = row.Cells[1].Text;

        txtCity.Text = row.Cells[2].Text;

        txtSalary.Text = row.Cells[3].Text;

        popup.Show();

   }

}

protected void Save(object sender, EventArgs e)

{

         binddata();

        DataSet ds = gv.DataSource as DataSet;

        DataRow dr = ds.Tables[0].NewRow();

        dr[0] = txtempID.Text;

        dr[1] = txtName.Text;

        dr[2] = txtCity.Text;

        dr[3] = txtSalary.Text;

        ds.Tables[0].Rows.Add(dr);

        ds.AcceptChanges();

        ds.WriteXml(Server.MapPath("empdata.xml"));

        binddata();

        txtempID.Text = string.Empty;

        txtName.Text = string.Empty;

        txtCity.Text = string.Empty;

        txtSalary.Text = string.Empty;

    }

 

protected void Update(object sender, EventArgs e)

{

     

        gv.EditIndex = -1;

        binddata();

        DataSet ds = (DataSet)gv.DataSource;

        int i = Convert.ToInt32(txtempID.Text);

        ds.Tables[0].Rows[i-1]["empid"] = txtempID.Text;

        ds.Tables[0].Rows[i-1]["empname"] = txtName.Text;

        ds.Tables[0].Rows[i-1]["empcity"] = txtCity.Text;

        ds.Tables[0].Rows[i-1]["empsalary"] = txtSalary.Text;

        ds.WriteXml(Server.MapPath("empdata.xml"));

        binddata();

  

}

 

protected void Deletedata(object s, GridViewDeleteEventArgs e)

{

   binddata();

   DataSet ds= gv.DataSource as DataSet;

   ds.Tables[0].Rows[gv.Rows[e.RowIndex].DataItemIndex].Delete();

   ds.WriteXml(Server.MapPath("empdata.xml"));

   binddata ();

}

 

This brings it to end. Hope you get nice experience of using Jquery in this sample. To see how this example work, simply download the attachment by above attachment link and run.

Keep learning !
Page copy protected against web site content infringement by Copyscape

About the Author

Pratikshagzb
Full Name: Pratiksha Saxena
Member Level: Starter
Member Status: Member
Member Since: 3/26/2010 12:52:14 AM
Country: India



Login to vote for this post.

Comments or Responses

Posted by: SheoNarayan on: 7/6/2010
Thank you for writing nice article. Keep it up!

Login to post response

Comment using Facebook(Author doesn't get notification)