treedojodgriddstore

dgrid Tree rendering flat at first

I have a very similar problem to this post.

My symptoms are the same (parents and children are rendered flat at first. You can "expand" the parents to cause some of the children to be displayed properly under them, and then you can collapse them again to get the tree to display how it's supposed to) but the solution provided (pass store.getRootCollection() to the grid instead of just store) doesn't work for me. If I do that, I get nothing but the headers displaying.

To start with, I'm trying to get it working using the code shown in the dgrid laboratory (just check "tree" in "Grid Features") to eliminate as many errors on my part as I can.

The only things I can think of that are different in my code from the example is that I'm making this grid inside of a custom widget, and I'm loading several other modules (I know I'll need them later)

define(["dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/text!./templates/DefaultsWidget.html",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin",
        "dijit/TitlePane",
        "dijit/layout/ContentPane",
        "dgrid/OnDemandGrid",
        "dgrid/Keyboard",
        "dgrid/Selection",
        "dgrid/extensions/DijitRegistry",
        "dgrid/Editor",
        "dgrid/Tree",
        "dstore/Memory",
        "dstore/Trackable",
        "dstore/Tree",
        "dojo/domReady!"],
		function(/*DOJO:*/declare, lang, dom, domConstruct, template,
				 /*DIJIT*/_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, TitlePane,ContentPane,
				 /*DGRID*/OnDemandGrid, Keyboard, Selection, DigitRegistry, Editor, Tree,
				 /*DSTORE*/Memory, Trackable, TreeStoreMixin){
			return declare("company.widgets.DefaultsWidget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
				
				//The template defined with dojo.text
				templateString: template,				
				grid: null,
				
				postCreate: function(){
					
					var testData = [];
					var column;
					var i;
					var item;

					for (i = 0; i < 50; i++) {
						item = {};
						for (column in { First_Name: 1, Last_Name: 1 }) {
							item.id = i;
							item[column] = column + '_' + (i + 1);
						}
						if (i > 1) {
							item.hasChildren = false;
							item.parent = i % 2;
						}
						testData.push(item);
					}
					
					var store = new (declare([Memory, Trackable, TreeStoreMixin]))({
						data: testData
					});
					
					// Instantiate grid
					this.grid = new (declare([OnDemandGrid, Tree]))({
						collection: store,
						columns: {
							First_Name: {
								label: 'First Name',
								renderExpando: true
							},
							Last_Name: {
								label: 'Last Name'
							}
						},
					}, this.testGrid);
					

				},
				startup: function() {
					this.grid.startup();
				}

			}); //return declare
        }//function
);//define

This is how the grid displays with collection: store,

enter image description here

Please let me know if you need more information or if I missed any SO guidelines or ettiquette and I'll be happy to edit, rephrase, etc.

Solution

  • It seems that the issue that was causing the grid to display this way was that the root rows didn't have parent: null in them. The code displayed in the Laboratory doesn't appear to work as-is, and requires both the fix I just mentioned as well as the .getRootCollection() fix from the question I referenced.