jQuery EasyUI: make datagrid resizable inside border layout

Alex Kiselev picture Alex Kiselev · Jun 29, 2012 · Viewed 9.9k times · Source

I'm trying to implement a master-detail control using EasyUI. Currently I have something like the following:

<div class="easyui-layout" style="height: 600px;">
    <div region="west" style="width: 250px;">
        <table id="detailsTable">
            <thead>
                <tr>
                    <th field="ID" width="200">ID</th>
                    <th field="Name" width="200">Name</th>
                </tr>
            </thead>
            <tbody>
            ...
            </tbody>
        </table>
    </div>
    <div region="center" title="Main Title">
    ...
    </div>
</div>

And the following script turns the above into a pretty looking master-detail control:

$("div.easyui-layout").layout();
$("table#detailsTable").datagrid({
    pagination: false,
    singleSelect: true,
    fitColumns: true
});

What I need now is to make the grid have width 100% of its container (western panel), so it needs to resize together with the panel. Setting width="100%" or style="width: 100%;" for table does not help and the layout does not seem to fire any events when panels are resized (at least I haven't found any in the docs). Any ideas?

Answer

Brian Tompsett - 汤莱恩 picture Brian Tompsett - 汤莱恩 · Jan 26, 2015

(Answered in the comments and edits. See Question with no answers, but issue solved in the comments (or extended in chat) )

The OP wrote:

Looks like the case can be closed - the fit option solves the problem:

$("table#detailsTable").datagrid({
    fit: true,
    ...