Question

Scripts:

$.ajax({
    url: '/Widget/GetTestData',
    type: 'POST',
    data: {},
    success: function (result) {
        var colModels = result.Json.colModels;
        var colNames = result.Json.colNames;
        var data = result.Json.data.options;
        $("#grid_table").jqGrid({
            datatype: 'jsonstring',
            datastr: data,
            colNames: colNames,
            colModel: colModels,
            jsonReader: {
                root: 'rows',
                repeatitems: false
            },
            gridview: true,
            pager: $('#gridpager'),
            height: 349,
            width:968,
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            viewrecords: true
        }).navGrid('#gridpager'); //end jqgrid
    },
    error: function (result) {
        alert("Seçilen kritere uygun veri bulunamadı!");
    }
});    //end ajax

Controller

public ActionResult GetTestData()
{
    var result = new
        {
            Json = new
            {
                colNames = new[]
                {
                    "T1","T2"
                },
                colModels = new[]
                {
                   new {
                        index = "T1",
                        label = "T1",
                        name = "T1",
                        width = 100
                    },new {
                        index = "T2",
                        label = "T2",
                        name = "T2",
                        width = 100
                    }
                },
                data = new
                {
                    options = new
                    {
                        page = "1",
                        total = "1",
                        records = "1",
                        rows = new[] {
                            new{T1=123,T2=321},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934},
                            new{T1=4532,T2=934}
                        }
                    }
                }
            }
        };
}

This code works. It fetch all data from server. But I want to fetch part of data from server, in per page.

When I write following,I can do that I want, But I cant get colNames dynamicly.

$("#grid_table").jqGrid({
    url: '/Widget/GetGridData',
    datatype: "json",
    mtype: 'POST',
    postData: { DateRangeType: date_range_id, MeterType: meter_type_id, StartDate: start_date, EndDate: end_date },
    colNames: ['Okuma Tarihi', 'T1', 'T2', 'T2', 'Toplam'],
    colModel: [
            { name: 'OkumaTarihi', index: 'OkumaTarihi', width: 150, sortable: true, editable: false },
            { name: 'T1', index: 'T1', sortable: true, editable: false },
            { name: 'T2', index: 'T2', sortable: true, editable: false },
            { name: 'T3', index: 'T3', sortable: true, editable: false },
            { name: 'Toplam', index: 'Toplam', sortable: true, editable: false }
       ],
    rowNum: 20,
    rowList: [20, 30],
    pager: $('#gridpager'),
    sortname: 'Name',
    viewrecords: true,
    sortorder: "asc",
    width: 968,
    height: 349,
    jsonReader: {
        root: "rows", //array containing actual data
        page: "page", //current page
        total: "total", //total pages for the query
        records: "records", //total number of records
        repeatitems: false,
        id: "id" //index of the column with the PK in it
    }
}).navGrid('#gridpager'); //end jqgrid

Controller

public ActionResult GetGridData(string sidx, string sord, int page, int rows)
{
    IEnumerable<MeterReadingsForChart> meterReadings = MeterReadingManager.GetCustomerTotalMeterReadings(9, 1, /*DateTimeManager.GetStartDate(0)*/DateTime.Now.AddDays(-40), DateTime.Now, DateTimeManager.GetTimeIntervalTypeById(0));

    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = meterReadings.Count();
    int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

    var result = new
    {
        total = totalPages,
        page = page,
        records = totalRecords,
        rows = meterReadings.Skip((pageIndex) * pageSize).Select(x => new { T1 = x.Name, OkumaTarihi = x.ReadDate.ToString("dd.MM.yyyy - hh:mm:ss"), Value = x.Value }).ToArray()
    };

    return Json(result, JsonRequestBehavior.AllowGet);
}

How do I make both of them together? (dynamic colnames and fetching data from server in per page)

UPDATE (Scenario)

I have meter readings every five minutes. And I grouped them hourly, daily, etc… Also I grouped them meterType ({T1, T2, T3}, {Reactive, Active, Capasitive, ..}, {…}).

For examle electric grid:

T1 | T2 | T3 | .... |

Energy Grid:

Active | Reactive | .... | ....

and the others:

I want to pass extra parameters (rangeType, meterType) with grid’s defaults. And create the new grid values (colNames, ColModels and data). So How can I do all of these.

It can be a method that returns the grid colNames and one more method that returns grid data?

I mean :

1. public Json GetGridOptions{ return colNames and colModels }
2. public Json GetGridData{ return GridData }

1. $.ajax { url : GetGridOptions }
2. $.grid { url : GetGridData }}

Thanks.

Answer 1

Dynamic loading of colModel and colNames is practical in some scenarios. If you do this you create the grid inside of success callback of your own Ajax request. To be sure that you do this at the first time you should use GridUnload additionally (see here for the demo).

By the way you can don’t use and colNames and use label property inside of colModel instead. In the case jqGrid will generate colNames for you.

If you need to change the column headers inside of loadComplete or beforeProcessing it’s not enough to use setGridParam with colNames only because the headers are already created. So you have to modify the text of the column headers manually. You can use the fact that the column header will be constructed from "jqgh_", the id of the grid and the value from name attribute from colModel.

If you would use the values for colNames in HTML form like <span class="someClass">My column Header Text</span> you will the same results as with the usage of "My column Header Text", but you will be able more easy to find and modify the header.

You will still need to use setGridParam with colNames if you use columnChooser for example. The columnChooser read current values from colNames and use it in the corresponding dialog.