Jqgrid with dynamic colNames?

Question

Scenarios:

$.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 retrieves all data from the server. But I want to get some of the data from the server on the page.

When I write the following, I can do what I want, but I cannot get colNames dynamically.

 $("#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 them together? (dynamic code names and fetching data from the server on the page)

UPDATE (script)

I have a counter every five minutes. And I grouped them hourly, daily, etc. I also grouped their meterType ({T1, T2, T3}, {Reactive, Active, Capasitive, ..}, {...}).

For an electrical network with an overview:

 T1 | T2 | T3 | .... | 

Energy grid:

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

and the rest:

I want to pass additional parameters (rangeType, meterType) with default settings. And create new grid values ​​(colNames, ColModels and data). So how can I do all this.

Could it be a method that returns colNames tables and another 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 practical in some scenarios. If you do this, you will create a grid inside the success callback of your own Ajax request. To be sure that you are doing this for the first time, you should additionally use GridUnload (see here for a demo).

By the way, you can not use colNames and use the label property inside colModel . In case jqGrid will generate colNames for you.

If you need to change the column headers inside loadComplete or beforeProcessing , it is not enough to use setGridParam with colNames just because the headers are already created. Therefore, you need to manually change the text of the column headings. You can use the fact that the column heading will be created from "jqgh_" , the grid identifier and the value from the name attribute of colModel .

If you used values ​​for colNames in HTML form, for example <span class="someClass">My column Header Text</span> , you will get the same results as using "My column Header Text" , but you can more easily find and change the title.

You still need to use setGridParam with colNames if you are using, for example, columnChooser . columnChooser read current values ​​from colNames and use it in the corresponding dialog box.