Geek Answers Handbook

Dgrid focuses on the cell

I use dgrid to display data in grid format, it has four columns. all edited

I used the following method 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 that when I edit the first column, after editing it should set the focus to the second column and show the cursor in this cell so that I can start editing the second; same for the third column.

I am very new to dojo and dgrid. I found some APIs on sitepen but could not solve my problem.

Please help me with this.

+4
source share
2 answers

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

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

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

This is far from over, but at least it can provide a possible reference. Double-click to edit and press TAB while editing to go to the next 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); } }) } }); });
+5
source

Here is another option. Also included is a workaround for text selection errors in the old version of dgrid.

 postCreate: function() { var that = this; this.inherited(arguments); // FIXME Workaround bug in dgrid that causes the grid to lose // focus after each save. this.on('dgrid-datachange', function(evt) { that._selectedCell = that.cell(evt); }); aspect.after(this, 'save', function(dfd) { dfd.then(function() { var nextCell = that.right(that.cell(that._selectedCell.row.id, that._selectedCell.column.id)); that.edit(nextCell); // FIXME Workaround dgrid bug that blocks field text to be selected on focus. nextCell.element.widget && nextCell.element.widget.textbox && nextCell.element.widget.textbox.select(); }); }); }
0
source

More articles:


All Articles