[JQuery] JQgrid set row height

Question

Hi, 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 (image): http://img339.imageshack.us/img339/3730/jqgridtable.png

Thanks a lot.

Answer 1

You can set height of individual rows of jqGrid or any other CSS property with respect of setRowData method (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods). You can do this for example in loadComplete:

$("#list").jqGrid({
    // ...
    loadComplete: function() {
        var grid = $("#list");
        var 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 on http://www.ok-soft-gmbh.com/jqGrid/JqgridHeight.htm. Here you can see, that after changing of the height of rows it could be a good idea to change the hight of the grid. After uncommenting of the line with the setGridHeight the results will looks like http://www.ok-soft-gmbh.com/jqGrid/JqgridHeight1.htm.

UPDATED based on the question from comment: To change the hight of the header of the tabe with id="list" you can do following:

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

The jQuery("#gview_list") is a div over the grid body and the grid headers. You can see results under http://www.ok-soft-gmbh.com/jqGrid/JqgridHeight2.htm.