I have several DGrid OnDemandGrids that are being created in a series of tabs, each containing a contentpane with grid. The grids are targeting a Rest service that provides the range headers, id properties, etc. The tab that is first/selected/visible fills in completely with several calls to a Rest service as expected. Some of the other tabs fill ok, but they are sparsely populated so only require one call to the service. The tab in question only displays the first 25 since it only queries the service once (there are over a thousand records in the datastore).
So if the problem tab is the selected tab prior to creating the grid, the tab in question calls the rest service twice to fill the visible portion of the grid. If the tab and grid are created prior to selecting, only the first query has occurred (prior to the tab being opened) and is in the grid, and the rest is never queried. I can only guess that the tab being not selected/shown, the grid may not know how much to query to fill the size of the grid, which matches the tab.
Test code is included below, but uses internal rest service. I have mixed in DijitRegistry in the grid. If I have the problem and click on one of the columns to sort in the problem grid, everything fills back in correctly. Tried grid.resize and placing the grid directly on the tabcontainer without any effect.
Simple OnDemandGrid targeting a Rest service tied to a DOM id in the href of a contentpane added to a tabcontainer, but causing lots of problems...
Suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test dGrid</title>
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="dojo/dgrid/css/dgrid.css">
<link rel="stylesheet" href="dojo/dgrid/css/skins/claro.css">
<style>
.claro {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: .75em;
color: #000;
}
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#Grid1 {
width: 100%;
height: 100%;
}
</style>
<script src="dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en'"></script>
<script>
require([
"dojo/ready",
"dijit/registry",
"dojo/_base/declare",
"dgrid/OnDemandGrid",
"dgrid/extensions/DijitRegistry",
"dstore/Memory",
"dstore/Rest",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
],
function (ready, registry, declare, Grid, DijitRegistry, Memory,Rest) {
ready(function () {
var mystore = new (declare([Rest]))({
target : "Rest/HR/Employees",
idProperty: "employeeID",
});
var datacolumns = {
employeeID : 'ID',
fname: "First Name",
lname: "Last Name",
username : 'User Name',
employeeNbr: "Employee Number",
unitName: "Unit Name",
inserted: "Inserted",
updated: "Updated",
updatedBy: "Updated By",
counter : 'count'
};
var CustomGrid = declare([Grid, DijitRegistry]);
this.Grid1 = new CustomGrid({
collection: mystore,
columns: datacolumns,
idProperty: "id"
}, "Grid1");
this.Grid1.startup();
});
});
</script>
</head>
<body class="claro">
<div id="TabContainer" data-dojo-type="dijit/layout/TabContainer" style="width:100%; height:100%" data-dojo-props="tabStrip:true">
<div id="Tab1" data-dojo-type="dijit/layout/ContentPane" title="Emtpy" data-dojo-props="selected:true">
Nothing here, just to keep tab 2 hidden until clicked on
</div>
<div id="Tab2" data-dojo-type="dijit/layout/ContentPane" title="Grid">
<div id="Grid1"></div>
</div>
<div id="Tab3" data-dojo-type="dijit/layout/ContentPane" title="Empty">
Nothing
</div>
</div>
</body>
</html>
Looks like the culprit is the grid.startup(). Noticed one other question that had similar problems that mentioned the timing of the startup call. Moved the startup call until after the tab was shown (onShow event of the Contentpane), and it straightened out the drawing of the grid and query of the Rest service.