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?
(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,
...