resize jqgrid when splitter of jquery layout is dragged

Question

While implementing jqGrid with jQuery layouts the jqGrid does not resize when the splitter of the layout is dragged. The solution for dynamically setting the width of jqgrid is using binding with the resize event of window object.But for my case it is in a div and window object width is not affected.Please suggest a work around for this issue.

My jsfiddle code is : 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;
}

Answer 1

Use the onresize event while initializing the layout.

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

When a 'resize' event is triggered set the width of the jqgrid:

function resize(pane, $Pane, paneState) {
    alert('on resize..');
    jQuery("#grid").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true');
};

The Example is updated with the fix. I found the following link extremely useful: Check this one