Ich habe mehrere DGrid OnDemandGrids, die in einer Reihe von Registerkarten erstellt werden, die jeweils ein contentpane mit Gitter enthält. Die Raster zielen auf einen Rest-Dienst ab, der Bereichsüberschriften, ID-Eigenschaften usw. bereitstellt. Die Registerkarte, die zuerst/ausgewählt/sichtbar ist, wird vollständig wie erwartet mit mehreren Aufrufen an einen Restdienst ausgefüllt. Einige der anderen Registerkarten füllen sich gut, aber sie sind dünn besiedelt, so dass nur ein Aufruf an den Dienst erforderlich ist. Die fragliche Registerkarte zeigt nur die ersten 25 an, da sie den Dienst nur einmal abfragt (es gibt mehr als tausend Datensätze im Datenspeicher).DGrid in einem versteckten tabcontainer nur Abfragen dstore einmal
Wenn die Registerkarte Problem also vor dem Erstellen des Rasters die ausgewählte Registerkarte ist, ruft die entsprechende Registerkarte den Restdienst zweimal auf, um den sichtbaren Teil des Rasters zu füllen. Wenn die Registerkarte und das Raster vor der Auswahl erstellt werden, ist nur die erste Abfrage (vor dem Öffnen der Registerkarte) aufgetreten und befindet sich im Raster, und der Rest wird nie abgefragt. Ich kann nur raten, dass die Registerkarte nicht ausgewählt/angezeigt wird, das Raster möglicherweise nicht wissen, wie viel abzufragen, um die Größe des Rasters zu füllen, die der Registerkarte entspricht.
Testcode ist unten enthalten, verwendet aber internen Restservice. Ich habe DijitRegistry im Grid gemischt. Wenn ich das Problem habe und auf eine der Spalten klicke, um im Problemraster zu sortieren, wird alles korrekt ausgefüllt. Versuchte grid.resize und platziere das Gitter direkt auf dem tabcontainer ohne irgendeinen Effekt.
Einfache OnDemandGrid der einen Rest-Dienst gebunden an eine DOM-ID in der href eines contentPane Targeting zu einer TabContainer, aber viele Probleme verursacht ...
Verbesserungsvorschläge?
<!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>