Set Fixed Column Width to JQGrid

Question

Is there a way to set a fixed column width and height to the Jqgrid.

I changed the jqgrid css to

.ui-jqgrid tr.jqgrow td {vertical-align:text-top;font-weight: normal; overflow: hidden; white-space:pre-wrap; height: 20px !important;padding: 0 2px 0 2px;border-bottom-width: 1px; border-bottom-color: inherit; border-bottom-style: solid;}

but that doesnt set the height to 20px.

I also need to set all rows to a specific height and the data in the columns should be cut off if the size exceeds the size of the column and hovering over the column should show the entire data.

The below is my colName and model

ColNameData = ['Date', 'Fund', 'Partner', 'Menu', 'Sub Menu', 'Document Name', 'Document Description', 'Type', 'ID'];
                     ColModelData = [{ name: 'MessageDate',
                         align: 'right',
                         sorttype: 'date',
                         datefmt: 'm/d/Y',
                         width :10,resizable:false
                          },
                                    { name: 'Fund', align: 'left',width : 8, resizable:false},
                                    { name: 'Partner', align: 'left',width : 7,resizable:false },
                                    { name: 'Menu', align: 'left',width : 9,resizable:false },
                                    { name: 'SubMenu', align: 'left',width : 9,resizable:false},
                                    { name: 'Documentname', align: 'left',width : 35,resizable:false },
                                    { name: 'DocumentDescription', align: 'left',width : 35,resizable:false },
                                    { name: 'Type', align: 'left',width : 5,resizable:false},
                                    { name: 'ID', hidden: true, resizable: false }
                                   ];

Fellah

Answer 1

You can use the fixed option in the colModel

fixed: true

property of the column(see docs)

Insignificance

Answer 2

In the jqgrid properties you will find that the width and height of the jqgrid can be set by the properties width and height as given here. The same applies for each row of the jqgrid.

{ name: 'Fund', align: 'left',width : 8, height:20, resizable:false}

The above line will set the height of this cell to 20 px. So you can set the height parameter of all columns to ensure a height of the row to 20 px

Beautiful

Answer 3

This worked perfectly fine for me(call after jqgrid is rendered)

function reDefineColWidth(){
    var columnWidths = '65px|88px|175px|140px|200px|75px|140px|150px|130px|220px|125px|230px|200px|111px'
    var widthsArr = columnWidths.split('|');
    for(var j=0; j < widthsArr.length ; j++ ){
        $('.ui-jqgrid-labels > th:eq('+j+')').css('width',widthsArr[j]); // will set the column header widths
        $('#grid tr').find('td:eq('+j+')').each(function(){$(this).css('width',widthsArr[j]);}) // will set the column widths
    }
}

Doubletongued

Answer 4

Credit to neel and Ajo. In jqGrid 4.5.4, I found that applying both resizable to false, and fixed to true on a column in the colModel worked when autowidth was set to true for the entire grid.

{ name: 'fund', width: 8, height: 20, resizable: false, fixed: true }

Can't confirm for future versions though.

Sokul