EasyUI Forum
April 24, 2024, 09:06:38 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Datagrid fit 100% width and height with dynamic resizing
Pages: [1]
« previous next »
  Print  
Author Topic: Datagrid fit 100% width and height with dynamic resizing  (Read 45835 times)
doev
Newbie
*
Posts: 22


View Profile
« on: November 27, 2013, 04:47:15 AM »
Hi,

I like to have a datagrid/table perfectly fit its container. Width works so far, but it is not redrawn when I resize the browser. With height I have no idea.

Can someone give my a hint?
Logged
varonica
Full Member
***
Posts: 106


View Profile
« Reply #1 on: November 28, 2013, 07:51:32 PM »
If i'm not mistaken, this would help you:
Code:
var $element=$(window),lastWidth=$element.width(),lastHeight=$element.height();	
function checkForChanges(){			
   if ($element.width()!=lastWidth||$element.height()!=lastHeight){	
	$('#panel').panel('resize');
	$('#datagrid').datagrid('resize'); 
	lastWidth = $element.width();lastHeight=$element.height();	 
   }
   setTimeout(checkForChanges, 500);
}
checkForChanges();
Logged
doev
Newbie
*
Posts: 22


View Profile
« Reply #2 on: November 29, 2013, 05:54:36 AM »
Thank you!

I add ...

$('#dg').datagrid('resize');
$('#toolbar').panel('resize');

... to my function that is called when the browser-window resizes and it works fine.

But still have no solution for 100% height. Try to change the height with js, but no reaction.
Logged
varonica
Full Member
***
Posts: 106


View Profile
« Reply #3 on: November 29, 2013, 06:01:00 PM »
Can you post your code here ?
Logged
arma
Full Member
***
Posts: 110


View Profile
« Reply #4 on: November 30, 2013, 06:48:03 PM »
You can put your grid in easyui layout to make it autoresize
Logged
doev
Newbie
*
Posts: 22


View Profile
« Reply #5 on: December 04, 2013, 06:16:03 AM »
I still searching for an solution. Currently the datagrid has a fixed size of about 550px.


Here is my Code:

Code:
<body>
        <div class="easyui-layout" fit="true">
            <div id="menu" region="north">
               <?php echo $this->mainmenu(); ?>
            </div>
            <div id="content" region="center">
              <table
              id="dg"
              title="{$config['title']}"
              class="easyui-datagrid"
              url="{$url}"
              fit="true"
              toolbar="#toolbar"
              singleSelect="false"
              multiSort="true"
              fitColumn="true"
              autoRowHeight="false"
              showHeader="true"
              showFooter="true"
              data-options="
                  method: 'get',
                  remoteFilter: 'true',
                  url: '{$url_getlist}',
                  view: scrollview,
                  pageSize: 50,
                  filterDelay: 1000,
                 "
              >
             <thead>
              <tr>
               {$columns}
              </tr>
              </thead>
              </table>
            </div>
            <div id="statusbar" region="south" style="padding:5px;">
                ....
            </div>
        </div>
    </body>
Logged
doev
Newbie
*
Posts: 22


View Profile
« Reply #6 on: December 05, 2013, 02:27:03 AM »
Ok, was my fault.

The table was not directly in the Layout, it was in a div inside the Layout. Now it works!

Thx
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

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