jquery - Scrollbars in jqgrid without data populated -

i trying use jqgrid create grid has no data has fixed size, columns width in total greater grids width, user can scroll through headers. user click button populate data grid. might sound similar answered question jqgrid vertical scrollbar

however, in case, data there. not have data , want grid have scrollbars. noticed div class .ui-jqgrid-bdiv doesnt created until populate data.

is bug in jqgrid? there workaround this?

here fiddle http://jsfiddle.net/ynw3c/2630/

here code:

javascript

$(document).ready(function () {     $("#results").jqgrid({         datatype: "local",         height: 150,         scroll:true,         width:300,         shrinktofit:false,         colnames: ['inv no', 'date', 'client', 'amount', 'tax', 'total', 'notes'],         colmodel: [             { name: 'id', index: 'id', width: 160, sorttype: "int" },             { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },             { name: 'name', index: 'name', width: 100 },             { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },             { name: 'tax', index: 'tax', width: 180, align: "right", sorttype: "float" },             { name: 'total', index: 'total', width: 280, align: "right", sorttype: "float" },             { name: 'note', index: 'note', width: 150, sortable: false }            ],        });             var mydata = [                             { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },                             { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },                             { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },                             { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },                             { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },                             { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },                             { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },                             { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },                             { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }                             ];             //if uncomment this, scrollbars appear             /*for (var = 0; <= mydata.length; i++)                 $("#results").jqgrid('addrowdata', + 1, mydata[i]);*/         }); 

html

<div>     <table id="results"></table> </div> 

edit: more clear, in above example, want horizontally scroll through headers. when data populated, header should remain static when scrolling vertically, , scroll horizontally along data.

thanks!

@user1719160:

loadcomplete: function () {          if ($(this).jqgrid('getgridparam', 'reccount') == 0)         {                      $(".jqgfirstrow").css("height","1px");         } 

this works... not elegant... work.