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

enter image description here

Thanks a lot.

did u see this post : http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/ — Haim Evgi, Jul 08 '10 at 12:29

score 13 · Accepted Answer · edited Jul 28 '16 at 22:32

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.

Thank you it works, but if I would change the height of head table? How can I do it? With this example only the row data height is modified. Thank you again. — michele, Jul 08 '10 at 15:57

score 8 · Answer 2 · answered Oct 02 '13 at 14:51

8

This also works:

.ui-jqgrid .ui-jqgrid-htable th {
    height: 2em !important;
}
.ui-jqgrid tr.jqgrow td{
    height: 1em !important;
}

answered Oct 02 '13 at 14:51

aloplop85

892
3
16
40

score 1 · Answer 3 · edited Jul 28 '16 at 21:30

1

In the ui.jqgrid.css file change the line in the /* body */ section to this:

.ui-jqgrid tr.jqgrow td {
    font-weight: normal; 
    overflow: hidden; 
    white-space: nowrap; 
    height: 22px; 
    padding: 0 2px 0 2px;
    border-bottom-width: 1px; 
    border-bottom-color: inherit; 
    border-bottom-style: solid;
}

white-space: is changed from pre to nowrap.

edited Jul 28 '16 at 21:30

Chait

1,052
2
18
30

answered Jul 01 '15 at 21:49

Sici

39
1
6

score -1 · Answer 4 · answered Sep 22 '12 at 19:27

-1

I solved this issue setting this rule in a css stylesheet:

.grid .ui-jqgrid-htable th,
.grid .ui-jqgrid-btable .jqgrow td {
    height: 3em !important;
}

answered Sep 22 '12 at 19:27

Diosney

10,520
15
66
111

JQgrid set row height

4 Answers4

Linked