PDA

View Full Version : Editor and Selector GRID



ganesh
31 Oct 2006, 9:04 AM
Is it possible to have both selection and editor in the same grid. Currently I'm using the EditorAndSelectionModel. But the grid navigation (with tab) is not moving the cursor to the next editable cell as it does with the EditorGrid. Any suggestions.

jack.slocum
31 Oct 2006, 2:39 PM
It's not built in. If you looks at the EditorSelectionModel you can probably add the tab/shift+tab code to to a custom EditorAndSelectionModel.

ericwaldheim
1 Nov 2006, 12:09 PM
Here's a solution (with one catch)




YAHOO.ext.grid.NavEditorSelectionModel = function(){
YAHOO.ext.grid.NavEditorSelectionModel.superclass.constructor.call(this);
};
YAHOO.extendX(YAHOO.ext.grid.NavEditorSelectionModel, YAHOO.ext.grid.EditorSelectionModel);

YAHOO.ext.grid.NavEditorSelectionModel.prototype.initEvents = function(){
YAHOO.ext.grid.EditorSelectionModel.prototype.initEvents.call(this);
this.grid.removeListener("keydown", this.keyDown, this, true);
YAHOO.ext.grid.DefaultSelectionModel.prototype.initEvents.call(this);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.keyDown = function(e){
var m = YAHOO.ext.grid.NavEditorSelectionModel;
var superclass = this.grid.editingCell
? YAHOO.ext.grid.EditorSelectionModel.prototype
: YAHOO.ext.grid.DefaultSelectionModel.prototype;
superclass.keyDown.call(this, e);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.focusRow = function(row){
YAHOO.ext.grid.DefaultSelectionModel.prototype.focusRow.call(this, row);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.setRowState = function(row, selected, keepExisting){
YAHOO.ext.grid.DefaultSelectionModel.prototype.setRowState.call(this, row, selected, keepExisting);
};



The catch is, our keyDown function needs to know if there is an active editing cell and I do not know how to figure that out because the grid does not reset activeEditor or editingCell during stopEditing.

So I had to make this change:




YAHOO.ext.grid.Grid.prototype.stopEditing = function(){
if(this.activeEditor){
this.activeEditor.stopEditing();
this.activeEditor = null;
this.editingCell = null;
}
};



Is there another way to go about asking a grid if it has an active editor?
If not, what are your thoughts on adding this mod to the Grid class?
Thanks,
Eric

jack.slocum
1 Nov 2006, 10:19 PM
The real problem is in the editor classes. When editing is stopped without modifying the cells value, they don't notify the grid that they have stopped editing. Because of this, there's no reliable way to determine if a cell is being edited other than looping through all the editors and checking the "editing" property. I plan to fix this limitation soon when I get back on the forms library. All of the editors are going to be completely redone (internally) to extend classes from the forms code (the form controls will start with the grid editors stripped of grid dependency).

ericwaldheim
4 Nov 2006, 8:54 PM
Thanks Jack.

Until then:


YAHOO.ext.grid.NavEditorSelectionModel = function(){
YAHOO.ext.grid.NavEditorSelectionModel.superclass.constructor.call(this);
};
YAHOO.extendX(YAHOO.ext.grid.NavEditorSelectionModel, YAHOO.ext.grid.EditorSelectionModel);

YAHOO.ext.grid.NavEditorSelectionModel.prototype.initEvents = function(){
YAHOO.ext.grid.EditorSelectionModel.prototype.initEvents.call(this);
this.grid.removeListener("keydown", this.keyDown, this, true);
YAHOO.ext.grid.DefaultSelectionModel.prototype.initEvents.call(this);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.keyDown = function(e){
var m = YAHOO.ext.grid.NavEditorSelectionModel;
var superclass = this.gridHasActiveEditor()
? YAHOO.ext.grid.EditorSelectionModel.prototype
: YAHOO.ext.grid.DefaultSelectionModel.prototype;
superclass.keyDown.call(this, e);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.gridHasActiveEditor = function(){
// hack
var colConfigs = this.grid.getColumnModel().config;
var editing = false;
for (var i = 0; i < colConfigs.length && !editing; ++i)
{
var c = colConfigs[i];
editing = c.editor && c.editor.editing;
}
return editing;
}

YAHOO.ext.grid.NavEditorSelectionModel.prototype.focusRow
= YAHOO.ext.grid.DefaultSelectionModel.prototype.focusRow;

YAHOO.ext.grid.NavEditorSelectionModel.prototype.setRowState
= YAHOO.ext.grid.DefaultSelectionModel.prototype.setRowState;

jack.slocum
4 Nov 2006, 9:07 PM
Nice. I especially like the superclass selection. That is one of the reasons I have fallen in love with JS, what other language can you do that in? :D

ojintoad
7 Nov 2006, 12:43 PM
Thanks for this code Eric, and just for informations sake, if you do a find replace on his code of Default with Single, the code works as expected and implements both Editor and Single Selection model.

genius551v
8 Nov 2006, 7:59 PM
Hi,

Can you explain how do the implementation...? for dummys plz...! :oops:

Tnks

ojintoad
9 Nov 2006, 12:39 PM
So developing this code further my friend and I discovered that when you are editing, you may want the single selection to follow your editor selection when you move up and down rows using the keyboard. This version of the code uses the single selection model.



YAHOO.ext.grid.NavEditorSelectionModel = function(){
YAHOO.ext.grid.NavEditorSelectionModel.superclass.constructor.call(this);
};

YAHOO.extendX(YAHOO.ext.grid.NavEditorSelectionModel, YAHOO.ext.grid.EditorSelectionModel);

YAHOO.ext.grid.NavEditorSelectionModel.prototype.initEvents = function(){
YAHOO.ext.grid.EditorSelectionModel.prototype.initEvents.call(this);
this.grid.removeListener("keydown", this.keyDown, this, true);
YAHOO.ext.grid.SingleSelectionModel.prototype.initEvents.call(this);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.keyDown = function(e){
var m = YAHOO.ext.grid.NavEditorSelectionModel;
var superclass = null;
if(this.gridHasActiveEditor())
{
YAHOO.ext.grid.EditorSelectionModel.prototype.keyDown.call(this, e);
}
YAHOO.ext.grid.SingleSelectionModel.prototype.keyDown.call(this, e);
};

YAHOO.ext.grid.NavEditorSelectionModel.prototype.gridHasActiveEditor = function(){
// hack
var colConfigs = this.grid.getColumnModel().config;
var editing = false;
for (var i = 0; i < colConfigs.length && !editing; ++i)
{
var c = colConfigs[i];
editing = c.editor && c.editor.editing;
}
return editing;
}

YAHOO.ext.grid.NavEditorSelectionModel.prototype.focusRow = YAHOO.ext.grid.SingleSelectionModel.prototype.focusRow;

YAHOO.ext.grid.NavEditorSelectionModel.prototype.setRowState = YAHOO.ext.grid.SingleSelectionModel.prototype.setRowState;

Is there a reason you would ever want just one keyDown call to execute that I'm not picking up on? Hopefully not. We also noticed that if you press key down on a large set, the EditorSelection Selection seems to move faster than the SingleSelection Selection.

ericwaldheim
9 Nov 2006, 12:48 PM
No reason. Thanks for posting.