Question

I have a dgrid, working with tree column plugin. Every time that the user click on the tree, I call the server, catch the subrows(json) and bind it. But when it happens, these subrows are show in wrong position, like the image bellow. The most strange is when I change the pagination, after go back to first page, the subrows stay on the correct place.

(please, tell me if is possible to understand my english, then I can try to improve the text)

My dgrid code:

  var CustomGrid = declare([OnDemandGrid, Keyboard, Selection, Pagination]);

    var grid = new CustomGrid({
        columns: [
            selector({label: "#", disabled: function(object){ return object.type == 'DOCx'; }}, "radio"),
            {label:'Id', field:'id', sortable: false},
            tree({label: "Title", field:"title", sortable: true, indentWidth:20, allowDuplicates:true}),
            //{label:'Title', field:'title', sortable: false},
            {label:'Count', field:'count', sortable: false}
        ],
        store: this.memoryStore,
        collapseOnRefresh:true,
        pagingLinks: false,
        pagingTextBox: true,
        firstLastArrows: true,
        pageSizeOptions: [10, 15, 25],
        selectionMode: "single", // for Selection; only select a single row at a time
        cellNavigation: false // for Keyboard; allow only row-level keyboard navigation
    }, "grid");

My memory store:

loadMemoryStore: function(items){

            this.memoryStore = Observable(new Memory({
                data: items,
                getChildren: function(parent, options){
                    return this.query({parent: parent.id}, options);
                },
                mayHaveChildren: function(parent){
                    return (parent.count != 0) && (parent.type != 'DOC');
                }

            }));

        },

This moment I am binding the subrows:

        success: function(data){

            for(var i=0; i<data.report.length; i++){
                this.memoryStore.put({id:data.report[i].id, title:data.report[i].created, type:'DOC', parent:this.designId});
            }

        },

I was thinking, maybe every moment that I bind the subrows, I could do like a refresh on the grid, maybe works. I think that the pagination does the same thing.

Thanks.

edit:

I forgot the question. Well, How can I correct this bug? If The refresh in dgrid works. How can I do it? Other thing that I was thinking, maybe my getChildren is wrong, but I could not identify it.

thanks again.

Answer 1

My solution was change from PARENT hierarquia to CHILDREN hierarquia. Now works fine.

My dgrid code:

this.mapReportItems(reportDAO.get()); 
            //this.mapReportItems(x); 
            this.loadMemoryStore(this.reportItems); 

            var CustomGrid = declare([OnDemandGrid, Keyboard, Selection, Pagination]); 

            var grid = new CustomGrid({ 
                columns: [ 
                    selector({label: "#", disabled: function(object){ return object.type == 'DOCx'; }}, "radio"), 
                    {label:'Id', field:'id', sortable: false}, 
                    tree({label: "Title", field:"title", sortable: false, indentWidth:20, shouldExpand:function() { return 0; }}), 
                    //{label:'Title', field:'title', sortable: false}, 
                    {label:'Count', field:'count', sortable: true} 
                ], 
                query: {parent: parent.children }, 
                store: this.memoryStore, 
                deselectOnRefresh: false, 
                //columnReordering:true, 
                collapseOnRefresh:false, 
                pagingLinks: false, 
                pagingTextBox: true, 
                firstLastArrows: true, 
                pageSizeOptions: [10, 15, 25], 
                selectionMode: "single", // for Selection; only select a single row at a time 
                cellNavigation: false // for Keyboard; allow only row-level keyboard navigation 
            }, "grid"); 

My memory store:

this.memoryStore = Observable(new Memory({
data: items,
getChildren: function(parent){

            return parent.children; 
        }, 

        mayHaveChildren: function(parent){ 
            //return (parent.count != 0) && (parent.type != 'DOC'); 
            return (parent.children && parent.children.length) || (parent.count != 0 && parent.type != 'DOC'); 
        } 

    }));

This moment I am binding the subrows:

success: function(data){ 

                    var node = this.memoryStore.get(this.designId); 

                    for(var i=0; i<data.report.length; i++){ 
                        node.children.push({id:data.report[i].id, title:data.report[i].created, type:'DOC'}); 
                    } 

                    this.memoryStore.put(node); 
                    this.data = data; 
                }, 

Extra information. In my case I need map my Json data, this way:

   this.reportItems = dojo.map(jsondata.reportDesign, function(report) {
                return {
                    //'@uri': report[1],
                    id : report.id,
                    title : report.title,
                    count : report.count,
                    children: [],//report.children,
                    type : report.type
                    //parent : report.parent
                };
            });

This link was useful for me:
https://github.com/SitePen/dgrid/issues/346