Alex Rivera | Logout

Understanding JQGrid column width behaviors

Asked 2010-01-28T18:43:37.597
10

I have a tree grid with many columns, all with specified width. And boy, it looks terrible since headers are out of sync with columns below, even if I have short data in them.

Specifically, if the column heading title is shorter than this column width, the header shrinks down to the the size of the text in the header.

How can I make the header be exactly the same size as the column?

Question 2: I've noticed that although the documentation says that the columns "width" option is in pixels, I can see that it's actually not in pixels, but just a number relative to other widths in grid. E.g. if all fields are size 10, they all will be equal in size, but not 10 pixels in width.

Thanks in advance for clarifications, as this simple issue seems to have deeper roots than I thought.

javascript jquery ajax jqgrid
Edit
Report

2 Answers

1

I was having the same issue. I solved this issue by appending 4 lines of code in GridComplete. these 4 lines will change the style of td's of content area [first row td's style modification is enough]. This is an issue in jqgid. Which is actually setting the td's inside the '' but this style is not reflected in the td's of content area. While developing jqgrid they assumed that entire columns width will be effected by changing widths of one row's tds but they only changed for '' which is the persisting issue here.

Set column widths in the ColModel:

colModel: [
    { 
        name: 'Email', 
        index: 'Email', 
        editable: true, 
        edittype: 'custom', 
        width: 220, 
        editoptions: { 
            custom_element: function(value, options) {
                return EmailAddressCustomElement(value, options); 
            },
            custom_value: function(elem) { 
                var inputs = $("input", $(elem)[0]); 
                return inputs[0].value; 
            } 
        }
    }, 
    { 
        name: 'LocationAndRole', 
        index: 'LocationAndRole', 
        editable: true, 
        align: "left", 
        edittype: "button", 
        width: 170, 
        editoptions: { 
            value: 'Edit Location And Role', 
            dataEvents: [{ 
                type: 'click', 
                fn: function(e) { ShowUsersLocationAndRoles(e); } 
            }] 
        } 
    },

Add the below code in the gridComplete event:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 
    if (objRows.length > 1) { 
        var objFirstRowColumns = $(objRows[1]).children("td"); 
        for (i = 0; i < objFirstRowColumns.length; i++) { 
            $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
        } 
    } 
}

I hope the above code will help you in solving

answered 2011-03-22T06:29:20.783
1
<div id="pager"></div>
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span>
<script type="text/javascript">
    var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed'];
    var colModelData = [
        {name:'invid', index:'invid', width:55},
        {name:'invdate', index:'invdate', resizeToTitleWidth:true},
        {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}];
    jQuery(document).ready(function() {
        var ruler = document.getElementById('ruler');
        for (var i in colNamesData) {
            if (colModelData[i].resizeToTitleWidth != true) {
                continue;
            }
            // Measure the title using the ruler span
            ruler.innerHTML = colNamesData[i];
            // The +26 allows for padding and to fit the sorting UI
            var newWidth = ruler.offsetWidth + 26;
            if (newWidth < 100) {
                // Nothing smaller than 100 pixels
                newWidth = 100;
            }
            colModelData[i].width = newWidth;
        }
        jQuery("#list").jqGrid({
            ...
            colNames: colNamesData,
            colModel: colModelData,
            shrinkToFit:false,
            ...
    });
</script>
answered 2011-06-20T17:17:24.840

Your Answer