EasyUI Forum
May 14, 2021, 01:38:40 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Last few rows of data grid not displayed  (Read 186 times)
brucet622
Newbie
*
Posts: 3


View Profile Email
« on: April 27, 2021, 09:15:23 AM »

Evaluating easyui so still new to this...

I have a page that uses a layout where the center panel contains a data grid.  As long as I don't include anything above that layout, all the rows in the data grid are displayed.  However, I have other pages where I need to have the layout and data grid in a tab panel.  Above the layout is a panel that holds several menu buttons.  When I do this, the last few rows of the data grid are not viewable.  The scroll bar, if it appears, does not scroll far enough to display all the rows.  The data grid does know the correct number of entries, it just doesn't show those last rows. 

I also run into this with a tree and a treegrid as well.  If I have any panels or anything for that matter, above them, the last few nodes/rows are cut off.  I'm clearly missing something here...

Here is how I have the html setup.

Code:
<body>
<br>
<span style="font-weight: bold;">DETAIL STATEMENT:</span>
<span id='FileName'></span>
<br>
<br>
<div id="tabPanel" class="easyui-tabs" data-options="plain:true,border:false,fit:true">

<div id="Summary_tab" title="Summary" >

<div class="easyui-panel" >
<div id="Summary_toolbar"></div>
</div>



<div id="Summary_layout" class="easyui-layout" data-options="fit:true">

<div data-options="region:'center',fit:false,border:false,plain:true,split:false">
<div id="Summary_datagrid" ></div>
</div>

<div data-options="region:'west',title:'Asset Instance Types',split:false,collapsed:false,collapsible:true" style="width:200px;">
<table style="width:200px">
    <!-- some simple text goes here.  Removed for clarity.  -->
</table>
</div>

</div> <!--  Summary_layout -->

</div> <!--  Summary tab  -->


The summary datagrid is setup in javascript here:

Code:
// Setup the datagrid for the Summary tab.
$('#Summary_datagrid').datagrid({
url: FilePropertiesUrl,
method: 'get',
//title: // Not sure what to put here, if anything?

fit: true,
//width: 700,
//height: 250,
height: 'auto',
fitColumns: false,
singleSelect: true,
striped: true,
pagination: true,
pagePosition: 'top',
pageList: [10,20,30,40,50,100],
pageSize: 10, 
layout: ['list','sep','first','prev','next','last','refresh','manual','links','info'],
loadMsg: 'Accessing Bank',
rownumbers: true,


frozenColumns: [[]],  // Important to clear if other views used it.
columns: [
[{
field: 'Name',
title: 'Property',
sortable: false
},
{
field: 'Value',
title: 'Value',
sortable: false
}
]
],

onRowContextMenu: function(e,index,row) {
e.preventDefault();
},

sortName: 'Name',
sortOrder: 'asc',

onLoadSuccess: function() {  // Says it has a data parameter but...
log.debug("Data successfully loaded.");
stopBusySpinner();
},
onLoadError: function() {
log.error("Data failed to load in the grid.");
stopBusySpinner();
}
});

I've tried many different permutations of properties but the only way I can get all the rows to be displayed is to remove the tabs and the panel that hold the menu buttons. 

Can someone point me in the right direction?

Thanks in advance!

Bruce
Logged
jarry
Administrator
Hero Member
*****
Posts: 1978


View Profile Email
« Reply #1 on: April 30, 2021, 04:05:13 PM »

Please reset your layout for the page.
Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var testData = [];
        for(var i=1; i<=200; i++){
            testData.push({
                Name:'Name'+i,
                Value:'Value'+i
            })
        }
        $(function(){
     $('#Summary_datagrid').datagrid({
         // url: FilePropertiesUrl,
         method: 'get',
         data: testData,
         //title: // Not sure what to put here, if anything?

         fit: true,
         //width: 700,
         //height: 250,
         height: 'auto',
         fitColumns: false,
         singleSelect: true,
         striped: true,
         pagination: true,
         pagePosition: 'top',
         pageList: [10,20,30,40,50,100],
         pageSize: 10, 
         layout: ['list','sep','first','prev','next','last','refresh','manual','links','info'],
         loadMsg: 'Accessing Bank',
         rownumbers: true,
         
         
         frozenColumns: [[]],  // Important to clear if other views used it.
         columns: [
             [{
                 field: 'Name',
                 title: 'Property',
                 sortable: false
             },
             {
                 field: 'Value',
                 title: 'Value',
                 sortable: false
             }
             ]
             ],
             
             onRowContextMenu: function(e,index,row) {
                 e.preventDefault();
             },

             sortName: 'Name',
             sortOrder: 'asc',

             onLoadSuccess: function() {  // Says it has a data parameter but...
                 log.debug("Data successfully loaded.");
                 stopBusySpinner();
             },
             onLoadError: function() {
                 log.error("Data failed to load in the grid.");
                 stopBusySpinner();
             }
     });
        })
    </script>
</head>
<body class="f-column">
<div id="header">
    <br>
    <span style="font-weight: bold;">DETAIL STATEMENT:</span>
    <span id='FileName'></span>
    <br>
    <br>
</div>
<div class="f-full">
    <div id="tabPanel" class="easyui-tabs" data-options="plain:true,border:false,fit:true">

    <div id="Summary_tab" title="Summary" >

    <div class="easyui-panel" >
    <div id="Summary_toolbar"></div>
    </div>



    <div id="Summary_layout" class="easyui-layout" data-options="fit:true">
       
        <div data-options="region:'center',fit:false,border:false,plain:true,split:false">
        <div id="Summary_datagrid" ></div>
        </div>
       
        <div data-options="region:'west',title:'Asset Instance Types',split:false,collapsed:false,collapsible:true" style="width:200px;">
        <table style="width:200px">
            <!-- some simple text goes here.  Removed for clarity.  -->
        </table>
        </div>
       
    </div> <!--  Summary_layout -->

    </div> <!--  Summary tab  -->
</div>


</body>
</html>
Logged
brucet622
Newbie
*
Posts: 3


View Profile Email
« Reply #2 on: May 01, 2021, 09:34:01 AM »

Well, I can't get this to work either.  The data is displayed in the datagrid but the pager does not limit the output to just a page.  This shows all 200 rows instead.  The problem I have been having is when the pager limits the number of rows as specified by the page size.

I made a couple of changes to not have any errors generated when it runs...

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var testData = [];
        for(var i=1; i<=200; i++){
            testData.push({
                Name:'Name'+i,
                Value:'Value'+i
            })
        }
        $(function(){
     $('#Summary_datagrid').datagrid({
         // url: FilePropertiesUrl,
         //method: 'get',
         data: testData,
         //title: // Not sure what to put here, if anything?

         fit: true,
         //width: 700,
         //height: 250,
         height: 'auto',
         fitColumns: false,
         singleSelect: true,
         striped: true,
         pagination: true,
         pagePosition: 'top',
         pageList: [10,20,30,40,50,100],
         pageSize: 10, 
         layout: ['list','sep','first','prev','next','last','refresh','manual','links','info'],
         loadMsg: 'Accessing Bank',
         rownumbers: true,
         
         
         frozenColumns: [[]],  // Important to clear if other views used it.
         columns: [
             [{
                 field: 'Name',
                 title: 'Property',
                 sortable: false
             },
             {
                 field: 'Value',
                 title: 'Value',
                 sortable: false
             }
             ]
             ],
             
             onRowContextMenu: function(e,index,row) {
                 e.preventDefault();
             },

             sortName: 'Name',
             sortOrder: 'asc',

             onLoadSuccess: function() {  // Says it has a data parameter but...
                 console.log("Data successfully loaded.");
                 //stopBusySpinner();
             },
             onLoadError: function() {
            console.log("Data failed to load in the grid.");
                // stopBusySpinner();
             }
     });
        })
    </script>
</head>
<body class="f-column">
<div id="header">
    <br>
    <span style="font-weight: bold;">DETAIL STATEMENT:</span>
    <span id='FileName'></span>
    <br>
    <br>
</div>
<div class="f-full">
    <div id="tabPanel" class="easyui-tabs" data-options="plain:true,border:false,fit:true">

    <div id="Summary_tab" title="Summary" >

    <div class="easyui-panel" >
    <div id="Summary_toolbar"></div>
    </div>



    <div id="Summary_layout" class="easyui-layout" data-options="fit:true">
       
        <div data-options="region:'center',fit:false,border:false,plain:true,split:false">
        <div id="Summary_datagrid" ></div>
        </div>
       
        <div data-options="region:'west',title:'Asset Instance Types',split:false,collapsed:false,collapsible:true" style="width:200px;">
        <table style="width:200px">
            <!-- some simple text goes here.  Removed for clarity.  -->
        </table>
        </div>
       
    </div> <!--  Summary_layout -->

    </div> <!--  Summary tab  -->
</div>

</div>
</body>
</html>
Logged
brucet622
Newbie
*
Posts: 3


View Profile Email
« Reply #3 on: May 01, 2021, 10:19:07 AM »

OK, I think I now have a work-around.  I used your trick on the page but I had to remove all explicit panel components.  Instead, I had to use a layout with a north panel to hold the menu buttons and the center panel to hold everything else.  It does display slower but at least the rows are not cut off. 

Note that I tried to explicitly set the height of the panel and that had no effect.  The data grid still cutoff the number of rows that matched the height of the panel.  Am I missing something here or does this look like a bug?  I have a hard time believing that though because the "panel" is used in the layout... 

Anyway, thanks for your help! 

Bruce
Logged
jarry
Administrator
Hero Member
*****
Posts: 1978


View Profile Email
« Reply #4 on: May 01, 2021, 03:43:22 PM »

The data displaying on the datagrid only demonstrates how to fill some data into the datagrid. Please look at this example https://jeasyui.com/demo/test/test14.html. It loads the data page by page as your problem describes.
Logged
Pages: [1]
  Print  
 
Jump to:  

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