How to navigate in jqgrid

Question

i'm starter in jqgrid, i write this code for create and fill jqgrid(i'm use repository pattrn in asp.net )

    namespace Clearance.Helper
    {
        using System;
        public class JQGridRow
        {
            public int id;
            public string[] cell;
        }
    }

    namespace Clearance.Helper
    {
        public class JQGridResults
        {
            public int Page { get; set; }
            public int Total { get; set; }
            public int Records { get; set; }
            public JQGridRow[] rows;
        }
     }

namespace Clearance.Business
{
    using System;
    using System.Linq;
    using Model;
    using Clearance.Repository;
    using System.Collections.Generic;
    using System.Web.Script.Serialization;
    using Clearance.Helper;
    public class TransportTypesBusiness : GenericBusiness<CLEARANCEEntities, TRANSPORT_TYPES>
    {


    public List<TRANSPORT_TYPES> GetAll(int pageSize, int pageIndex)
            {
                var repository = new TransportTypesRepository(this.Context);
                return (List<TRANSPORT_TYPES>) repository.GetAll().OrderBy(c => c.TRANSPORT_ID).Skip(pageIndex * pageSize).Take(pageSize);
            }




     public string BuildJQGridResults(int numberOfRows = 0, int pageIndex = 0, int totalRecords = 0)
            {
                var result = new JQGridResults();
                var rows = new List<JQGridRow>();
                var list = GetAll(numberOfRows, pageIndex);
                int li = list.Count();
                totalRecords = list.Count();
                foreach (var item in list)
                {
                    var row = new JQGridRow { id = item.TRANSPORT_ID, cell = new string[4] };
                    row.cell[0] = item.TRANSPORT_ID.ToString();
                    row.cell[1] = item.TRANSPORT_NAME;
                    row.cell[2] = item.TRANSPORT_ABBR;
                    row.cell[3] = item.REMARK;
                    rows.Add(row);
                }
                result.rows = rows.ToArray();
                if ((numberOfRows != 0) && (pageIndex != 0) && (totalRecords != 0))
                {
                    result.Page = pageIndex;
                    result.Total = (totalRecords + numberOfRows - 1) / numberOfRows;
                    result.Records = totalRecords;
                }

                return new JavaScriptSerializer().Serialize(result);
            }
}}

and js code

  $(function () {
                var grid = $('#list');
                grid.jqGrid({
                    url: 'jQGridHandler.ashx',
                    editurl: 'jQGridHandler.ashx',
                    postData: { ActionPage: 'TransportType', Action: 'Fill' },
                    ajaxGridOptions: { cache: false },

                    datatype: 'json',
                    height: 'auto',
                    colNames: ['TRANSPORT_ID', 'TRANSPORT_NAME', 'TRANSPORT_ABBR', 'REMARK'],
                    colModel: [
                            { name: 'TRANSPORT_ID', index: 'TRANSPORT_ID', key: true, hidden: true, editable: false },
                            { name: 'TRANSPORT_NAME', width: 200, sortable: true, editable: true },
                            { name: 'TRANSPORT_ABBR', width: 100, sortable: true, editable: true },
                            { name: 'REMARK', width: 100, sortable: true, editable: true }
                           ],
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    pager: '#pager',
                    prmNames: { nd: null },
                    gridview: true,
                    sortname: 'TRANSPORT_ID',
                    viewrecords: true,
                    caption: '',
                    rownumbers: true

                });

when jqgrid load data set current page is 0 and icon next and privice is enable. please help me. thanks all

Answer 1

The problem with page number can be easy to solved. The class JQGridResults has properties Page, Total, Records and rows, but default names which jqGrid wait for are page, total, records and rows. So the rows are the only property which will be read correctly.

To fix the problem you can either rename the property in the JQGridResults or include the following additional parameter in jqGrid:

jsonReader: {page: "Page", total: "Total", records: "Records"}

More additional information (inclusive full working Visual Studio demo project) about the usage of jqGrid together with ASHX handler you can find in the answer.