0

If I set the gridView property to true, the table height is not set correctly, it is showing empty space beneath the last record. I think it is completing the rowNum of the last page. Is it a bug or I am missing a property to set? This is only happening in FireFox

 $('#jqgInventory').jqGrid({
autowidth: true,
caption: 'Inventory',
datatype:'local',
forceFit: true,
gridview: true,
height: 500,
hidegrid: false,
ignoreCase: true,
loadonce: true,
loadui: 'disable',
rowNum:25,
scroll:true,
shrinkToFit: true,
viewrecords: true,
beforeRequest: function() {$('#gridScript').block();},
beforeSelectRow: function(rowid, e) {return false;},
gridComplete: function() {$('#lblVehicleCount').html($('#jqgInventory').getGridParam('records'));$('#gridScript').unblock();Inventory.modifyGridCellClick();},
colModel: [
{
align: 'Center',
name:'Select',
label: 'SEL',
title: true,
width:20,
index:'Select'
},{
align: 'Left',
name:'Photo',
hidden: false,
label: 'PHOTO',
stype:'text',
sortable: false,
sorttype:'text',
title: true,
width:100,
index:'Photo'
},{
align: 'Left',
name:'Information',
hidden: false,
label: 'INFO',
stype:'text',
sortable: false,
sorttype:'text',
title: true,
width:100,
index:'Information'
},{
align: 'Right',
name:'Price',
hidden: false,
label: 'PRICE',
stype:'text',
sortable: true,
sorttype:function(cellValue){return CustomGridSortByIntegerAsString(cellValue);},
title: true,
width:50,
index:'Price'
},{
align: 'Right',
name:'Mileage',
hidden: false,
label: 'MILEAGE',
stype:'text',
sortable: true,
sorttype:function(cellValue){return CustomGridSortByIntegerAsString(cellValue);},
title: true,
width:25,
index:'Mileage'
},{
align: 'Right',
name:'Age',
hidden: false,
label: 'AGE',
stype:'text',
sortable: true,
sorttype:function(cellValue){return CustomGridSortByIntegerAsString(cellValue);},
title: true,
width:50,
index:'Age'
},{
name:'VehicleKey',
hidden: true,
label: 'VEHICLEKEY',
width:50,
index:'VehicleKey'
}
]
,data:data});

enter image description here

Alaa Osta
  • 4,249
  • 6
  • 24
  • 28
  • It's very difficult to read code which is so bad formatted. Moreover the code contains many default properties like `hidden: false`, `stype: 'text'`, `sortable: true`, `title: true`. Such properties are pure garbage which increase the size of the code and one have to scroll the code to reading. What could additionally reduce and simplify the code is [column templates](http://stackoverflow.com/a/6047856/315935). You can define variable `var myTempl = {align: 'right', sorttype: function (cellValue) { return CustomGridSortByIntegerAsString(cellValue); }, width: 50}` and use it in some columns. – Oleg May 02 '12 at 14:20

1 Answers1

1

First of all you should be careful in usage of the case of letters. The gridview: true is not the same as gridView: true. In the same way you should use datatype: 'local' instead of datatype: 'Local' and loadui: 'disable' instead of loadui: 'Disable'. If you would write correctly the value of loadui you can remove beforeRequest which you use.

To solve your main problem you should either use height: 'auto' (or height: '100%') or add additional option scrollOffset: 0.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @Olegthanks for catching the case sensitive problem. I am using virtual scrolling and when I set the height to auto, the scrollbar disappear and it shows the grid height as 500 and I cant see the other records. what do you think? – Alaa Osta May 01 '12 at 17:50
  • @AlaaOsta: Yes, I see it now. Where you see the "empty space". Could you post screenshort which show clear the problem which you have? I find the current implementation of virtual scrolling in jqGrid not so good. In any way the usage of `scroll:1` is better as `scroll:true`. How many rows of data you have typically and maximally? Is virtual scrolling really required? I don't see any code how the grid are filled. You should use `data` parameter typically. If you should use `data` parameter and `gridview:true` the creating of grid with data will be very quickly. – Oleg May 01 '12 at 18:17
  • @OlegI have uploaded an snapshot of it and edited the script code to show exactly how I am doing it. Sorry I didn't mean that I cant see the rest of the records but it added that space at the end – Alaa Osta May 01 '12 at 18:24
  • @AlaaOsta: One can see from the picture that you use line breaks in the columns and pictures. How you imagine jqGrid could calculate the total height of rows having such height? Do you tried to use grid *without virtual scrolling*? What were there results? It's probably the only feature which I don't use personally in jqGrid. – Oleg May 02 '12 at 13:58
  • @Olegg: My friend there is no line breaks, what are you talking about? if you have noticed in the image I included the Html on purpose to see that this div
    is making the problem since the height is too way big
     – Alaa Osta May 02 '12 at 16:21
  • @AlaaOsta: In one column I see texts "Color: ...", "Stock #", "VIN: " and so on **one over the another**. So for me it's the usage of line breaks inside of the corresponding HTML fragment or the usage of word or char wrapping. In any way the column height seems be variable from row to row. I asked you additionally whether you tried to use jqGrid *without virtual scrolling* (without `scroll` option), but not receive any answer. Do you tried this? I remind you that I asked you before: "How many rows of data you have typically and maximally?". – Oleg May 02 '12 at 16:40