Set Height of datagrid to 100%

EasyUI Forum

May 19, 2024, 06:52:25 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Set Height of datagrid to 100%

Pages: [1]

« previous next »

Author

Topic: Set Height of datagrid to 100% (Read 1860 times)

MSAG

Newbie

Posts: 41

Set Height of datagrid to 100%

« on: March 15, 2022, 05:00:17 AM »

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>


	Logged

jarry

Administrator
Hero Member

Posts: 2264

Re: Set Height of datagrid to 100%

« Reply #1 on: March 16, 2022, 09:16:37 PM »

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>


	Logged

Pages: [1]

« previous next »