Skip to content

Tree column doesn't fill preload with rows when scrolling OnDemandGrid #161

Closed
mvaerle opened this Issue May 9, 2012 · 2 comments

2 participants

@mvaerle
mvaerle commented May 9, 2012

I'm trying to use an OnDemandGrid with a Tree column.

When I expand a node that has more children than that fit in the current grid it correctly builds a preload node that is empty. The height of the preload node also looks correct. However when I scroll the grid the preload node does not get filled with the actual nodes.

Below is a simplified drop-in example with dojo and dgrid as requirements. When you expand the root node and scroll the grid to the bottom you can see that there is empty space and that nodes 27 and up are not being rendered.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Tree Grid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=570" />
    <style type="text/css">
      @import "dojo/resources/dojo.css";
      @import "dgrid/css/skins/claro.css";
      .dgrid {
          width: 700px;
      }
      #tree .field-bool {
          width: 4em;
      }
      #tree .field-type {
          width: 5em;
      }

      #treeSelector .selector {
          width: 2em;
      }

      .ui-widget{
          margin: 10px;
      }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true"></script>
    <script type="text/javascript">
      require(["dojo/store/Memory", "dojo/store/Observable", "dgrid/OnDemandGrid", "dgrid/tree", "dgrid/Keyboard", "dgrid/Selection", "dgrid/selector", "dojo/_base/declare", "dojo/store/util/QueryResults", "dojo/_base/Deferred"], function(Memory, Observable, Grid, tree, Keyboard, Selection, selector, declare, QueryResults, Deferred) {
          var data = [
              {id: "root", name: "1" },
              {id: "2", name: "2", parent: "root" },
              {id: "3", name: "3", parent: "root" },
              {id: "4", name: "4", parent: "root" },
              {id: "5", name: "5", parent: "root" },
              {id: "6", name: "6", parent: "root" },
              {id: "7", name: "7", parent: "root" },
              {id: "8", name: "8", parent: "root" },
              {id: "9", name: "9", parent: "root" },
              {id: "10", name: "10", parent: "root" },
              {id: "11", name: "11", parent: "root" },
              {id: "12", name: "12", parent: "root" },
              {id: "13", name: "13", parent: "root" },
              {id: "14", name: "14", parent: "root" },
              {id: "15", name: "15", parent: "root" },
              {id: "16", name: "16", parent: "root" },
              {id: "17", name: "17", parent: "root" },
              {id: "18", name: "18", parent: "root" },
              {id: "19", name: "19", parent: "root" },
              {id: "20", name: "20", parent: "root" },
              {id: "21", name: "21", parent: "root" },
              {id: "22", name: "22", parent: "root" },
              {id: "23", name: "23", parent: "root" },
              {id: "24", name: "24", parent: "root" },
              {id: "25", name: "25", parent: "root" },
              {id: "26", name: "26", parent: "root" },
              {id: "27", name: "27", parent: "root" },
              {id: "28", name: "28", parent: "root" },
              {id: "29", name: "29", parent: "root" },
              {id: "30", name: "30", parent: "root" },
          ];

          treeStore = Observable(new Memory({
              identifier: "id",
              data: data,
              getChildren: function(parent, options) {
                  return this.query({parent: parent.id}, options);                
              }
          }));

          var StandardGrid = declare([Grid, Keyboard]);

          var treeGrid = window.treeGrid = new StandardGrid({
              store: treeStore,
              query: {id: "root"},
              columns: [
                  tree({label: "Name", field:"name", sortable: false}),
              ]
          }, "treeGrid");
      });
    </script>   
  </head>
  <body class="claro">
    <h2>Lazy-loading tree grid, with store functionality</h2>

    <div id="treeGrid"></div>

  </body>
</html>
@mvaerle
mvaerle commented Jun 21, 2012

Any news on this? I tried uit kriszyp's scrolling branch which claims to fix the problem in the comments on this post (http://www.sitepen.com/blog/2011/10/26/introducing-the-next-grid-dgrid/) but that doesn't work for me as well.

I think it's pretty strange that no one else is running in to this? Am I doing something wrong?

Thanks!

@kriszyp kriszyp added a commit to kriszyp/dgrid that referenced this issue Aug 31, 2012
@kriszyp kriszyp Borrowed some code from the unrendering-tree-nodes branch to ensure t…
…hat we traverse all the preload nodes to fix this, refs #161
417b09e
@SitePenKenFranqueiro

This has been fixed with f81405e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.