sitepen / dgrid Goto Github PK

It would be very useful if we could get per-item acceptance checking like in dojo's dijit.Tree: http://dojotoolkit.org/api/1.6/dijit/Tree/checkItemAcceptance

Thanks for all your hard work!

I'm running on master. Whenever I refresh the tree grid, I get Uncaught TypeError: Cannot read property 'offsetTop' of null on line 302 of OnDemandList.js

In createEditor the connect function of the widget is used instead of On on the dom node. Is there a purpose to this or just legacy? It messes up things a bit for me, since it is one of the few things that require the control to be a "real" dijit Widget.

Any hope it will change?

//J

It'll be nice if store.mayHaveChildren() in Tree.js can return a Deferred like other methods. I've experimented with the idea by wrapping the part after getting mayHaveChildren in Deferred.when() and it seemed to be OK.

Under Chrome 19 or 20 (not the current 18) the column resizer is off by a few pixels. Also is the column divider for the header and it mis-aligns with the body of the grid.

It can be seen by opening a test page in one of the above browsers.

Following fixed it.

.dgrid-header .dgrid-cell-padding {
padding-right: 3px; /* instead of 0px */
}

.dgrid-resize-handle {
right: -4px; /* instead of -1px */
}

I'm trying to use a OnDemandGrid with a JsonRest store, it works for the first page of data, but when I scroll down to see other results, I see that another call is made to the server with a different range, but the grid is not updating correctly. Server side I return the Range-Content as described in the documentation.

JS code:

require([
    "dgrid/OnDemandGrid",
    "dojo/_base/declare",
    "dojo/store/JsonRest",
    "dojo/store/Cache",
    "dojo/store/Memory",

    "dojo",
    "dojo/domReady!"
    ],
    function(Grid, declare, JsonRest, Cache, Memory){

        //  define the column structure on the main grid, and create it.
        var columns = [
        {
            label: 'Id',
            field: 'id'
        },
        {
            label: 'Name',
            field: 'name'
        }
        ];

        var productGroupStore = Cache(JsonRest({target:"/mock/productgroups/"}), Memory());

        window.grid = new (declare([Grid]))({
            store: productGroupStore,
            columns: columns,
            minRowsPerPage: 5,
            maxRowsPerPage: 5
        }, "grid");


    }   //  end "main" function
);  //  end require

The json return on the first call to /mock/productgroups/
[{"id":70926,"name":"Fake Product"},{"id":580689,"name":"Fake Product"},{"id":801159,"name":"Fake Product"},{"id":335780,"name":"Fake Product"},{"id":985208,"name":"Fake Product"}]

and the headers for that call:
Status Code:200 OK

Request Headers:
Accept:application/javascript, application/json
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:application/x-www-form-urlencoded
Range:items=0-4
X-Requested-With:XMLHttpRequest

Response Headers:
Connection:Keep-Alive
Content-Length:180
Content-Type:text/x-json;charset=UTF-8
Keep-Alive:timeout=15, max=70
cache-control:no-cache
content-range:0-4/500

And when I scroll the grid to see other results, here's the result:
[{"id":174082,"name":"Fake Product"},{"id":397380,"name":"Fake Product"},{"id":403586,"name":"Fake Product"},{"id":921312,"name":"Fake Product"},{"id":379202,"name":"Fake Product"}]

and corresponding headers:

Request Method:GET
Status Code:200 OK

Request Headers:
Accept:application/javascript, application/json
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:application/x-www-form-urlencoded
Range:items=5-9
X-Requested-With:XMLHttpRequest

Response Headers:
Connection:Keep-Alive
Content-Length:181
Content-Type:text/x-json;charset=UTF-8
Keep-Alive:timeout=15, max=62
cache-control:no-cache
content-range:5-9/500

I just went through the tests on an iPad and are not able to scroll horizontally when columns are off screen.
You can see the issue in the widths.html test case.
For the case 'Grid with column widths exceeding grid width' you can only see the first three columns and it is not possible to scroll horizontally to see the final two columns.

I also recreated the problem in mobile_grid.html by adding the style:
.dgrid-cell {
width: 500px;
}

I tried sitting things within a scrollable view in case I could work around it but that did not help.

There's obviously a typo in the readme file, section "Grid: Specifying grid columns", in the code example (line 146)
you've meant
require(["dgrid/Grid"], function(Grid){
not
require(["dgrid/Grid"], function(List){

constructing a grid/list with no params fails

require(['dgrid/List'], function (List) {
  var list = new List();
});

need a params = params || {}; in the create function in List and probably a test to cover this

The tree does properly handle duplicate nodes. If getChildren returns the same node when called on different parent nodes, the tree breaks.

This is necessary to support trees such as a file system with symbolic links.

The problem appears to be that the grid assumes a one to one mapping between rows and store records. This is a reasonable assumption for a regular grid, but not for a tree.

In order to work around this I have to add apply a guid function to each record returned by my server. This adds 36 bytes to each record.

This also causes problems because to update a duplicated record, you need to updated multiple items in the store, which could trigger multiple ajax calls to perform the same operation.

At a minimum, this needs to be documented. I wasted a lot of time just to figure that an id column is required.

http://dojotoolkit.org/api/1.3/dojo/dnd/Source

It would be nice if there was an easy way to modify the DnD Source properties (selfaccept, accept, withHandles, etc). As far as I can tell, there is no way to currently do it without modifying the extensions/DnD.js file...

When using the Grid with a Tree column, it seems that mouse clicks do not always result in expanding or collapsing the node as expected.

This shows up in the example below.

It is most obvious/noticeable when opening/closing the same node, but it happens when clicking on different nodes as well, such as when attempting to recursively open a node hierarchy.

http://sitepen.github.com/dgrid/dgrid/test/Tree.html

Have a need where I'd like just the body of the grid to be displayed and not the header; in theory, one can simply override .renderHeader in Grid.js. However, at least one method (resize IIRC) looks for the headerNode and breaks when it doesn't find one.

When using the Tree column plugin and the DnD extension, the child rows of the tree cannot be selected - the root/top level row is selected instead. This is easy enough to check yourself by adding the DnD extension to dgrid/test/Tree.html.

tree.js:100-103

if(height){
    // after expansion, ensure display is correct, and we set it to none for hidden containers to improve performance
    this.style.display = height == "0px" ? "none" : "block";
}

If the grid is being rendered while styled as "display: none", the height will be 0px. I'm trying to render the grid as a tree in a hidden node and expand all the tree nodes programmatically, and this is causing the child nodes to be styled with "display: none".

I’ve created a dgrid app with dgrid 0.20 and dojo 1.7.1, and the datachange event is not fired in any Editor with IE9 ( and possible other IE versions ?) The Editor is loaded and I can change the content, but Enter or losing focus does not save the data.

Using dgrid and editors in auto save with dijit/form/TextBox should trigger save (PUT) back to the store when the user hits "enter", the same way the values are saved using regular "text" input as editors.

Current grid implementation (including dojox/grid/TreeGrid) all rely on returned items always being topLevelItems that contain children. This poses a problem when you need to filter to display specific children of Tree items example:

A
--A1
----C1
----C2
--A2
----C1
----C2

If you want to search/filter for C2's existing grids require using deep:true which returns a flat result of 2 items... which the grids of course will now render as top level items (not correct)

What would be great, is if this would instead render A->A1->C2 + A->A2->C2 w/o the extraneous items --- This means modifying child arrays (typically) which gets tricky when any type of eventing mechanism comes into play

The other catch would be for complex queries C2 || A2 for example.... would now need to return A->A1->C2 A->A2->C1/C2 (because A2 was a filtered match)

I have previously implemented this my wrapping grid's call to _fetchItems, building a referenceMap of item->parentItem and then copying the children's array for parent items and modifying them as needed.... but this is obviously NOT the ideal solution (and also, not 100% effective) due to not responding well to other actions creating items and then modifying the modified children arrays and not the true array.

If any of this is too hard to follow please ping me and I'll do a more detailed (and better illustrated) example.

-Karl

There appears to be an issue with OnDemand grids that have many rows. It is impossible (or at least extremely difficult) to scroll to the bottom of them - when dragging it, the scroll bar doesn't correctly follow the mouse. It appears that the height of the grid (or at least the scrolled area) does not correctly reflect the total number of rows returned by the store, and that it is being expanded as you scroll down.

This can be seen in dgrid/test/performance.html - you cannot scroll properly to the last row. This problem doesn't occur in the equivalent page for dojox.Grid.

I would like to have a hook for formatting values before they are stored back to the store. Now you can format before render but not the other way around.

There really might be 2 issues here:

1. To get the boarder layout to even start to play nice with dgrid, I have to nest the dgrid in a Content Pane. And even then, it chokes on draw a little bit (the first row starts to draw over (and a little bit to the right) of the top left area on the header colum.

2. If I try to use the dgrid as the "center" of a BorderContainer it draws, but draws behind the other siblings in the BorderContainer - and if a BorderContainer slitter is dragged by the mouse, it explodes.

Using simple array and inserting data into the grid with renderArray() method and setting selectionMode to 'single' it behaves like it should (only one row can be selected at the time).
But when switching to dojo's Memory object store ( code ), single row selection is broken.

This is probably the same issue as: #81

If you go to http://sitepen.github.com/dgrid/dgrid/test/JsonRest.html and type this into the console:

for (var i  = 0; i < 10; i++) {
    grid.refresh();
}

you'll get flooded by DOMExceptions.

I've temporarily "fixed" this by modifying whenDone() in renderArray() of dgrid/List.js to look like this:

function whenDone(resolvedRows){
    // Fix for DOMExceptions caused by querying the grid too fast
    try {
        (beforeNode && beforeNode.parentNode || self.contentNode).insertBefore(rowsFragment, beforeNode || null);
        lastRow = resolvedRows[resolvedRows.length - 1];
        lastRow && self.adjustRowIndices(lastRow);
    } catch (exception) {
        if (!exception instanceof DOMException) {
            console.error(exception);
        }
    }
    return rows = resolvedRows;
}

I have a feeling this might lead to memory leaks. Hopefully someone can come up with a better solution!

I noticed an issue with OnDemandGrid's column headers disappearing when the browser window is resized. Specifically, grids that are loaded in non-focused tabs of a dijit.layout.TabContainer.

Steps to reproduce:

1. Load test/dijit_layout.html in your browser.
2. Open Tab 1 and Tab 2 to verify that the column headers are visible.
3. Resize your browser window.
4. Select the other tab.
5. The column headers are no longer visible.
6. Resize the browser window again and the column headers will reappear.

This was tested with a clean checkout of the dgrid master branch and the latest versions of Firefox, Chrome, and Opera.

If anyone else is running into this issue, it is possible to work around by explicitly calling the grid's resize method in your ContentPane's show event handler. For example, if you're using a dojox.layout.ContentPane, set its scriptHasHooks property to true and try something like:

require(['dojo/on', 'foo/MyGrid'], function(on, Grid) {
    var myGrid = new Grid(...);

    on(_container_, 'show', function() {
        myGrid.resize();
    });
}

I noticed that while the on demand list uses the loadingMessage value when a loadingNode is created, the Pagination extension creates a loadingNode without using the loadingMessage value at all.

Upon reading through the article on SitePen about dgrid (http://www.sitepen.com/blog/2011/10/26/introducing-the-next-grid-dgrid/) I came across a strange issue when attempting to use the Keyboard plugin. I created a screencast to demonstrate what is occurring:
http://screencast.com/t/jMZt0YYuyv8

I'm not utilizing any modifier key to active the multiple selection—I'm simply using the keyboard's cursor keys to move around the grid.

Currently, dgrid/editor and dgrid/tree do not play together in a single cell, though this is desirable.

The combination of tree(editor()) half works. It stops working on completion of the edit, when the cell renders as a normal cell instead of a tree.renderCell.

It is perhaps the combination of tree(editor()) that can cause grid.expand to be called, though targeting the whole grid, instead of the cell. To prevent a crash, "if (target.mayHaveChildren){" should become "if (target && target.mayHaveChildren){" in tree.js (approx line 71).

The combination of editor(tree()) will not even render, because it is assumed that the grid, and thus the grid.store is accessible from this. Because it is run from within editor(), this.grid is not available.

Conceptually, we want the renderCell passed to editor to be the renderCell defined by tree, so that when editing is complete, the tree render is displayed, instead of the Grid default. With this in mind, is makes sense that editor(tree()) is the order use, however, the location of the grid, and the grid.store is problematic.

Seems that in the declarations of the classes adding "dgrid.Class" enables them to work with templated widgets in Dojo. Otherwise a missing class error is given by the dojo parser.

Example:

List.js

return declare(TouchScroll ? [TouchScroll] : [], {

return declare("dgrid.List", TouchScroll ? [TouchScroll] : [], {

I manged to style away the scrollbar in the grid, but I would like this to be an optional paramter you can use when creating the grid. e.g: "disableScrollBar: true".

On certain browsers, if the focused child domNode is removed, this function will throw 'child is not defined'. A try-catch that returns false on error should be added.

When specifying columns, if there are spaces used in the field names and two or more columns have a field with the same first word, all such columns will be put together into a single column.

For example, I was using fields based on 'svn info' results with the following columns: 'Last Changed Revision', 'Last Changed Author', etc. All columns with the first word 'Last' were given the same css field name and were placed in the same column.

I fixed this by removing spaces when creating the class names from the field names in 'createRowCells' in Grid.js.

I do not know if this will work for the general case.

var cssFieldName = column.field.replace(/ /g, '');
extraClassName = column.className || (cssFieldName && "field-" + cssFieldName);

I have been hesitating before writing this because I know that the problem may be in front of the screen, but I just can't figure it out so I'd like to know if anyone else experienced this.

I have a few dGrids in a web app. They behave great for the most part but I have this weird bug in IE8 where a gap occurs between the cells when I hover on rows. When I refresh a page, the grid looks good, but those gaps start show as I hover on each row.

I am using "className" a on each column to style them. The width of column is a mix between "auto" and fix length. I am using the a few plug-ins including selector. Here is a sample column set and the instantiation of grid showing this behavior.

Behavior observed: grid screenshot

Columns:

        _getFolderColumnDefinition : function()
        {
            var searchFolderColDef =
            {
                selected : selector(
                {
                    label : "",
                    type : "checkbox",
                    className : "gridSelectableColumn",
                    unhidable : true
                }),
                icon :
                {
                    label : " ",
                    formatter : lang.hitch(this, '_displayFolderIcon'),
                    sortable : false,
                    className : 'gridIconColumn',
                    unhidable : true
                },
                name :
                {
                    label : taxonomical.GroupungLabel,
                    field : '_item',
                    formatter : lang.hitch(this, '_formatLabelName'),
                    className : 'gridColumnDefault',
                    unhidable : true
                },
                dateCreated :
                {
                    label : taxonomical.DateCreated,
                    field : 'dateCreated',
                    className : 'gridDateColumn',
                    unhidable : true
                }
            };
            return searchFolderColDef;
        },

Instantiation:

                var CustomGrid = declare([Grid, Selection, Keyboard, ColumnHider, Pagination]);
                this._groupingLabelsGrid = new CustomGrid(
                {
                    store : store,
                    columns : columns,
                    pagingLinks : 5,
                    pagingTextBox : false,
                    firstLastArrows : true,
                    previousNextArrows : true,
                    selectionMode : "multiple",
                    pageSizeOptions : [5, 10, 15, 20, 25, 50],
                    rowsPerPage : 5,
                    allowSelectAll : true
                }, gridDiv);

A null error occurs when notification triggers removal of a row that is at the overlap of query results.

It would be convenient if Grid/List offered a public call that focuses on a particular cell (starting the editor if editOn is specified). At the moment we are using a hack to provide this functionality (inserting the code below at Keyboard.js:90), but it's far from ideal.

grid.focusOnCell = function(cell){
   focusOnCell(cell.element, {});
};

Whenever I create page in which a dgrid uses a JsonRest store and is in a hidden tab of a TabContainer (one that is not the initially selected one), I get DOMExceptions and a somewhat screwed up dgrid. In particular, the dgrid has a large empty space under the last row of data, and scrolling to the bottom or top of the dgrid's data throws additional DOMExceptions. The exceptions are generated by line 437 in List.js.

If I click on one of the column headers to sort the dgrid (once its tab is visible), it resets its layout and works fine. If the dgrid initializes on a visible tab instead of an unselected tab, it's fine. If I use a Memory store instead of a JsonRest, it's fine even if the dgrid is initialized in a hidden tab. If the dgrid is initialized in a hidden tab but without a store, and then the store is set (via setStore) once the dgrid is visible, it's fine.

My fix so far is just to add a listener to the TabContainer and set the dgrid's store once the dgrid's tab becomes visible, but this seems less than ideal.

Looking at the migration wiki and playing around with dgrid for a bit, it seems that text selection is disabled by design when there is a selection mode that lets you select rows in the grid. If possible, I'd like this changed so that text selection is a separate option like it was in the older grid. It's been my experience that the two serve different purposes. I've had users notice when this wasn't enabled in the past. No matter how good the rest of the grid is, they expect to be able to wrangle it like a normal html table, too.

Also, while the docs say that specifying none for the selectionMode enables 'normal' text selection, I couldn't get this to work in IE9 or Chrome.

Hello, I'm using a dGrid with a JsonRest Store and need some information about the autoSave functionality. At the moment i have a simple table with 4 columns, one of which has a checkbox. This checkbox field is the only autosave field. When i update the checkbox i see two network requests being sent of - the first is a GET the second is a POST. I presume that the first query tries to get the current values and the second posts the update back however this is not the case. Both the GET and the POST contain exactly the same data and so the data is always as defined in the database.

All the examples i've found using autoSave seem to use in Memory stores and as such don't make requests that i can compare against. As a result, please could you provide some documentation / support about using the autoSave functionality with a JsonRest Store? Thanks.

In working with a special use case with OnDemandGrid, I have to set a queryOptions object on my particular widget (basically have a complex pre-sort I need to do); however, OnDemandList.renderQuery doesn't look for any queryOptions that may have been set on a grid.

Probably can be solved quickly by looking for a grid's queryOptions and if present, clone and mixin with the other options needed for renderQuery. Currently overriding locally but this is an important one (at least for me)...

If text is larger than the cell in dgrid, instead of the cell either expanding to fit or having the text scrollable, the text flows out the right side of the cell and becomes inaccessible unless you cut and paste it into a different app.

I have created a rest based grid and do a remove on a selected row in the grid. The DELETE is executed on the store and the row is removed form the grid, but still the grid.selection is ponting to the removed row.

The code is very simple to reproduce:

        on(document.getElementById("delete"), "click", function(){
                    for(var id in grid.selection){
                        var x = prompt("Do you want to delete id: " + id+ "? Type OK in the prompt field to confirm");
                        if(x==="OK")
                            restStore.remove(id);
                    }
        });         

This works fine the first attempt, but the next attempt, without selecting any new row, it still tries to delete the same row as before and actually a new DELETE is sendt to the rest store.

I think the bug is that grid.selection should be empty after the first delete.

I have a pretty basic OnDemand grid that when I insert (via put) a new row into the store, it fails on this line in List.js.insertRow:
parent.insertBefore(row, beforeNode);

If I change the above line to:
if (parent) parent.insertBefore(row, beforeNode);

it seems to work fine.

Another possibly related issue: when I have 1 item in the store, the Grid shows 2 rows - same content.

I'm running from trunk from a few days ago.

It would be awesome if we could supply an option in the grid constructor to set the default depth of a tree to be expanded when trees are first rendered. The project I am working on has a few requirements that the trees be expanded by default and I have to currently traverse the tree and expand the nodes manually :(

The Dgris draws in the upper left of the screen and does not pay attention to the Dijit layout in this test case:

<!DOCTYPE html>
<html>
   <head>
      <title>Test dijit programmatic layout</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <style type="text/css">
         @import "dojo/resources/dojo.css";
         @import "dijit/themes/claro/document.css";
         @import "dijit/themes/claro/claro.css";
         @import "dgrid/css/dgrid.css";
         @import "dgrid/css/skins/claro.css";
         html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow:hidden;
         }
      </style>
      <script type="text/javascript">
         var dojoConfig = {
            async : true,
            parseOnLoad : true
         }
      </script>
      <script type="text/javascript" src="dojo/dojo.js"></script>
      <script type="text/javascript">
         require(["dojo/ready", "dojo/parser", "dojo/dom-construct", "test/TopBC"], function(ready, parser, domConstruct, BC){
            ready(function(){
               var pBC = new BC({}, "bc");
               pBC.startup();
            });
         });
      </script>
   </head>
   <body class="claro">
      <div id="bc"></div>
   </body>
</html>

test/BC:

define(
   [
      'dojo/_base/declare',
      'dijit/layout/BorderContainer',
      'dijit/layout/TabContainer',
      'dijit/layout/ContentPane',
      'test/Dgrid'
   ],
   function(declare, BC, TC, CP, Dgrid)
   {
      return declare([BC],
      {
         design:"sidebar",
         gutters:"true",
         liveSplitters:"true",
         style:"width: 100%; height: 100%;",
         constructor:function (args)
         {
            // Call Super
            dojo.safeMixin(this, args);
         },
         postCreate:function (args)
         {
            var pDgrid = new Dgrid({
               region:              "center",
               style:               "height:40%; width:50%",
               splitter:            "false"
            });
            this.addChild(pDgrid);

            var pTC = new TC({
               region:     "bottom",
               style:      "height:60%; width:100%",
               splitter:   "false"
            });
            this.addChild(pTC);

            pTC.addChild(new CP({title: 'Tab 1', content: 'page 1 content'}));
            pTC.addChild(new CP({title: 'Tab 2', content: 'page 2 content'}));

         }
      });
   }
);

test/Dgrid.js:

define(
   [
      'dojo/_base/declare',
      'dgrid/OnDemandGrid',
      'dojo/html',
      'dgrid/Selection'
   ],
   function(declare, GridBase, html, DgridSelection)
   {
      var pGrid = declare([GridBase, DgridSelection],
      {
         columns:
         {
            name: {
               field: 'Name',
               label: 'Name',
               renderCell: function(item, value, node, options)
               {
                  value = item.Name;
                  html.set(node, value);
                  return value;
               }
            },
            value: {
               field: '_Value',
               label: 'Simple Value',
            },
            namespaceName: {
               field: 'NamespaceName',
               label: 'Namespace Name',
            },
            type: {
               field: 'Type',
               label: 'Type',
            }
         },
         constructor:function (args)
         {
            // Call Super
            dojo.safeMixin(this, args);
         },
         postCreate:function (args)
         {
            this.inherited(arguments);

            this.renderArray([
               {Name: "test row 1", _Value: "under value", NamespaceName: "nsn", Type: "test row"},
               {Name: "test row 2", _Value: "under value", NamespaceName: "nsn", Type: "test row"},
               {Name: "test row 3", _Value: "under value", NamespaceName: "nsn", Type: "test row"},
               {Name: "test row 4", _Value: "under value", NamespaceName: "nsn", Type: "test row"},
               {Name: "test row 5", _Value: "under value", NamespaceName: "nsn", Type: "test row"},
               {Name: "test row 6", _Value: "under value", NamespaceName: "nsn", Type: "test row"},
               {Name: "test row 7", _Value: "under value", NamespaceName: "nsn", Type: "test row"}
            ]);

            this.on("dgrid-select", dojo.hitch(this, function(event){
               // get the rows that were just selected
               var rows = event.rows;
               for(var row in rows)
               {
                  console.log(rows[row].data);
               }

            }));

            this.on(".dgrid-row:contextmenu", dojo.hitch(this, function(evt){
               evt.preventDefault(); // prevent default browser context menu 
               // create or popup a menu here 
               console.log(this.row(evt).data);
            })); 

         }
      });
      return pGrid;
   }
);

Please let me know if there is a better way to submit test cases.

Suppose that you have a treegrid like this:

item0
    + item1 (expanded first)
        - item3
        - item4
    + item2 (expanded after item1)
        - item5
        - item6

When you try to move item5 to item1 (make it a child of item1), item5 is removed from where it is now as you expect but isn't rendered under item1. On the other hand, you can move children of item1 to item2 without any problems.

I spent some time trying to figure out what caused this and found out that it had to do with the duplicate ID check in insertRow method of List.js:

insertRow: function(object, parent, beforeNode, i, options){
    ...
    var row = byId(id);
    if(!row){
        row = this.renderRow(object, options);
        ...
    }
    ...
},

It's important to note that when you try to move a row to a different parent, two observers are called: the one listening for changes in rows to which the row you try to move belongs now and the one listening for changes in rows to which that row is going. And which one is called first depends on the order in which the corresponding parent rows are expanded.

So, for example, when you try to move item3 to item2, the observer created by item1 is notified first that item3 has been removed (and the corresponding row is removed from DOM) and then the observer created by item2 is notified that item3 has been added (and the corresponding row is created successfully because there's no element with ID associated with item3 now). When you try to move item5 to item1, the observer created by item1 is notified first that item5 has been added (but the corresponding row is NOT created because there is still an element with ID associated with item5) and then the observer created by item2 is notified that item5 has been removed (and the correspoding row is removed from DOM). That's the root of the problem (checking for duplicate IDs in itself is a good thing though).

Removing the duplicate ID check seems to solve the problem (you can see it in action here) but that's more of a workaround than a solution...

Selecting seems to me like it should only be a right mouse button thing, not either/or right and left.

Relevant code in original dojo/store/JsonRest.js looks like this:

    var results = xhr("GET", {
        url: this.target + (query || ""),
        handleAs: "json",
        headers: headers
    });
    results.total = results.then(function(){
        var range = results.ioArgs.xhr.getResponseHeader("Content-Range");
        return range && (range=range.match(/\/(.*)/)) && +range[1];
    });
    return QueryResults(results);

I tried all sorts of variations of this:

    var results = xhr("GET", {
        url: this.target + (query || ""),
        handleAs: "json",
        headers: headers
    });

    results = results.then(function(response){
        var r = response.rows;
        r.total = response.total_rows;
        return r;
    });
    return QueryResults(results);

In the origial, results are returned as is and in my case it is results.rows that need to be returned.

Now, as soon as I do that, results.total either does not end up being returned as "promised" or as I suspect dgrid is not using the promised value and is instead using either the results.length or worse the default value of 25.

While I am personally new to JS and much of web dev, half a dozen folks on #dojo have tried to help. Out of numerous tests that exist and as I was told work ;) I am still not able to identify any that work with async (xhr like) store.

I need to get this to work in original JsonRest.js + above changes - to see paging work with async stores. Then I need to replace xhr with io.script , for a stripped down JSONP version. But in all those cases results.child.array needs to be returned to dgrid, as well as an indication of how many records are available to the query, so that dgrid will know to call store.query for more data (I hope).

Currently, when using an async store, the tree appears unresponsive when fetching the children on expansion.

A busy indicator similar to the one the dojox lazy tree would indicate to the user that something is in progress.

It would help immensely if the grid would accept renderCell functions that return deferreds. Then we could maybe have async rendering of components in the grid.

this code in Grid.js

}else if(column.renderCell){
// A column can provide a renderCell method to do its own DOM manipulation,
// event handling, etc.
appendIfNode(td, column.renderCell(object, data, td, options));

could maybe be something like:

}else if(column.renderCell){
cell = column.renderCell(object, data, td, options);
if(cell.then)
cell.then(function(node) { appendIfNode(td, node); });
else
// A column can provide a renderCell method to do its own DOM manipulation,
// event handling, etc.
appendIfNode(td, cell);

And of course the same in the other places where renderCell or renderHeadercell is used.

//J

When using click and dgrid-cellfocusin to activate cell Editor, Editor is not activated when clicking on a cells child element, only when clicking on the cell directly (I guess because focus is not set). When using click alone activation works fine.

...just updated to the latest master of dgrid, and started implementing the ColumnResizer and ColumnHider extensions. What I've noticed is that if you resize a column before hiding/unhiding a column, hiding no longer works. I'm fairly certain that this is probably happening because styleColumn is not run at all when initialized, but only when someone hides/unhides a column.

It does seem that if you hide/unhide a column first, the combination of extensions works as expected.

If I'm able to solve this problem, I'll try to issue a pull request (although it won't be as easy as usual, as the use case that I have is to CPM install it and then commit it to an SVN repo).

Cheers--
Tom