Как мне заставить dgrid ondemandgrid отображаться внутри dijit/dialog?
Я использую dgrid OnDemandGrid в цифре / диалоговом окне. Я публикую диалог, но сетка не отображается. Я вижу, где должна располагаться сетка, но сама сетка не публикуется с помощью grid.startup(). Я думаю, это потому, что я не понимаю, когда происходят события, и поэтому не запускаю сетку в нужное время.
Я настраиваю страницу для определения целей пользователем. Я бы хотел, чтобы они связали одну цель с другой.
Для этого я хочу опубликовать диалоговое окно с сеткой существующих целей и позволить им выбрать одну для ссылки. Несмотря на то, что я получаю сетку целей на странице, когда я пытаюсь сделать то же самое для сетки в диалоговом окне, сетка не отображается.
Я использовал dgrid для формирования сетки на главной странице, и этот код работает, чтобы показать список существующих целей, например...
HTML
<div>
<h4>Goals</h4>
<div id="goalgrid" class="grid"></div>
</div>
Сценарий
require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dstore/Memory", "dijit/Dialog", "dijit/form/TextBox", "dijit/form/CheckBox", "dijit/form/Button", "dojo/dom", "dojo/on"],
function (declare, OnDemandGrid, Selection, Memory, Dialog, TextBox, CheckBox, Button, dom, on) {
var gridData = [
{ id: 1, goalName: "Top Goal", parentId: 0 },
{ id: 2, goalName: "Objective 1", parentId: 1 },
{ id: 3, goalName: "Objective 2", parentId: 1 }
];
gridStore = new Memory({data: gridData});
var grid = new (declare([ OnDemandGrid, Selection ]))({
collection: gridStore,
columns: {
id: "ID",
goalName: "Name",
parentId: "Parent"
}
}, "goalgrid");
grid.renderArray(gridData);
...
На этой странице отображается заголовок целей и сетка с тремя целями в gridData.
Я пробовал добавить код для такого диалогового окна:
echo '<div class="content">';
echo '<p>This page allows you to describe your goals.</p>
<div data-dojo-type="dijit/form/Form" id="connect-form" widgetid="form" lang="en" action="" method="">
<fieldset data-dojo-attach-point="part1">
<div class="event-input-text">
<h4>Goals</h4>
<div id="maingrid">Main grid for page, which shows data when dgrid is invoked on maingrid.</div>
</div>
<div id="buttonArea" style="padding:5em 0 0 15px;">
<input id="goa-link-button" name="submit" value="Link" type="button">
</div>
</fieldset>
</div>';
echo '</div>'; // end of content
echo '<script>
require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dstore/Memory", "dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button", "dojo/dom", "dojo/on"],
function (declare, OnDemandGrid, Selection, Memory, Dialog, TextBox, Button, dom, on) {
var linkGoalDialogContent = `
<div id="gldiv">
<ul>
<li>Sub-Goal ID: ID</li>
<li>Sub-Goal Name: Goal</li>
</ul>
<div id="goallist" class="listgrid">gridspace</div>
<div class=\"dijitDialogPaneActionBar\">
<input id="goa-link-goal-cancel-button" name="submit" value="Cancel" type="button">
<input id="goa-goal-link-button" name="submit" value="Link" type="button">
</div>
</div>`;
var goalGridData = [
{ id: 1, goalName: "Top Goal" },
{ id: 2, goalName: "Objective 1" },
{ id: 3, goalName: "Objective 2" }
];
var goalGridStore = new Memory({data: goalGridData});
var ggrid = new (declare([ OnDemandGrid, Selection ]))({
collection: goalGridStore,
columns: {
id: "ID",
goalName: "Name"
}
}, "linkGoalDialog.gldiv.goallist");
var linkGoalDialog = new Dialog({
id: "linkGoalDialog",
title: "Link Goal to New Parent Goal",
content: linkGoalDialogContent,
style: "width: 400px",
onShow: function() {
console.log("Show called on linkGoalDialog\n");
console.log("The goallist node has contents: "+dom.byId("goallist").innerHTML+"\n");
ggrid.startup();
console.log("The goallist node has contents: "+dom.byId("goallist").innerHTML+"\n");
},
onHide: function () {
console.log("Hide called on linkGoalDialog\n");
}
});
ggrid.startup();
on(dom.byId("goa-link-button"), "click", function(){
linkGoalDialog.show();
});
on(dom.byId("goa-link-goal-cancel-button"), "click", function(){
linkGoalDialog.hide();
});
on(dom.byId("goa-goal-link-button"), "click", function(){
linkGoalDialog.hide();
});
});
</script>';
Я также пробовал ggrid.renderArray(goalGridData) вместо ggrid.startup(), но ни один из них не дает мне сетку. Когда вы нажимаете кнопку Link, в консоли выводятся данные о том, что узел goallist имеет содержимое "gridspace" как до, так и после startup ().
И, фактически, диалог показывает на странице с "пространством сетки", где должна быть сетка.
Поскольку исходная сетка (код здесь не показан) загружается и отображается правильно, я подозреваю, что у меня проблема с синхронизацией или какая-то проблема с областью видимости.
Вот пользовательский CSS, который я использую для этого:
.grid {
width: 700px;
height: 25em;
margin: 10px;
}
.listgrid {
width: 300px;
height: 5em;
margin: 10px;
}
.grid .dgrid-cell {
width: 80px;
}
.grid .field-id {
width: 10px;
}
.grid .field-goalName {
width: 100px;
}
.grid .field-parentId {
width: 15px;
}
Есть ли у кого-нибудь идеи, почему не отображается сетка в диалоге? Спасибо за помощь!
Обновление 3 мая 2020 г.
Вот версии, которые я использую:
- dgrid 1.2.1
- dstore 1.2.1
- Додзё-релиз-1.13.0
Как бы то ни было, я установил файлы dgrid и dojo, загрузив.tar.gz на веб-сервер и распаковав их там, но я установил файлы dstore, загрузив файл.zip на свой компьютер с Windows, распаковав их там и копирование на веб-сервер с FTP.
Я использую их в контексте структуры WebsiteBaker из WebsiteBaker-2_12_2.tar.gz.
После дополнительных исследований я попытался разместить сетку после вызова dialog.show(), например:
on(dom.byId("goa-link-button"), "click", function(){
linkGoalDialog.show();
ggrid.renderArray(goalGridData);
});
Это не работает. Я тоже пробовал там ggrid.startup(), но он тоже не работает.
Обновление 26 мая 2020 г.
После дополнительных исследований я попытался изменить:
var linkGoalDialog = new Dialog({
к
window.linkGoalDialog = new Dialog({
исходя из теории, что диалог должен идти на оконном объекте, чтобы он отображался перед вызовом для настройки сетки. Но и это не сработало.
1 ответ
Dgrid выполняет вычисления измерения DOM, которые не работают, если DOM dgrid не виден. Похоже, это так и для вашего диалога. Решение - позвонитьstartup/renderArrayкогда виден dgrid DOM. Попробуйте позвонитьgrid.renderArray(gridData) после того, как диалог был открыт и стал видимым.