Wednesday, March 7, 2018

jqgrid post data server side paging sorting ASP .net with Web method for huge data.




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerSidePaging.aspx.cs" Inherits="ServerSidePaging" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="css/jquery-ui.css" rel="stylesheet" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script src="js/grid.locale-en.js"></script>
    <script src="js/jquery.jqGrid.min.js"></script>
     <script type="text/javascript">
         jQuery(document).ready(function () {

 $("#grid").GridUnload();// very important when re binding the jqGrid on custom search.


                 $("#employeesList").jqGrid({
                     url: 'ServerSidePaging.aspx/GetProvinces',
                     datatype: 'json',
                     method: 'post',
                     //postData: { 'partNumber': 'aa' },
                     ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                     //serializeGridData: function (postData) {
                     //    return JSON.stringify(postData);
                     //},
                     jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
                     colModel: [
                     { name: 'ID', key: true, width: 60, align: "center", hidden: false },
                     { name: 'Department', width: 80, sortable: false, hidden: false },
                     { name: 'Name', width: 180, sortable: false, hidden: false },
                     { name: 'Address', width: 180, sortable: false, hidden: false }
                     ],
                     rowNum: 10,
                     rowList: [10, 20, 30],
                     pager: "#gridpager",
                     viewrecords: true,
                     gridview: true,
                     rownumbers: true,
                     loadonce:false,
                     height: 230,
                     caption: 'Employee List'
                 }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });
             });
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="btn1" value="Show Grid" /> 
        <table id="employeesList"> 
        </table> 
        <div id="gridpager"> 
        </div>
   
    </div>
    </form>
</body>
</html>

 ----------------------------------
c# code
-----------------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ServerSidePaging : System.Web.UI.Page
{
    private static string jsonData = "[{\"ID\":1,\"Department\":\".NET\",\"Name\":\"Anubhav\",\"Address\":\"Ghaziabad\"},{\"ID\":2,\"Department\":\".NET\",\"Name\":\"Abhishek\",\"Address\":\"Banaras\"},{\"ID\":3,\"Department\":\".NET\",\"Name\":\"Mohit\",\"Address\":\"Kashi\"},{\"ID\":4,\"Department\":\"Testing\",\"Name\":\"Vivek\",\"Address\":\"Kanpur\"},{\"ID\":5,\"Department\":\"Tesing\",\"Name\":\"Priyanka\",\"Address\":\"Allahabad\"},{\"ID\":6,\"Department\":\"Marketting\",\"Name\":\"Nikhil\",\"Address\":\"Delhi\"},{\"ID\":7,\"Department\":\".NET\",\"Name\":\"Manoj\",\"Address\":\"Dehradun\"},{\"ID\":8,\"Department\":\"PHP\",\"Name\":\"Sandeep\",\"Address\":\"Muradabad\"},{\"ID\":9,\"Department\":\"PHP\",\"Name\":\"Sikha\",\"Address\":\"Noida\"},{\"ID\":10,\"Department\":\"Designing\",\"Name\":\"Nandan\",\"Address\":\"Deshradun\"},{\"ID\":11,\"Department\":\"Testing\",\"Name\":\"Rupal\",\"Address\":\"Chandigarh\"}]";
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod(EnableSession = true)]
    [System.Web.Script.Services.ScriptMethod(UseHttpGet = true, ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    //                                          _search=false&nd=1520417400995&   rows=10&    page=1& sidx=&  sord=asc
    public static JqGridData GetProvinces()
    {
        bool _search; string nd; int rows = 0; int page = 0; string sidx; string sord;

        if (HttpContext.Current.Request.QueryString["_search"] != null)
            _search = Convert.ToBoolean(HttpContext.Current.Request.QueryString["_search"]);

        if (HttpContext.Current.Request.QueryString["nd"] != null)
            nd = HttpContext.Current.Request.QueryString["nd"];

        if (HttpContext.Current.Request.QueryString["rows"] != null)
            rows = Convert.ToInt32(HttpContext.Current.Request.QueryString["rows"]);

        if (HttpContext.Current.Request.QueryString["page"] != null)
            page = Convert.ToInt32(HttpContext.Current.Request.QueryString["page"]);

        if (HttpContext.Current.Request.QueryString["sidx"] != null)
            sidx = HttpContext.Current.Request.QueryString["sidx"];

        if (HttpContext.Current.Request.QueryString["sord"] != null)
            sord = HttpContext.Current.Request.QueryString["sord"];
       
        JavaScriptSerializer ser = new JavaScriptSerializer();
        List<jqGridRecord> data = ser.Deserialize<List<jqGridRecord>>(jsonData);
        int recordsCount = data.Count;
        int startIndex = (page - 1) * rows;
        int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount;
        List<jqGridRecord> gridRows = new List<jqGridRecord>(rows);
        for (int i = startIndex; i < endIndex; i++)
            gridRows.Add(data[i]);

        return new JqGridData()
        {
            total = (recordsCount + rows - 1) / rows,
            page = page,
            records = recordsCount,
            rows = gridRows
        };
    }
}


public class jqGridRecord
{
    public int ID { get; set; }
    public string Department { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
}

public class JqGridData
{
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<jqGridRecord> rows { get; set; }
}

No comments:

Post a Comment