Question

I am using dgrid for displaying data in grid format , it has four columns. all are editable

I have used following way to declare it.

<table id="grid" data-dojo-type="dgrid.CustomGrid" data-dojo-props="store: memoryStore">
<thead>
    <tr>
        <th data-dgrid-column="dgrid.editor({ field: 'id' }, dijit.form.TextBox, 'click')">ID</th>
        <th data-dgrid-column="dgrid.editor({ field: 'name' }, dijit.form.TextBox, 'click')">Name</th>
        <th data-dgrid-column="dgrid.editor({ field: 'description' }, dijit.form.TextBox, 'click')">Description</th>
    </tr>
</thead>
</table>

My Problem is , when I will edit first column , after editing it should set focus on second column and show cursor in that cell so I can start editing second one ; same is for third column.

I am very much new to dojo and dgrid. I found some APIs on sitepen but couldn’t solve my problem

Please help me on this

Answer 1

There is dgrid/Grid::edit(cell) method to start with.

I used dojo/aspect::after to add an event listener to an editor widget (e.g. dijit/form/TextBox), if it does not exist, to listen keypress event for a specific key, in my case TAB, and then call grid.edit(cell) with the cell that should be edited next.

See a working example at jsFiddle: http://jsfiddle.net/phusick/2jU7R/

It is far from finished, but at least it can provide a possible directon. Use double click to edit and press TAB when editing to jump to the following cell.

aspect.after(grid, "edit", function(promise, cellNode) {

    if(promise === null) return;

    promise.then(function(widget) {
        if (!widget._editorKeypressHandle) {
            widget._editorKeypressHandle = widget.on("keypress", function(e) {

                for (var rowId in grid.selection) { break;}            
                for (var columnId in grid.selection[rowId]) { break;}

                if(e.charOrCode == keys.TAB) {
                    e.preventDefault();
                    var cellEdited = grid.cell(rowId, columnId);
                    var cellToEdit = grid.right(cellEdited, 1);

                    if(cellEdited.row.id == cellToEdit.row.id
                       && cellEdited.column.id == cellToEdit.column.id
                      ) {
                          // go to next line
                          for(var firstColumnId in grid.columns) { break;}
                          var nextRow = grid.down(cellEdited.row, 1);
                          cellToEdit = grid.cell(nextRow, firstColumnId);
                    };

                    grid.deselect(cellEdited);
                    grid.select(cellToEdit);
                    grid.edit(cellToEdit);
                }
            })
        }
    });
});