PDA

View Full Version : Listening to SelectEditor



hady
29 Nov 2006, 2:48 AM
Like many who have implemented the EditableGrid in their projects, I have several SelectEditor and TextEditor objects. I am trying to 'listen' to these Editors so that I can fire back an Ajax update to my server to update accordingly based on what has been selected.

How do you do that if at all?

I have looked up the documentation and found no clue, and no one on the forums seems to have asked this obvious question? I must be missing something.

Animal
29 Nov 2006, 2:56 AM
Personally, I'd subscribe to the cellupdated event of the DataModel, and go from there:

http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.grid.AbstractDataModel.html#event-cellupdated

But as to how you send the data back to the server... It's up to you! The yui-ext stuff can't know how your server works!

The tools are all there in the standard YUI classes. You'll have to use the Connection.asyncRequest method.

Or, you could use DWR if your backend is Java. That's what I use to send stuff to the server and pull data back into the UI.

hady
29 Nov 2006, 3:02 AM
Brilliant Animal. Didn't think about listening to the datamodel and instead was focusing on the actual editor!

Anyway here is the snippet of code for what I wanted to do for any enthusiasts:


// Line of code inside Editor object
dataModel.addListener('cellUpdated', cellUpdatedHandler);

// External method: Grid cell has been updated
function cellUpdatedHandler(dataModel, rowIndex, colIndex, e){
alert('Cell at row ' + rowIndex + ', column ' + colIndex + ' was clicked! New value=' + dataModel.getValueAt(rowIndex,colIndex));
}

I will be using my own XAJAX code to talk back to my server... so I have all what I need sorted.

Animal
29 Nov 2006, 3:18 AM
That should be "cellupdated". There's a convention so far that event name strings are all lowercase.

hady
29 Nov 2006, 3:27 AM
Fair enough, lowercase it is.

I have another question!

The cellupdated event gives me access to: dataModel, rowIndex and colIndex.

I have everything there that I need except the column name! When I go back to my server, I would like to tell it my rowId (which i can fetch from the dataModel object), the new value (again, from the dataModel object), and I need to know the column name.

I can solve this problem by using the column Index, but I'd rather not go with such a solution.

How can I get hold of my column object?

How do other people go around this issue.... colIndex only?

Animal
29 Nov 2006, 3:43 AM
Any data that you have at event subscribing time can be bound to the handler using createDelegate (If you need to specify a particular context for the function), or createCallback.

See docs: http://www.yui-ext.com/deploy/yui-ext/docs/output/Function.html

hady
29 Nov 2006, 4:10 AM
After much research and trial and error... I figured out how to get delegates to work for my example. Here is the code for anyone interested:


// Line of code inside Editor object
dataModel.addListener('cellupdated', cellUpdatedHandler.createDelegate(this, colModel, 0) );

// Grid cell has been updated
function cellUpdatedHandler(colModel, dataModel, rowIndex, colIndex){
alert(colModel.getColumnHeader(colIndex));
}

Now with that done, it seems i have hit a problem that I haven't anticipated. colModel.getColumnHeader() returns the 'textual name' of the column of course. It seems what I really was after is the "variable name that i previously defined in my schema object" which represents that column.

So for example:


var schema = {
tagName: 'event',
id: 'poid_id0',
fields: ['description', 'assigned', 'status', 'from', 'type']
};

// Create datamodel based on schema object
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

If my colIndex is 2, I would like to extract 'status' and vice versa. Is there anyway in the API that i can extract these names? Or do I need to stick with the getColumnHeader as my only alternative?

Animal
29 Nov 2006, 5:37 AM
You can access the schema in your listener. Look at the code it's stored in the "schema" property.