EasyUI Forum

General Category => General Discussion => Topic started by: bakerchen on April 10, 2013, 09:49:29 PM



Title: #Datagrid# is there a way to make the width of a column expanded automatically ?
Post by: bakerchen on April 10, 2013, 09:49:29 PM
Set fit as true,
the with of table should be 100%,

NameDescriptionDate
bakerThis is a test2013-4-11
DavidSo looooooooooooooooooooooooong descirption2013-4-11

the width of column Name is fixed, I set it as 150,
the width of column Date is fixed as well, I set it as 200,
Can the width of column Description automatically expand to left width of a table?


Title: Re: #Datagrid# is there a way to make the width of a column expanded automatically ?
Post by: stworthy on April 10, 2013, 10:09:53 PM
Please set fitColumns property to true.


Title: Re: #Datagrid# is there a way to make the width of a column expanded automatically ?
Post by: bakerchen on April 10, 2013, 10:46:12 PM
It seems that fitColumns will assign average width to each column, right?

I need the width of 1st column is fixed, the width of 3rd column is fixed as well, but the 2nd column's width is flexible.( its' width should equal table's width - 1st column's width - 3rd column's width. its' width will be adjusted automatically according along with the table's width.)

I don't know if I have expressed my thought clearly, but maybe you can go see Gmail's email list.


Title: Re: #Datagrid# is there a way to make the width of a column expanded automatically ?
Post by: bakerchen on April 12, 2013, 03:26:09 AM
Anybody can help me out?


Title: Re: #Datagrid# is there a way to make the width of a column expanded automatically ?
Post by: stworthy on April 12, 2013, 06:17:08 AM
An solution to solve this issue is to define the 1st and 3st columns as auto width column, thus only the 2st column can extend its with to fit the grid's width. The code looks like this:
Code:
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px"
data-options="
singleSelect:true,
fitColumns:true
//...
">
<thead>
<tr>
<th data-options="field:'name',auto:true">Name</th>
<th data-options="field:'description',width:100">Description</th>
<th data-options="field:'date',auto:true">Date</th>
</tr>
</thead>
</table>