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(         


        

Answer 1

This also works:

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

Answer 2

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;
}

Answer 3

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.

Answer 4

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.