fit property of datagrid doesn't work

[balri771]

Hi ,
   The fit property of datagrid doesn't work when I with layout.the west of layout put a tree ,the center put a datagrid ,then the fit property in vain！
   Any help or direction would be appreciated.
   thanks!

[stworthy]

Here is the example shows how to put datagrid(with fit propety set to true) on layout center region.
http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=Basic

[balri771]

hello,

   I know how to use the fit ,but it doesn't work. Below is my code.
   <div data-options="region:'west',title:'权限组信息',split:true" style="width:150px;">
      <div>
       <ul id="treeqm" width="98%" class="easyui-tree" data-options="
       url: '@Url.Content("~/Permission/ListPermTree")',
       onClick: function (node) {
            $('#dg').datagrid({
                url:'@Url.Content("/Permission/List")?qxzid='+node.id,
                pagination:true,
                singleSelect:true,
                rownumbers:true,
                pageList:[15,20,30],
                columns:[[
                    {field:'XM',title:'@resBaseinfo.name',width:150},
                    {field:'RYBH',title:'@resBaseinfo.card_rybh',width:120},
                    {field:'KXLH',title:'@resBaseinfo.card_kh',width:100},
                    {field:'BMMC',title:'部门',width:100},
                    {field:'KMBH',title:'@resBaseinfo.card_kmbh',width:100},
                    {field:'KZT',formatter:formatKZT,title:'@resBaseinfo.card_kzt',width:100}
                   
                      ]]
            });
        }
       "></ul>
      </div>
   </div>

<div id="w_list_print" >
       <table id="dg" width="80%" class="easyui-datagrid" data-options="url:'@Url.Content("~/Permission/List")',
                pagination:true,
                singleSelect:true,
                rownumbers:true,
                pageList:[15,20,30],
                fit:true,
                columns:[[
                    {field:'XM',title:'@resBaseinfo.name',width:150},
                    {field:'RYBH',title:'@resBaseinfo.card_rybh',width:120},
                    {field:'KXLH',title:'@resBaseinfo.card_kh',width:100},
                    {field:'SSBMJG',title:'部门',width:100},
                    {field:'KMBH',title:'@resBaseinfo.card_kmbh',width:100},
                    {field:'KZT',formatter:formatKZT,title:'@resBaseinfo.card_kzt',width:100}
                     ]]">
       </table>
     </div>

 I click on the left side of the tree,data loading to the right,but I add the fit property,the data cann't loaded and the pagination don't show !

[stworthy]

You need to define a center panel for the layout. Try this:

Code:

<div data-options="region:'west',split:true" style="width:150px;">
...
</div>
<div id="w_list_print" data-options="region:'center'">
	<table class="easyui-datagrid" ...></table>
</div>

[balri771]

Hello,

  I'm sorry for I I didn't completely copy the code。
    <div data-options="region:'center'" style="overflow:hidden;">
     <div id="toolbar" class="toolbar">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick=" "> </a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick=" "> </a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick=" "> </a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick=" "> </a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-setpos',plain:true" onclick=" "> </a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-setpos',plain:true" onclick=" "> </a>
         
     </div>
     <div id="w_list_print" >
       <table id="dg" width="80%" class="easyui-datagrid" data-options="url:'@Url.Content("~/ /List")',
                pagination:true,
                singleSelect:true,
                rownumbers:true,
                pageList:[15,20,30],
                columns:[[
                    {field:'XM',title:'@resBaseinfo.name',width:150},
                    {field:'RYBH',title:'@resBaseinfo.card_rybh',width:120},
                    {field:'KXLH',title:'@resBaseinfo.card_kh',width:100},
                    {field:'SSBMJG',title:'部门',width:100},
                    {field:'KMBH',title:'@resBaseinfo.card_kmbh',width:100},
                    {field:'KZT',formatter:formatKZT,title:'@resBaseinfo.card_kzt',width:100}
                     ]]">
       </table>
     </div>
   </div>

   then add the fit property ,the data still can't load and the pagination don't show!I don't know what's wrong

[stworthy]

Please try this:

Code:

<div data-options="region:'center'" style="overflow:hidden;">
	<div id="toolbar" class="toolbar">
	...
	</div>
	<table id="dg" class="easyui-datagrid" data-options="
				toolbar:'#toolbar',
				fit:true,
				...
			">
	</table>
</div>

[balri771]

 hi,
  I'm try,The same results.Thank you all the same!

[stworthy]

Here is the layout example, it works well.
http://jsfiddle.net/t5yuJ/

[balri771]

Hi,
  thank you very much!The solution is to remove the table div layer about the question. It's really effective，but there is still a problem! The footer of datagrid isn't display! I debugging by FireBug,find that the footer's style ="display：none",so the  pagination property doesn't work!
 
 Thank you again for your answers!