Jqgrid with dynamic colNames?

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.

Haematozoon

Do you want have different colNames on the different pages of the same grid? – Deferment

Yes. Different page, different colNames. – Pedaiah

My first problem is partialy fetch data from server. I think, I can do refresh grid according to getting data. – Pedaiah

What you mean with "partialy fetch data"? Every response from GetGridData contain full JSON data from result variable. Small additional remark: you should use pager: '#gridpager' instead of pager: $('#gridpager') and add gridview: true option which improve performance. You can use jsonReader: {repeatitems: false} because you change only the property. – Deferment

You don't fill id in the items of the response. Dose the data have some native id? – Deferment

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.

Deferment

I m sorry, could you read updated lines in my question.Also, Thanks for advices. – Pedaiah

@AliRızaAdıyahşi: Sorry I don't full understand what you do. Especially grouping of results is unclear. I don't understand what data you want to show and how. What means the texts T1 | T2 | T3 | .... | or Active | Reactive | .... | ....? Is it header of the grid? What about the paging of displayed data? How many rows you want to display totally in the grid? ... – Deferment

I m sory. It is complex for me too :). yes they are grid headers. I have more than one million data. there are electric, water,gas and energy meter results. if meter type is electric I want to display T1,T2,T3 or if meter is energy I want to display Active,Reactive, Capacitive, (and more twenty column). There are DateRange and MeterType Buttons. If user choose one these buttons, I want to re-create Grid. – Pedaiah

@AliRızaAdıyahşi: If you have only the two (or some else) types of the grid you can create all the grids. All grids excepting one can be hidden. You can dynamically hide or show the grids very easy if you hide or show some outer div which contains <table> used to create the grid. The usage of GridUnload abd recrating can be another alternative. Two other answers: this and this provide some other options, which can be used in some scenarios. – Deferment