View Full Version : Custom editor in the grid.

27 Nov 2006, 1:58 PM
Can anyone point me at an example of how to create a custom cell editor for within the grid? I'm wanting to implement a custom editor that actually puts a text box and a drop down list within the cell being edited. Any help/example would be appreciated.

27 Nov 2006, 2:14 PM
Of course you would have read this http://www.yui-ext.com/deploy/yui-ext/docs/#output/YAHOO.ext.UpdateManager.html and the blog post it refers to.

You want a combobox editor. Nice... sounds like a yui-ext core feature! I'm sure a donation to Jack would get him on board with this (remember this site is his job). Alternatively, if you code one up yourself then it would be great to see. :)

27 Nov 2006, 2:14 PM
There are a couple blog posts on this (altho a couple seem to be in limbo temporarily). Also in the Extras/Examples forum there a links to several samples that do this.

27 Nov 2006, 2:26 PM
Thanks for the hints. I'm not actually trying to make a editable combobox, I'm trying to put two distinct controls within the edit cell side by side. Basically each cell contains two pieces of information that can be edited, one for the numeric value(text box), one for the unit (dropdown) (10 lbs vs, 10 oz). I'll take a look in the Extras/Examples and see if I can find a working example of creating the custom editor.


27 Nov 2006, 2:37 PM
All the editors are 'custom editors'. Create an object that subclasses CellEditor, and follow the pattern used in some of the provded editors to modify the HTML that's rendered into the grid.

27 Nov 2006, 3:45 PM
The DateEditor and checkbox editor both "wrap" an editor in a div, this is what you will probably need to do for your editor. Also, the "Adding built in editing support" (try the new search feature on the blog :) ) post towards the end describes the editor interface functions and what they do.

27 Nov 2006, 7:37 PM
That was pretty easy, I just took the DateEditor code and copied for the control I wanted to create and changed the class name. One question around control resizing though, I seem to be missing something obvious, how do you handle the resizing of dropdowns in the editors? I first looked at the dateeditor but discovered it really wasn't a dropdown, so then I moved onto the selecteditor. It appears to be doing the resizing via the element.setBox method as seen below:

YAHOO.ext.grid.SelectEditor.prototype.fitToCell = function(box){
box.height -= 3;
this.element.setBox(box, true);

I tried implementing something similiar within the startEditing method but I'm coming up a little short, the height is just a touch too tall and the width too small. Am I missing something here? Is there a class for the dropdown other than ygrid-editor that I should be using?

28 Nov 2006, 5:18 AM
The standard one uses:

padding: 0px;
-moz-outline: none;
border: 1px solid #afbdc9;

This helps to normalize what the browser reports for padding/borders (which is generally wrong). Even with this Gecko still requires some tweaking.