Print Page - Datagrid fit 100% width and height with dynamic resizing

Title: Datagrid fit 100% width and height with dynamic resizing
Post by: doev 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?

Title: Re: Datagrid fit 100% width and height with dynamic resizing
Post by: varonica 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();

Title: Re: Datagrid fit 100% width and height with dynamic resizing
Post by: doev 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.

Title: Re: Datagrid fit 100% width and height with dynamic resizing
Post by: varonica on November 29, 2013, 06:01:00 PM

Can you post your code here ?

Title: Re: Datagrid fit 100% width and height with dynamic resizing
Post by: arma on November 30, 2013, 06:48:03 PM

You can put your grid in easyui layout to make it autoresize

Title: Re: Datagrid fit 100% width and height with dynamic resizing
Post by: doev 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>

Title: Re: Datagrid fit 100% width and height with dynamic resizing
Post by: doev 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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: doev on November 27, 2013, 04:47:15 AM