Print Page - Set Height of datagrid to 100%

How can Set Height of datagrid to 100%

this code not work

<body style="height:100%">
   <h2>Basic DataGrid</h2>
   <p>The DataGrid is created from markup, no JavaScript code needed.</p>
   <div style="margin:20px 0;"></div>

   <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:100%"
         data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
      <thead>
         <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:250">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
         </tr>
      </thead>
   </table>

</body>

Please refer to the code below.

Code:

<body>
  <table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:100%"
      data-options="singleSelect:true,collapsible:true,data:data">
    <thead>
      <tr>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'productid',width:100">Product</th>
        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
        <th data-options="field:'attr1',width:250">Attribute</th>
        <th data-options="field:'status',width:60,align:'center'">Status</th>
      </tr>
    </thead>
  </table>
  <style type="text/css">
    html,body{
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

</body>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: MSAG on March 15, 2022, 05:00:17 AM