Jqgrid server side sorting and paging ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Thursday, 14 September 2017

Jqgrid server side sorting and paging

20:29:00 Posted by raviteja swayampu No comments
In this article we will learn about how to implement server side paging and sorting in jqgrid in asp.net mvc web application.If you are new to jqgrid please refer following articles on jqgrid in this blog.


Now lets see how to implement server side sorting and paging in jqgrid,
To implement sorting and paging on server side first we must set jqgrid property loadonce:false.Now jqgrid depends on server side method to implement paging and sorting otherwise server side sorting and paging will not be performed.
Note: download source code for jqgrid in this blog before going to implement present application.Here in this application i am using previous jqgrid application code.
1.Change the controller code with below csharp code.
public JsonResult GetValues(string sidx, string sord, int page, int rows) 
        {
            DatabaseEntities1 db = new DatabaseEntities1();
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            var Results = db.Users.Select(
                    a => new
                    {
                        a.Id,
                        a.Name,
                        a.Phone,
                        a.Address,
                        a.DOB,
                    }).ToList();
            int totalRecords = Results.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
            //sorting the result based on sort index column in jqgrid 
            try
            {
                switch (sidx)
                {
                    case "Name":
                        if (sord.ToUpper() == "ASC")
                            Results = Results.OrderBy(x => x.Name).ToList();
                        else
                            Results = Results.OrderByDescending(x => x.Name).ToList();
                        break;
                    case "Phone":
                        if (sord.ToUpper() == "ASC")
                            Results = Results.OrderBy(x => x.Phone).ToList();
                        else
                            Results = Results.OrderByDescending(x => x.Phone).ToList();
                        break;
                    case "Address":
                        if (sord.ToUpper() == "ASC")
                            Results = Results.OrderBy(x => x.Address).ToList();
                        else
                            Results = Results.OrderByDescending(x => x.Address).ToList();
                        break;
                    case "DOB":
                        if (sord.ToUpper() == "ASC")
                            Results = Results.OrderBy(x => x.DOB).ToList();
                        else
                            Results = Results.OrderByDescending(x => x.DOB).ToList();
                        break;
                    default:
                        Results = Results.OrderByDescending(s => s.Id).ToList();
                        break;
                }
            }
            catch(Exception ex)
            {
                throw ex;
            }
            //server side paging for grid               
            Results = Results.Skip(pageIndex * pageSize).Take(pageSize).ToList();
            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = Results
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }
2.Below is the jquery script for jqgrid.


$(function () {
    debugger;
    $("#grid").jqGrid({
        url: "/Jqgrid/GetValues",
        datatype: 'json',
        mtype: 'Get',
        //table header name 
        colNames: ['Id', 'Name', 'Phone', 'Address', 'DOB'],
        //colModel takes the data from controller and binds to grid 
        colModel: [
            { key: true, hidden: false, name: 'Id',align:'center',index: 'Id', editable: false,width:50 },
            { key: false, name: 'Name', index: 'Name',align:'center',editable: true,sortable:true },
            { key: false, name: 'Phone', index: 'Phone',align:'center',editable: true,sortable: true },
            { key: false, name: 'Address', index: 'Address',align:'center',editable: true,sortable: true },
            { key: false, name: 'DOB', index: 'DOB', editable: true,align:'center',sortable:true,formatter: 'date', formatoptions: { newformat: 'd/m/Y' } }],
            
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        width: 600,
        //loadonce:true,
        sortname: 'Id',
        sortorder:'desc',
        viewrecords: true,
        caption: 'Server side sorting & paging in Jqgrid',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        multiselect: false,
        //loadComplete: function () {
        //    var $this = $(this);
        //    if ($this.jqGrid("getGridParam", "datatype") !== "local") {
        //        setTimeout(function () {
        //            $this.jqGrid("setGridParam", { rowNum: 10 }); // the real value
        //            $this.trigger("reloadGrid");
        //        }, 50);
        //    }
        //},
        //pager-you have to choose here what icons should appear at the bottom
        //like edit,create,delete icons
    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
        {
            // edit options
            zIndex: 100,
            url: '/Jqgrid/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // add options
            zIndex: 100,
            url: "/Jqgrid/Create",
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // delete options
            zIndex: 100,
            url: "/Jqgrid/Delete",
            closeOnEscape: true,
            closeAfterDelete: true,
            recreateForm: true,
            msg: "Are you sure you want to delete this task?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });
});

jqgrid server side sorting and paging

3.I hope this article may help you.All feed backs and suggestions are welcome.

0 comments:

Post a Comment