How to fix the FlexiGrid Height and Width dynamically based on the screen resolution

FelxiGris is Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content
To Set up the flexigrid click here

Once your flexigrid setup is over you may face problem of fixing the height and width of the grid which is defined as constant value in setup . instead of setting it as constant value you can make it as dynamic
Here I am giving the steps to make it as dynamic
Step 1.
If you flexigrid component is calling inside the div tag or table tag follow the height and width as in terms of percentage
Step 2.
Sample table structure where u can place the flexigrid table
<table > border=”0” height=”100%” width=”100%”>
<tr height=”22”><td height=”20”>header if any</td></tr>
<tr height=”100%”><td height=”100%”> <!—100% to take rest of space -->
<div id=”flexigridDiv” ><table id="flex1"></table></div>
</td>
</tr>
</table>
Step3.
Then inside the flexigrid calling function set the height as
$("#flex1").flexigrid({
url: url,
dataType: 'json',
colModel : [
{display: name, name : 'idx', width : 40, sortable : true, align: 'center'},
{display: 'age', name : 'age', width : 100, sortable : true, align: 'left'},
{display: 'Description', name : 'description', width : 120, sortable : true, align: 'left'}
],
sortname: "idx",
sortorder: "desc",
usepager: true,
useRp: true,
rp: 20,
showTableToggleBtn: true,
onSubmit: addFormData,
height: $(“ #flexigridDiv”).innerHeight(); //this takes the height of the 2nd tr dynamically
});