michele michele - 4 years ago 957
Javascript Question

JQgrid set row height

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);
datatype: "xml",
colNames:['id','title', 'start', 'stop','completed'],
{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},
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){
var title="";
if (id) {
var ret = jQuery("#jobList").jqGrid('getRowData',id);
else {
alert("Please select row");
var json2=doShowAll();



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

enter image description here

Thanks a lot.

Answer Source

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:

    // ...
    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 on http://www.ok-soft-gmbh.com/jqGrid/JqgridHeight.htm. 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 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 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 under http://www.ok-soft-gmbh.com/jqGrid/JqgridHeight2.htm.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download