Как я могу получить dgrid ondemandgrid для отображения внутри dijit / диалогового окна?

Question

Я использую 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 () , но ни один из них не дает мне сетку. Вывод в консоль для этого при нажатии кнопки «Ссылка» заключается в том, что узел goallist имеет содержимое «пространство сетки», как до, так и после запуска ().

И, фактически, диалоговое окно отображается на странице с "пространством сетки", где должна быть сетка.

Поскольку исходная сетка (код не показан здесь) загружается и отображается правильно, я подозреваю, что у меня проблема синхронизации или какая-то проблема с областью действия.

Вот пользовательский 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
• dojo-release-1.13.0

Для чего я установил файлы dgrid и dojo, загрузив файл .tar.gz в веб-сервер и распаковывает их там, но я установил файлы dstore, загрузив файл .zip на мой Windows компьютер, распаковав их туда и скопировав на веб-сервер с FTP.

Я использую они в контексте платформы WebsiteBaker, от WebsiteBaker-2_12_2.tar.gz.