You can see the data in colNames when you get them to the server and before to put them in the jqGrid.

I thing you should every time the button is clicked to remove the grid, create it again and apply the setting.

 

Regards

I'm trying to use jqGrid with dynamic column list, which generated on a server side.

It's aspnet mvc app, and I will start with js-code (got this one at stackoverflow):

$(document).ready(function() {

$("#find").button({ disabled: false }).click(function() {
jQuery.ajaxSettings.traditional = true;

var compId = $("#Competitions").val();
var roundId = $("#Rounds").val();

$("#ProgressBar").progressbar({ value: false }).show();

var _url = '@Url.Action("GetDataForGrid", "Results")' + '?competitionId=' + compId + '&roundId=' + roundId;

$.ajax(
{
type: "POST",
url: _url,
data: "",
dataType: "json",
success: function (result) {
$("#ProgressBar").hide();

var colD = result.colData;
var colN = result.colNames;
var colM = result.colModel;

jQuery("#Results").jqGrid({
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell"
},
url: _url,
datatype: 'jsonstring',
mtype: 'POST',
datastr: colD,
colNames: colN,
colModel: colM,
pager: jQuery('#pager'),
rowNum: 100,
rowList: [100, 1000],
viewrecords: true,
shrinkToFit: false,
autowidth: true,
});

// TWO FIRST COLUMNS ARE FROZEN (frozen:true)
jQuery("#Results").jqGrid('setFrozenColumns');
},
error: function (x, e) {
alert(x.readyState + " " + x.status + " " + e.msg);
}
});
setTimeout(function() {
$("#Results").jqGrid('setGridParam', { datatype: 'json' });
}, 50);

});

 

[/spoiler]

Everything is ok with filling my grid, server logic, styles and so on.

Now I'm opening my page (/Results/Index) and clicking #find button to get results.

I can see (screenshots next):

http://gyazo.com/c3c3aa818393b7952bfe18ed50a3ee78

very good, I'm happy.

But second click on #find button shows me next (attention on 1st and 2nd column headers):

http://gyazo.com/25becfd4edd12d3925e4b3a96d716ac7

Two column header texts are doubled.

Third click:

http://gyazo.com/e77d15601f988bb2c6bc11f74ceebd76

You can see here scrolling bar in 2nd column header. So I've got tripling header's text.

And so on.

Html source of page shows identicaly generated code, for each instance of header's <table> tag.

And there's no doublicates for 3rd, 4th and following columns (which are not frozen(!) )

 

jqGrid  4.6.0

jQuery v2.1.1 or 1.10.2 

 

Any ideas what I'm doing wrong?

Many thanks!

Eugene.

 

p.s.: here's json sample, returned by server:

http://gyazo.com/631aaca971dab7f1f884103720dd9dbf

its quite big data for copy-pasting here. if you will need it i will post it as text.