EasyUI Forum
April 28, 2024, 03:18:04 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: #Datagrid# is there a way to make the width of a column expanded automatically ?  (Read 26073 times)
bakerchen
Newbie
*
Posts: 9


View Profile Email
« 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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: April 10, 2013, 10:09:53 PM »

Please set fitColumns property to true.
Logged
bakerchen
Newbie
*
Posts: 9


View Profile Email
« Reply #2 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.
Logged
bakerchen
Newbie
*
Posts: 9


View Profile Email
« Reply #3 on: April 12, 2013, 03:26:09 AM »

Anybody can help me out?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 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>
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!