Row delete + JQGRID

You have to edit in Aspx for the JQgrid defination
Suppose previously you have 4 columns  as following.
colNames: [‘TestimonyID’, ‘Name’, ‘Location’, ‘Approved’]
Now you have to add one new column in defination, now the  colNames will be
colNames: [‘TestimonyID’, ‘Name’, ‘Location’, ‘Approved’,’Delete’]
In colModel you have to add the defination for the Delete column.

<script type="text/javascript">
function deleteClick(Id)
{
       window.location.href = window.location.href + "?deleteid=" + Id;
}

$(function () {
    $("#UsersGrid").jqGrid({
        //Please put your corresponding hanler in place of GrdHandler.ashx
        //I have used handler to fetch data from database.
        url: 'GrdHandler.ashx',
        datatype: 'json',
        height: 250,
        width: 600,
        //Define your columns Here.
        colNames: ['TestimonyID', 'Name', 'Location', 'Approved','Delete'],
        colModel: [
                        { name: 'TestimonyID', index: 'TestimonyID', width: 100, hidden: true, sortable: true, search: true, sorttype: 'integer' },
                        { name: 'Name', index: 'Name', width:200, sortable: true, search: true, sorttype: 'string'},
                        { name: 'Location', index: 'Location', width: 200, sortable: true, search: true, sorttype: 'string' },
                        { name: 'Approved', index: 'Approved', width: 100, sortable: true, search: true, sorttype: 'date' },
                        { name: 'Delete', width: 100, sortable: false, search: false, formatter: function (cellvalue, rowId, rowObject) {
                            var requestName, requestID;
                            if ($.isArray(rowObject)) {
                            //For the first page in grid.
                                // access per array. We are currently in the initial grid filling
                                requestID = rowObject[0];
                            } else {
                                //For the all pages except first page in grid.
                                requestID = rowObject.TestimonyID;
                            }
                            return "<a style="cursor: pointer; text-decoration: underline;" onclick="deleteClick(' + requestID + ')">Delete</a>";
                        }
                        }

                    ],
        rowNum: 10,
        rowList: [10, 20, 30],
        mtype: "GET",
        //This property is very usefull.
        loadonce: true,
        pager: '#UsersGridPager',
        sortname: 'TestimonyID',
        viewrecords: true,
        sortorder: 'asc',
        sortable: true,
        //Change your table name
        caption: 'Testimony Table',
        //Ignore Case while searching
        ignoreCase: true,
        editurl: 'GrdHandler.ashx',
        onPaging: function (b) {
            var nextPg = $(this).getGridParam("page");
            currPg = nextPg;
            return;
        }
    });
    jQuery("#UsersGrid").jqGrid('filterToolbar', { searchOperators: false, searchOnEnter: false, autosearch: true });
});
></script>

In browser the Grid will look like

In the code behind get the deleteid from the query string and delete it using your normal code as following

 protected void Page_Load(object sender, EventArgs e)
        {
            int deleteId = 0;

                if (!IsPostBack)
                {
                    //Check the query string deletedId
                    if (int.TryParse(Request.QueryString["deleteid"], out deleteId))
                    {
                        DeleteRecord(deleteId);
                    }
                }

        }
 private void DeleteRecord(int testimonyId)
        {

        }

JQGrid with toolbar Searching, Sorting and Paging functionality with Examples.

Steps to use Jqgrid. (If you will do a single mistake then JQgrid will not work.)

1.Go through the JQGrid Setup Process. Please follow the instruction here
2.Get all the scripts from here
3.Get all the Updated CSS form here

You can get the total code here
Bellow is my folder structure

Here is my code for GridContainer.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridContainer.aspx.cs" Inherits="JQGridBind.GridContainer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {
    $("#UsersGrid").jqGrid({
        //Please put your corresponding hanler in place of GrdHandler.ashx
        //I have used handler to fetch data from database.
        url: 'GrdHandler.ashx',
        datatype: 'json',
        height: 250,
        width: 600,
        //Define your columns Here.
        colNames: ['TestimonyID', 'Name', 'Location', 'Approved'],
        colModel: [
                        { name: 'TestimonyID', index: 'TestimonyID', width: 100, hidden: true, sortable: true, search: true, sorttype: 'integer' },
                        { name: 'Name', index: 'Name', width:200, sortable: true, search: true, sorttype: 'string'},
                        { name: 'Location', index: 'Location', width: 200, sortable: true, search: true, sorttype: 'string' },
                        { name: 'Approved', index: 'Approved', width: 100, sortable: true, search: true, sorttype: 'date' }

                    ],
        rowNum: 10,
        rowList: [10, 20, 30],
        mtype: "GET",
        //This property is very usefull.
        loadonce: true,
        pager: '#UsersGridPager',
        sortname: 'TestimonyID',
        viewrecords: true,
        sortorder: 'asc',
        sortable: true,
        //Change your table name
        caption: 'Testimony Table',
        //Ignore Case while searching
        ignoreCase: true,
        editurl: 'GrdHandler.ashx',
        onPaging: function (b) {
            var nextPg = $(this).getGridParam("page");
            currPg = nextPg;
            return;
        }
    });
    jQuery("#UsersGrid").jqGrid('filterToolbar', { searchOperators: false, searchOnEnter: false, autosearch: true });
});

</script>
</head>
<body>
    <form id="HtmlForm" runat="server">
    <table id="UsersGrid" cellpadding="0" cellspacing="0">
    </table>
     <div id="UsersGridPager" style="width:500px">
        </div>
    </form>
</body>
</html>

Here is my code for GrdHandler.ashx handler.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Serialization;

namespace JQGridBind
{
    /// <summary>
    /// Summary description for GrdHandler
    /// </summary>
    public class GrdHandler : IHttpHandler
    {
        public struct JQGridResults
        {
            public int page;
            public int total;
            public int records;
            public JQGridRow[] rows;
        }
        public struct JQGridRow
        {
            public int id;
            public string[] cell;
        }

        [Serializable]
        public class Testimony
        {
            public int TestimonyID { get; set; }
            public string Name { get; set; }
            public string Location { get; set; }
            public string Approved { get; set; }
            public static int totalRecord;
        }

        private Collection<Testimony> GetUsers(string numberOfRows, string pageIndex, string sortColumnName, string sortOrderBy)
        {
            Collection<Testimony> testimonyCollection = new Collection<Testimony>();
            DataSet ds = new DataSet();
            string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["whativaluemost"].ConnectionString;
            using (var con = new SqlConnection(connectionString))
            {
                con.Open();
                int start = (Convert.ToInt32(pageIndex) - 1) * Convert.ToInt32(numberOfRows);
                int end = Convert.ToInt32(pageIndex) * Convert.ToInt32(numberOfRows);
                SqlCommand cmd = new SqlCommand();
                SqlDataAdapter SqlDadp = new SqlDataAdapter();
                DataTable dt = new DataTable();
                cmd = new SqlCommand("spLoadAdminTestimonyList", con);
                cmd.Parameters.Add(new SqlParameter("@Search", ""));
                cmd.Parameters.Add(new SqlParameter("@Sort", sortColumnName));
                cmd.Parameters.Add(new SqlParameter("@SortDirc", "ASC"));
                cmd.CommandType = CommandType.StoredProcedure;
                SqlDadp.SelectCommand = cmd;
                SqlDadp.Fill(ds);
            }

            var userDetails = ds.Tables[0];
            Testimony.totalRecord = userDetails.Rows.Count;
            int userCount = userDetails.Rows.Count;
            int i = 0;
            while (i < userCount)
            {
                Testimony testimony = new Testimony();
                testimony.Name = Convert.ToString(userDetails.Rows[i][0]);
                testimony.Location = Convert.ToString(userDetails.Rows[i][1]);
                int TestimonyID = 0;
                if (userDetails.Rows[i][2] != null)
                {
                    int.TryParse(userDetails.Rows[i][2].ToString(), out TestimonyID);
                }
                testimony.TestimonyID = TestimonyID;
                testimony.TestimonyID = (int)userDetails.Rows[i][2];
                testimony.Approved = Convert.ToString(userDetails.Rows[i][3]);
                testimonyCollection.Add(testimony);
                i++;
            }
            return testimonyCollection;
        }

        public void ProcessRequest(HttpContext context)
        {
            HttpRequest request = context.Request;
            HttpResponse response = context.Response;
            string url = request.RawUrl;
            string output = string.Empty;

            string _search = request["_search"];
            string numberOfRows = request["rows"];
            string pageIndex = request["page"];
            string sortColumnName = request["sidx"];
            string sortOrderBy = request["sord"];
            //int totalRecords;
            Collection<Testimony> lstTestimony = GetUsers(numberOfRows, pageIndex, sortColumnName, sortOrderBy);
            output = BuildJQGridResults(lstTestimony, Convert.ToInt32(numberOfRows), Convert.ToInt32(pageIndex));

            response.Write(output);
        }

        private string BuildJQGridResults(Collection<Testimony> lstTestimony, int numberOfRows, int pageIndex)
        {

            JQGridResults result = new JQGridResults();
            List<JQGridRow> rows = new List<JQGridRow>();
            foreach (Testimony testimony in lstTestimony)
            {
                JQGridRow row = new JQGridRow();
                row.id = testimony.TestimonyID;
                row.cell = new string[4];
                row.cell[0] = testimony.TestimonyID.ToString();
                row.cell[1] = testimony.Name;
                row.cell[2] = testimony.Location;
                row.cell[3] = testimony.Approved.ToString();
                rows.Add(row);
            }
            result.rows = rows.ToArray();
            result.page = pageIndex;
            result.total = Testimony.totalRecord / numberOfRows;
            return new JavaScriptSerializer().Serialize(result);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}