javascript - JQgrid set row height

Question

I am using JqGrid with javascript. I would set the height of each table row but I have not understand how to do.

This is my code:

 function jobList(){
var json=doShowAll(); 
alert("jobList() ==> php/get_job_status.php?value="+json);
jQuery("#jobList").jqGrid({
    url:'php/get_job_status.php?value='+json,
 datatype: "xml",
    colNames:['id','title', 'start', 'stop','completed'],
    colModel:[
     {name:'id',index:'id', width:15,hidden:true, align:"center"},
     {name:'title',index:'title', width:150, align:"center"},
     {name:'start',index:'start', width:350, align:"center", sorttype:"date"},
     {name:'fine',index:'fine', width:350, align:"center", sorttype:"date"},
     {name:'completed',index:'completed', width:120, align:"center",formatter:highlight},//il solitoformatter:infractionInFormatter},  
    ],
    //rowNum:8,
    //rowList:[8,10,20,30],
    pager: '#pagerJobList',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
 multiselect: false,
 subGrid: false,
 autowidth: true,
 height: 250,
 rowheight: 300,

 caption: "Job Progress",
  afterInsertRow: function(rowid, aData){
     jQuery("#jobList").jqGrid('setCell', rowid, 'completed', '', {
      background: 'red',
     color: 'white'
     });
  },
  onSelectRow: function(id){
        //alert(id);
        var title="";
        if (id) { 
         var ret = jQuery("#jobList").jqGrid('getRowData',id);
         title=ret.id;
         //alert(title);
        } 
        else { 
         alert("Please select row");
        }
        var json2=doShowAll(); 
        subGrid(json2,title);
     } 

 }
); 

}

Modifying RowHeight value rows height don't change. This is my table result

Thanks a lot.

Answer 1

You can set height of individual rows of jqGrid or any other CSS property with the help of setRowData method (see this wiki article). You can do this for example in loadComplete:

$("#list").jqGrid({
    // ...
    loadComplete: function() {
        var grid = $("#list"),
            ids = grid.getDataIDs();

        for (var i = 0; i < ids.length; i++) {
            grid.setRowData(ids[i], false, { height : 20 + (i * 2) });
        }

        // grid.setGridHeight('auto');
    }
});

You can see a working example here. Here you can see that after changing the height of the rows it could be a good idea to change the height of the grid. After un-commenting the line with the setGridHeight, the results will looks like this.

UPDATE Based on the question from comment: To change the height of the header of the table with id="list" you can do the following:

$("table.ui-jqgrid-htable", $("#gview_list")).css ("height", 30);

The $("#gview_list") is a div over the grid body and the grid headers.

You can see results here.