javascript - resize jqgrid when splitter of jquery layout is dragged -

while implementing jqgrid jquery layouts jqgrid not resize when splitter of layout dragged. solution dynamically setting width of jqgrid using binding resize event of window object.but case in div , window object width not affected.please suggest work around issue.

my jsfiddle code :example

html

<div id="content">     <div class="ui-layout-center">         <div id="grid-content">             <table id="grid"></table>         </div>     </div>     <div class="ui-layout-west">west</div> </div> 

js

$("#grid").jqgrid({     datatype: "local",     height: 330,     colnames: ['key', 'value'],     colmodel: [{         name: 'key',         index: 'key'     }, {         name: 'value',         index: 'value'     }] });  $('#content').layout({     applydefaultstyles: true }); 

css

#content {     height:400px; } 

use onresize event while initializing layout.

 $('#content').layout({   center: {     resizable: true,     onresize: resize,     triggereventsonload: true     },   applydefaultstyles: true }); 

when 'resize' event triggered set width of jqgrid:

function resize(pane, $pane, panestate) {     alert('on resize..');     jquery("#grid").jqgrid('setgridwidth',panestate.innerwidth - 2, 'true'); }; 

the example updated fix. found following link extremely useful:check one