Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

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

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

mvaerle opened this issue May 9, 2012 · 2 comments

Comments

@mvaerle
Copy link

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
Copy link
Author

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 added a commit to kriszyp/dgrid that referenced this issue Aug 31, 2012
@kriszyp
Borrowed some code from the unrendering-tree-nodes branch to ensure t…
417b09e 
…hat we traverse all the preload nodes to fix this, refs SitePen#161
@kriszyp kriszyp mentioned this issue Aug 31, 2012
Closed
@ghost
Copy link

ghost commented Sep 12, 2012

This has been fixed with f81405e

@ghost ghost closed this as completed Sep 12, 2012
@davidwarren davidwarren mentioned this issue Dec 26, 2017
Open
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mvaerle