jQuery Grid Plugin - jqGrid - Topic: Rendering Issue With forceFit in FireFox

lightnb on Rendering Issue With forceFit in FireFox

Mon, 12 Oct 2009 14:28:55 +0300

Problem solved.

Thanks Tony!

tony on Rendering Issue With forceFit in FireFox

Mon, 12 Oct 2009 12:57:42 +0300

Hello,

A missing DOCTYPE declararation make this not work. Also it does not work in FireFox 3.5 on Windows XP.

See installation instructions

http://www.trirand.com/jqgridw.....to_install

Regards

Tony

lightnb on Rendering Issue With forceFit in FireFox

Mon, 12 Oct 2009 12:22:46 +0300

Hi Tony,

You can find a working example here: http://www.rahilia.com/ForceFitTest/

The data is comming from a flat XML file, so it won't sort/paginate, but you should be able to see the rendering issue with column resize.

-Nick

tony on Rendering Issue With forceFit in FireFox

Mon, 12 Oct 2009 11:30:42 +0300

Hello,

Could you please send me a link to the problem. I will test it in with FireFox 3.0.x and Ubuntu 9.04.

Thanks

Regards

Tony

lightnb on Rendering Issue With forceFit in FireFox

Mon, 12 Oct 2009 11:24:55 +0300

This is looking more and more like a bug to me.

I created a new page, and used the code right from the demo page, complete with the Redmond theme. Still having this issue.

I'm guessing that something else on the demo page, unrelated to jqgrid (maybe the layout plugin?), is causing FireFox to rerender, so the bug does not show up there.

Can anyone else confirm this? Does anyone else have forcefit working correctly on thier site?

Nick on Rendering Issue With forceFit in FireFox

Fri, 09 Oct 2009 10:58:16 +0300

The demo works correctly in my browser, so either the demo uses an older version of JQ Grid (and the newer version is broken), or I don't have everything configured correctly.

The issue is, when resizing a column in a grid with forceFit enabled, the header row, the search/filter input header row, and the first row of the grid resize, but all of the other rows stay at thier original width. When you mouseover each of the rows, it jumps to where it supposed to be.

I'm using JqGrid v3.5.3, with Jquery 1.3.2, and Jquery UI 1.7.2, in Firefox 3.0.14 on Ubuntu 8.10. I'm using the "UI-Lightness" theme.

Here's My configuration:

jQuery(document).ready(function(){

jQuery("#grid_id").jqGrid({
    url:'GridData.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ID','Code', 'Make','Model','Total','Notes'],
    colModel :[
      {name:'ID', index:'ID', width:45},
      {name:'Code', index:'Code', width:300},
      {name:'Make', index:'Make', width:200, align:'right'},
      {name:'Model', index:'Model', search:true, stype:'text', width:300, align:'right'},
      {name:'Total', index:'Total', width:80, align:'right'},
      {name:'Notes', index:'Notes', width:150, sortable:false}
    ],
    pager: '#pager',

    //altRows:true,
    //gridview:true, // makes it faster, but with some cons
    height:500,
    autowidth:true,
    forceFit:true,
    rowNum:200,
    hidegrid:false,
    rowList:[5,200,500],
    sortname: 'Code', // The default column to sort by
    sortorder: 'asc', // the default sort direction
    viewrecords: true,
    caption: 'Item Master'
});

jQuery("#grid_id").navGrid('#pager',{view:true, del:false},
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch : true}, // enable the advanced searching
{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
);

jQuery("#grid_id").filterToolbar();

});

Picture of the problem:

In the picture, I slid the divider between make and model to the right, to shrink the Make column. The first three rows adjusted, but the rest didn't move.