Dynamic Columns in jqGrid - jqgrid

Question

I've tried with limited success to get dynamic columns to work with jqGrid. Limited in that I can control the column names and formatting from the controller. But when I do this I can't get the data in.
Do you have a small sample solution that shows the controller code for the two calls.

Answer 1

you can actually bind the column as normal but you can show/hide them at runtime using jquery. for example i have to show link column in jqgrid for admin user and for normal users that column needs to be hidden so implement this in following way.
$("#grid").showCol("Link");
$("#grid").hideCol("Link");
$("#grid").trigger("reloadGrid");

Answer 2

JQGrid1.Columns.FromDataField(ColumnName).Visible = false;
JQGrid1.Columns.FromDataField(ColumnName).HeaderText = "Sample";

Answer 3

JQGrid(action, caption, 920, 400, loadtext);
function columnsData(Data) {
var str = "[";
for (var i = 0; i < Data.length; i++) {
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
if (i != Data.length - 1) {
str = str + ",";
}
}
str = str + "]";
return str;
}
function JQGrid(action, caption, width, height, loadtext) {
var grid = $("#tblGrid");
var lastsel;
var editurl = '/PayInvoice/GridSave';
$.ajax({
url: action,
dataType: "json",
mtype: 'POST',
beforeSend: function () {
$("#dvloading").show();
},
success: function (result) {
if (result) {
if (!result.Error) {
var colData = columnsData(result.column);
colData = eval('{' + colData + '}');
grid.jqGrid('GridUnload');
grid.jqGrid({
url: action,
datatype: 'json',
mtype: 'POST',
colModel: colData,
colNames: result.column,
// multiselect: true,
width: width,
height: height,
rowNum: 20,
rowList: [20, 40, 60],
loadtext: loadtext,
pager: '#tblGridpager',
sortorder: "asc",
viewrecords: true,
gridview: true,
altRows: true,
cellEdit: true,
cellsubmit: "remote",
cellurl: '/PayInvoice/GridSavecell',
beforeSubmitCell: function (id, cellname, value, iRow, iCol) {
objedit(id, cellname, value);
return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
},
afterSaveCell: function (id, cellname, value, iRow, iCol) {
objedit(id, cellname, value);
return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
},
caption: caption
});
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr && thrownError) {
alert('Status: ' + xhr.status + ' Error: ' + thrownError);
}
}, complete: function () {
$("#dvloading").hide();
}
});
}
function objedit(id, cellname, value) {
var flag = 0;
for (var i = 0; i < index; i++) {
if (obj[i][0] == id && obj[i][1] == cellname) {
obj[i] = [id, cellname, value]
flag++;
}
}
if (flag == 0) {
obj[index] = [id, cellname, value];
index++;
}
}

Answer 4

Here we go;
$("#datagrid").jqGrid({
//url: "user.json",
//datatype: "json",
datatype: "local",
data: dataArray,
colNames:getColNames(dataArray[0]),
colModel:getColModels(dataArray[0]),
rowNum:100,
loadonce: true,
pager: '#navGrid',
sortname: 'SongId',
sortorder: "asc",
height: "auto", //210,
width:"auto",
viewrecords: true,
caption:"JQ GRID"
});
function getColNames(data) {
var keys = [];
for(var key in data) {
if (data.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
}
function getColModels(data) {
var colNames= getColNames(data);
var colModelsArray = [];
for (var i = 0; i < colNames.length; i++) {
var str;
if (i === 0) {
str = {
name: colNames[i],
index:colNames[i],
key:true,
editable:true
};
} else {
str = {
name: colNames[i],
index:colNames[i],
editable:true
};
}
colModelsArray.push(str);
}
return colModelsArray;
}