dynamic jqgrid with dynamic data loading

Question

The dwr call returns a set of data which will have any number of specific columns. For example name, id, address. The address could be 1,2 or 3 like address1, address2 for first record and address1, address2, address3 for second data. My question is how to make the column name for jqgrid dynamic.

DataHandler.fetch(function(data){
resultSet = data;
jQuery("#table1").jqGrid({
datatype : "local",
  data : resultSet,
  height : 250,
  width : 978,
  sortable : false,
  ignoreCase : true,
  sortorder : "desc",
  colNames : ['Email Date/Time','User Name', 'Department'] //want to make this dynamic
    colModel : [ {
   name : 'mailedOn',
    index : 'mailedOn',
    width : '18%',
    align : 'center',
     }, {
    name : 'userName',
 index : 'userName',
 width : '18%',
  align : 'left',   
  sorttype : 'text',
}],
        rowList:[10,20,30],
       pager : '#pager',
       rowNum : 10,
      altRows : true,
       altclass: "myclass",
     viewrecords : true
       }); 
     });

Any help ??

Answer 1

If you have some fix (known) number of columns and need to change column headers dynamically (change colNames) then I would recommend you to read solution from the answer and try the demo. The question is marked as "duplicate" and my answer have currently no voting so you can not find the answer during searching.

The main idea of my suggestion is usage some generic column names like c1, c2 and so on and modify column headers dynamically inside of beforeProcessing. In the same way one can even make modifications of properties of items of colModel (set formatter, formatoptions, editoptions and so on), but it seems that you don't need currently to do this.