Print Page - datagrid column fit to available width

Title: datagrid column fit to available width
Post by: devnull on May 27, 2014, 06:30:34 AM

Is it possible to make the final column in a datagrid automatically expand it's width to fill the entire available width ?

Title: Re: datagrid column fit to available width
Post by: jarry on May 27, 2014, 07:03:28 AM

First of all, set the 'fitColumns' property to true for the datagrid, and then set the 'fixed:true' for all the columns except the final column. The code looks like this:

Code:

<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
        data-options="
        fitColumns:true,
        singleSelect:true,url:'datagrid_data1.json',method:'get'">
    <thead>
        <tr>
            <th data-options="field:'itemid',width:80,fixed:true">Item ID</th>
            <th data-options="field:'productid',width:60,fixed:true">Product</th>
            <th data-options="field:'listprice',width:80,align:'right',fixed:true">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right',fixed:true">Unit Cost</th>
            <th data-options="field:'attr1',width:150">Attribute</th>
        </tr>
    </thead>
</table>

Title: Re: datagrid column fit to available width
Post by: morib on May 29, 2014, 04:07:41 PM

I have a very similar use case. In my case, the width of each columns is not known. Once the data is loaded I perform and Autofit method on all columns. What I would like to do is to autofit all columns except the last one and have that one take all remaining space to fill the width of the datagrid (and not have the "empty" section on the datagrid on the right. Is this possible?

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on May 27, 2014, 06:30:34 AM