Dynamic populating jqgrid colModel

Question

I've seen few good tutorials online... but somehow I couldn't apply or don't know how to apply it.

Anyway this is what I wish to do:

User will add Start Week & End Week

so the colModel will be:

1. the id, e.g. int_weekid
2. generate from the start week and end week e.g week 2 to week 5

colModel will be > int_weekid | week2 | week3 | week4 | week5

I try to do it this way but something is wrong. Can someone assist me? @oleg help please.

jQuery(document).ready(function(){

  var start = $("#weekstart").val();
  var end = $("#weekend").val();
  var lastsel2;  
  var j=0;

  var ColModel1 = [
    {name:'ID',index:'int_userid', hidden:false, align:'center', width:30, search:false}, 

    for (j=start;j<=end;j++) {
      {name:'WEEK"+j+"',index:'WEEK"+j+"', align:'center', width:30, search:false},;
    }
  ];

  jQuery("#grn_transac").jqGrid({
    url:'transaction/grn_transacdata2.php',
    datatype: "json",
    colModel: ColModel1,
    pager: '#pager', //pagination enable
    rowNum:30,
    rowList:[10,20,30],
    width:950,
    height: 'auto',
    //sortname: 'int_weekid',
    sortorder: 'DESC',
  }); /* end of jqgrid */

}); 

UPDATE:

After successfully adding the colModel dynamically i found out a strange problem... Let say I have 50 weeks for year 2012, when i put the start=1 and the end=50 no problem everything look great.. but somehow when i keyin value for start=4 (single number) and the end=18 (double digit number) I didnt get anything for my week colModel except for CODE & SITE.. I usually wont get any problem if it start=1 or both of start and end is single number or both are double number.. below is my code.. hope somebody could help me with this.. @owlwark, @oleg

<input name="mula" type="text" id="mula" />
<input name="akhir" type="text" id="akhir" />
<input name="btn_cons" type="button" id="btn_cons" value="SUBMIT" />

<script type="text/javascript">  
<!-- Connected Consumers Trend -->

jQuery(document).ready(function(){

  $("#btn_cons").click(function(){
  $("#production").jqGrid('GridUnload');
    var mula = $("#mula").val();
    var akhir = $("#akhir").val(); 
    var projek = 21;
    var tahun = 2013; 

    var ColModel1 = [];
 ColModel1.push({name:'CODE',index:'txt_site_code', hidden:false, align:'center', width:70 });
 ColModel1.push({name:'SITE',index:'txt_site_name', hidden:false, align:'left', width:190 });  

     for (var j = mula; j<=akhir; j++) {
     ColModel1.push({name:'WEEK'+j,index:'WEEK'+j, align:'center', width:60 });
      }   

    var lastsel2;   
    jQuery("#production").jqGrid({
      url:'dash/production/call_data.php?start='+mula +'&end='+akhir +'&project='+projek +'&year='+tahun,
      datatype: "json",
      colModel: ColModel1,
      pager: '#pager', //pagination enable
      rowNum:30,
      rowList:[10,20,30],
      width:1000,
      height: 'auto',
      shrinkToFit:false,
      //sortname: 'int_userid',
      sortorder: 'DESC',
      hidegrid: false,  //show/hide  grid button on caption header
      viewrecords: true, //display the number of total records
     // editurl:"transaction/grnedit.php",
      loadtext: "Loading Data, Please Wait...",
      rownumbers:true, // add row numbers on left side
      caption: '&nbsp; Consumer',

    }); /* end of jqgrid */

 }); //end btn_cons           
});  /*end of document ready*/
    </script>

<h3>CONSUMER</h3>&nbsp;
  <div id="prodgrid" class="hiddenDiv" align="center">
  <table id="production" class="scroll" cellpadding="0" cellspacing="0"></table>
  <div id="pager" class="scroll" style="text-align:center;"></div>
  </div>   &nbsp;&nbsp;

this is my data file call_data.php which I also have problem in generating the page total etc..:

<?php //MARTIN
require_once('../../Connections/myconn.php');

$start   = $_REQUEST['start']; 
$end     = $_REQUEST['end']; 
$project = $_REQUEST['project']; 
$year    = $_REQUEST['year']; 

$query = mysql_query(' CALL martin ('.$start.', '.$end.', '.$year.', '.$project.');');

$i=0;
$j=0;


while($row = mysql_fetch_array($query,MYSQL_ASSOC)) {
    $rows[$i]['id']=$row[txt_site_code]; 
     $rows[$i]['cell']=array($row[txt_site_code],$row[txt_site_name]);

      for ($j=$start; $j<=$end;$j++) {
      array_push($rows[$i]['cell'], $row['WEEK'.$j]);
      }
    $i++;
}

 //this part I dunno how to create it dynamically 
echo '{
   "page": "1", 
   "total": "1", 
    "records": "1",
    "rows" : ';

echo json_encode($rows); 

echo '}'; 

?>

Answer 1

as Owlvark says you should not do a for in a array.

Try something like this:

var ColModel1 = [];
ColModel1.push({name:'ID',index:'int_userid', hidden:false, align:'center', width:30, search:false});
for (j=start;j<=end;j++) {
    ColModel1.push({name:'WEEK"+j+"',index:'WEEK"+j+"', align:'center', width:30, search:false});
}