javascript - jqgrid hiddengrid doubles data and vertical scroll overlaps data -

javascript - jqgrid hiddengrid doubles data and vertical scroll overlaps data -

i'm using jqgrid 4.4.4, , seem have come across problem.

problem 1: fixed

use case

i want jqgrid hidden on "start-up" without doubling data.

solution

by removing scroll:true, info did not double were.

problem 2: fixed

when info exceeds height of jqgrid, scroll bar appears. scrollbar overlaps info shown on picture.

i have tried both autowidth:true, scrolloffset, defining pixel width ++, nil seems work.

i'm working on huge project, , love working jqgrid. see necessity create these problems obsolete.

code:

var grid = $("#table").jqgrid( { datatype: "local", height: "auto", width: 1000, scroll: true, colnames:['','1992','1997','2002','2007', '2012','2017','2022','2027','2032','2037'], colmodel: [{name:'name',index:'name', align: 'left'}, {name:'col0',index:'col0'},{name:'col1',index:'col1'} {name:'col2',index:'col2'},{name:'col3',index:'col3'}, {name:'col4',index:'col4'},{name:'col5',index:'col5'}, {name:'col6',index:'col6'},{name:'col7',index:'col7'}, {name:'col8',index:'col8'},{name:'col9',index:'col9'}], multiselect: true, caption: "table", shrinktofit: true, data: [{ name: 'county1', col0: '11 273', col1: '11 431', col2: '12 515', col3: '13 414', col4: '15 143', col5: '16 852', col6: '18 362', col7: '19 698', col8: '20 821', col9: '21 734' }, { name: 'county2', col0: '22 530', col1: '24 457', col2: '25 763', col3: '27 247', col4: '28 970', col5: '31 135', col6: '32 977', col7: '34 649', col8: '36 020', col9: '37 158' }, { name: 'county3', col0: '11 909', col1: '12 734', col2: '14 037', col3: '14 873', col4: '17 284', col5: '20 083', col6: '22 877', col7: '25 603', col8: '28 064', col9: '30 210' }, { name: 'county4', col0: '10 465', col1: '12 165', col2: '12 962', col3: '13 890', col4: '15 154', col5: '16 293', col6: '17 284', col7: '18 174', col8: '18 897', col9: '19 446' }, { name: 'county5', col0: '13 300', col1: '14 350', col2: '15 777', col3: '16 791', col4: '17 809', col5: '18 971', col6: '19 931', col7: '20 785', col8: '21 452', col9: '21 930' }] //hiddengrid: true } ); css: .ui-jqgrid-bdiv { max-height:300px; }

jsfiddle describes problem: http://jsfiddle.net/aalmaas/3z7s7/2/

jsfiddle shows want: http://jsfiddle.net/aalmaas/lbfcv/ . however, want jqgrid height set "auto", not definite height.

solution:

a huge oleg helping me out.

the behaviour of vertical scrollbar different if set height of jqgrid, , when define height:"auto".

this ended doing:

if there scroll bar visible, first phone call setgridwidth cut down width of grid shrink parameter set true. width takes business relationship there needs space vertical scrollbar. phone call setgridwidth 1 more time shrink parameter set false restore previous width of grid.

if correctly understand want should following

1) alter html code following

class="lang-html prettyprint-override"><div id="foo">a top div</div> <div class="mygriddiv"> <table id="grid"></table> </div>

where css on outer div defined position: absolute:

class="lang-css prettyprint-override">.mygriddiv { position: absolute; bottom: 10px;}

2) alter javascript code to

var numbertemplate = {width: 60, formatter: "integer", formatoptions: {thousandsseparator: " "}, sorttype: "integer"}; $("#grid").jqgrid({ datatype: "local", height: "auto", hiddengrid: true, gridview: true, // improve performance rownum: 10000, // have no local paging colnames: ['', '1992', '1997', '2002', '2007', '2012', '2017', '2022', '2027', '2032', '2037'], colmodel: [ {name:'name', width: 80, key: true}, {name:'col0', template: numbertemplate}, {name:'col1', template: numbertemplate}, {name:'col2', template: numbertemplate}, {name:'col3', template: numbertemplate}, {name:'col4', template: numbertemplate}, {name:'col5', template: numbertemplate}, {name:'col6', template: numbertemplate}, {name:'col7', template: numbertemplate}, {name:'col8', template: numbertemplate}, {name:'col9', template: numbertemplate} ], caption: "stack overflow example", data: [ { name: 'county1', col0: 11273, col1: 11431, col2: 12515, col3: 13414, col4: 15143, col5: 16852, col6: 18362, col7: 19698, col8: 20821, col9: 21734 }, { name: 'county2', col0: 22530, col1: 24457, col2: 25763, col3: 27247, col4: 28970, col5: 31135, col6: 32977, col7: 34649, col8: 36020, col9: 37158 }, { name: 'county3', col0: 11909, col1: 12734, col2: 14037, col3: 14873, col4: 17284, col5: 20083, col6: 22877, col7: 25603, col8: 28064, col9: 30210 }, { name: 'county4', col0: 10465, col1: 12165, col2: 12962, col3: 13890, col4: 15154, col5: 16293, col6: 17284, col7: 18174, col8: 18897, col9: 19446 }, { name: 'county5', col0: 13300, col1: 14350, col2: 15777, col3: 16791, col4: 17809, col5: 18971, col6: 19931, col7: 20785, col8: 21452, col9: 21930 } ] });

see modified fiddler demo here

updated: not sure understand correctly problem scrolling. hope the demo solve problem. used in demo next css:

class="lang-css prettyprint-override">.ui-jqgrid .ui-jqgrid-bdiv { max-height: 100px; overflow-x: hidden; }

javascript jquery jqgrid