EasyUI Forum
April 25, 2024, 02:39:39 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1]
1  General Category / EasyUI for jQuery / Re: Last few rows of data grid not displayed 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
2  General Category / EasyUI for jQuery / Re: Last few rows of data grid not displayed 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>
3  General Category / EasyUI for jQuery / Last few rows of data grid not displayed 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
Pages: [1]
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!