Delete Multiple webgrid row using jQuery?

Delete webgrid row using jQuery?

You can easily delete a row from webgrid but what if you have to delete 10 records with a confirmation message, you have to do 20 clicks that irritates to overcome this, we are adding checkbox column to webgrid, while deleting select records using checkbox and click delete button which will ask you for confirmation and put a ajax call to delete selected record.

Delete Multiple record in webgrid

Delete Multiple record in webgrid

WebGrid

 @{
    var grid = new WebGrid(Model.students);
}
 
<div id="gridContent" style="padding:20px;">
@grid.GetHtml(
mode: WebGridPagerModes.All,
    columns:
        grid.Columns(
            grid.Column(columnName: "Student Name", header: "Name", format: @<text>@item.Name</text>) ,
            grid.Column(header: "Delete", format: @<text>@Html.CheckBox("chk") </text>)
           ))
 
</div>

Now on clicking of delete button call DeleteStudent() function which will loop through each row and find out checked rows from grid and pass those ids to controller to delete record from Database after confirmation remove same rows from webgrid using jquery

<script type="text/javascript">
    function DeleteStudent() {
        if (confirm("Are you sure to delete records")) {
            $('#gridContent table tr').each(function () {
                if ($(this).find("input[id*='chkStudent']").length > 0) {
                    if ($(this).find("input[id*='chkStudent']")[0].checked == true) {
                        var userID = $(this).find("input[id*='chkStudent']").attr("UserID");
                        var data = { ID: userID };
                        var temp = $(this);
                        $.getJSON("/Student/DeleteStudent", data, function (response) {
                            if (response == true) {
                                temp.remove();
                            }
                        });
                    }
                }
            });
        }
    }
</script>

Now in controller delete record.

public JsonResult DeleteStudent(int ID)
{
    // delete the record from ID and return true else false
    return Json(true, JsonRequestBehavior.AllowGet);
}

Relevant links
Sorting in webgrid in ASP.NET MVC
Delete Multiple webgrid row using jQuery
Efficient Paging and Sorting with WebGrid Web Helper – ASP.NET MVC
ASP.NET MVC3 webgrid conditional statement on column (if, if else loop)
Efficient Paging with WebGrid Web Helper – ASP.NET MVC
ASP.NET MVC Web Grid Style

Advertisements
This entry was posted in ASP.NET MVC Web Grid, jQuery, MVC and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s