*** BREAKING CHANGES ***

Cell editor interface has been changed!

Cell editors can now be attached to document body (or any other element) and not just the cell container.  This lets us create editor controls that get outside of the grid boundary.  The grid provides ways of updating editor position and visibility as the grid and any other scroll parents and scrolled.  If the editor implements .position(box), .show() and hide(), those methods will be called whenever the position or visibility of the cell changes.  The box parameter has top, left, right, bottom, width, height and visible properties.  The position is calculated at a document body level taking into consideration all scroll and offset parents.  Note that since the detached editors are no longer children of the edited cell, keyboard events will not bubble up, so make sure you handle things like Esc, Enter, Tab, etc. using the provided callbacks or grid methods.

Cell editors now recieve just one "args" param:
{
  grid: a reference to SlickGrid instance,
  gridPosition: a box with grid position and dimensions,
  position: a box with edited cell position and dimensions,
  container: edited cell,
  column: column definition,
  value: current cell value,
  item: data context,
  commitChanges: a callback to commit changes,
  cancelChanges: a callback to cancel changes
}

Take a look at the new LongTextCellEditor for a sample implementation.

Other changes:
- ADDED: new methods - navigatePrev(), navigateNext(), navigateLeft(), navigateRight(), navigateUp(), navigateDown()
- FIXED: pressing Enter on a cell in read mode in autoEdit grid loads the editor for the next row
- FIXED: removeRows() and removeAllRows() now call fire onBeforeEditorDestroy event when removing a row with an active editor
- ADDED: LongTextCellEditor and autoEdit options to example #3
- FIXED: JS error on adding new rows in example #4

1 files changed, 547 insertions, 502 deletions

diff --git a/slick.editors.js b/slick.editors.js
index 4adbb9d..b954fb4 100644
--- a/slick.editors.js
+++ b/slick.editors.js
@@ -1,649 +1,694 @@
+/* THESE FORMATTERS & EDITORS ARE JUST SAMPLES! */
+
 (function($) {
 
-var SlickEditor =  {
+    var SlickEditor = {
 
-    SelectorCellFormatter : function(row, cell, value, columnDef, dataContext) {
-        return (!dataContext ? "" : row);
-    },
+        SelectorCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            return (!dataContext ? "" : row);
+        },
 
-    PercentCompleteCellFormatter : function(row, cell, value, columnDef, dataContext) {
-        if (value == null || value === "")
-            return "-";
-        else if (value < 50)
-            return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
-        else
-            return "<span style='color:green'>" + value + "%</span>";
-    },
+        PercentCompleteCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            if (value == null || value === "")
+                return "-";
+            else if (value < 50)
+                return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
+            else
+                return "<span style='color:green'>" + value + "%</span>";
+        },
 
-    GraphicalPercentCompleteCellFormatter : function(row, cell, value, columnDef, dataContext) {
-        if (value == null || value === "")
-            return "";
+        GraphicalPercentCompleteCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            if (value == null || value === "")
+                return "";
 
-        var color;
+            var color;
 
-        if (value < 30)
-            color = "red";
-        else if (value < 70)
-            color = "silver";
-        else
-            color = "green";
+            if (value < 30)
+                color = "red";
+            else if (value < 70)
+                color = "silver";
+            else
+                color = "green";
 
-        return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
-    },
+            return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
+        },
 
-    YesNoCellFormatter : function(row, cell, value, columnDef, dataContext) {
-        return value ? "Yes" : "No";
-    },
+        YesNoCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            return value ? "Yes" : "No";
+        },
 
-    BoolCellFormatter : function(row, cell, value, columnDef, dataContext) {
-        return value ? "<img src='../images/tick.png'>" : "";
-    },
+        BoolCellFormatter : function(row, cell, value, columnDef, dataContext) {
+            return value ? "<img src='../images/tick.png'>" : "";
+        },
 
-    TaskNameFormatter : function(row, cell, value, columnDef, dataContext) {
-        // todo:  html encode
-        var spacer = "<span style='display:inline-block;height:1px;width:" + (2 + 15 * dataContext["indent"]) + "px'></span>";
-        return spacer + " <img src='../images/expand.gif'>&nbsp;" + value;
-    },
+        TaskNameFormatter : function(row, cell, value, columnDef, dataContext) {
+            // todo:  html encode
+            var spacer = "<span style='display:inline-block;height:1px;width:" + (2 + 15 * dataContext["indent"]) + "px'></span>";
+            return spacer + " <img src='../images/expand.gif'>&nbsp;" + value;
+        },
 
-    ResourcesFormatter : function(row, cell, value, columnDef, dataContext) {
-        var resources = dataContext["resources"];
+        ResourcesFormatter : function(row, cell, value, columnDef, dataContext) {
+            var resources = dataContext["resources"];
 
-        if (!resources || resources.length == 0)
-            return "";
+            if (!resources || resources.length == 0)
+                return "";
 
-        if (columnDef.width < 50)
-            return (resources.length > 1 ? "<center><img src='../images/user_identity_plus.gif' " : "<center><img src='../images/user_identity.gif' ") +
-                    " title='" + resources.join(", ") + "'></center>";
-        else
-            return resources.join(", ");
-    },
+            if (columnDef.width < 50)
+                return (resources.length > 1 ? "<center><img src='../images/user_identity_plus.gif' " : "<center><img src='../images/user_identity.gif' ") +
+                        " title='" + resources.join(", ") + "'></center>";
+            else
+                return resources.join(", ");
+        },
 
-    StarFormatter : function(row, cell, value, columnDef, dataContext) {
-        return (value) ? "<img src='../images/bullet_star.png' align='absmiddle'>" : "";
-    },
+        StarFormatter : function(row, cell, value, columnDef, dataContext) {
+            return (value) ? "<img src='../images/bullet_star.png' align='absmiddle'>" : "";
+        },
 
 
-    TextCellEditor : function($container, columnDef, value, dataContext) {
-        var $input;
-        var defaultValue = value;
-        var scope = this;
+        TextCellEditor : function(args) {
+            var $input;
+            var defaultValue = args.value;
+            var scope = this;
 
-        this.init = function() {
-            $input = $("<INPUT type=text class='editor-text' />");
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />");
 
-            if (value != null)
-            {
-                $input[0].defaultValue = value;
-                $input.val(defaultValue);
-            }
+                if (args.value != null) {
+                    $input[0].defaultValue = args.value;
+                    $input.val(defaultValue);
+                }
 
-            $input.appendTo($container);
+                $input.appendTo(args.container);
 
-            $input.bind("keydown.nav", function(e) {
-                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
-                    e.stopImmediatePropagation();
-                }
-            });
-            
-            $input.focus().select();
-        };
-
-        this.destroy = function() {
-            $input.remove();
-        };
-
-        this.focus = function() {
-            $input.focus();
-        };
-
-        this.setValue = function(value) {
-            $input.val(value);
-            defaultValue = value;
-        };
-
-        this.getValue = function() {
-            return $input.val();
-        };
-
-        this.isValueChanged = function() {
-            return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
-        };
-
-        this.validate = function() {
-            if (columnDef.validator)
-            {
-                var validationResults = columnDef.validator(scope.getValue());
-                if (!validationResults.valid)
-                    return validationResults;
-            }
+                $input.bind("keydown.nav", function(e) {
+                    if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+                        e.stopImmediatePropagation();
+                    }
+                });
 
-            return {
-                valid: true,
-                msg: null
+                $input.focus().select();
             };
-        };
 
-        this.init();
-    },
+            this.destroy = function() {
+                $input.remove();
+            };
 
-    IntegerCellEditor : function($container, columnDef, value, dataContext) {
-        var $input;
-        var defaultValue = value;
-        var scope = this;
+            this.focus = function() {
+                $input.focus();
+            };
 
-        this.init = function() {
-            $input = $("<INPUT type=text class='editor-text' />");
+            this.setValue = function(value) {
+                $input.val(value);
+                defaultValue = value;
+            };
 
-            if (value != null)
-            {
-                $input[0].defaultValue = value;
-                $input.val(defaultValue);
-            }
+            this.getValue = function() {
+                return $input.val();
+            };
 
-            $input.bind("keydown.nav", function(e) {
-                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
-                    e.stopImmediatePropagation();
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                if (args.column.validator) {
+                    var validationResults = args.column.validator(scope.getValue());
+                    if (!validationResults.valid)
+                        return validationResults;
                 }
-            });
 
-            $input.appendTo($container);
-            $input.focus().select();
-        };
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
 
+            this.init();
+        },
 
-        this.destroy = function() {
-            $input.remove();
-        };
+        IntegerCellEditor : function(args) {
+            var $input;
+            var defaultValue = args.value;
+            var scope = this;
 
-        this.focus = function() {
-            $input.focus();
-        };
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />");
 
-        this.setValue = function(value) {
-            $input.val(value);
-            defaultValue = value;
-        };
+                if (args.value != null) {
+                    $input[0].defaultValue = args.value;
+                    $input.val(defaultValue);
+                }
 
-        this.getValue = function() {
-            var val = $.trim($input.val());
-            return (val == "") ? 0 : parseInt($input.val(), 10);
-        };
+                $input.bind("keydown.nav", function(e) {
+                    if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+                        e.stopImmediatePropagation();
+                    }
+                });
 
-        this.isValueChanged = function() {
-            return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
-        };
+                $input.appendTo(args.container);
+                $input.focus().select();
+            };
 
-        this.validate = function() {
-            if (isNaN($input.val()))
-                return {
-                    valid: false,
-                    msg: "Please enter a valid integer"
-                };
+            this.destroy = function() {
+                $input.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
 
-            return {
-                valid: true,
-                msg: null
+            this.setValue = function(value) {
+                $input.val(value);
+                defaultValue = value;
             };
-        };
 
-        this.init();
-    },
+            this.getValue = function() {
+                var val = $.trim($input.val());
+                return (val == "") ? 0 : parseInt($input.val(), 10);
+            };
 
-    DateCellEditor : function($container, columnDef, value, dataContext) {
-        var $input;
-        var defaultValue = value;
-        var scope = this;
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
 
-        this.init = function() {
-            $input = $("<INPUT type=text class='editor-text' />");
+            this.validate = function() {
+                if (isNaN($input.val()))
+                    return {
+                        valid: false,
+                        msg: "Please enter a valid integer"
+                    };
 
-            if (value != null)
-            {
-                $input[0].defaultValue = value;
-                $input.val(defaultValue);
-            }
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
 
-            $input.appendTo($container);
-            $input.focus().select();
-            $input.datepicker({
-                showOn: "button",
-                buttonImageOnly: true,
-                buttonImage: "../images/calendar.gif"
-            });
-            $input.width($input.width() - 18);
-        };
+            this.init();
+        },
 
+        DateCellEditor : function(args) {
+            var $input;
+            var defaultValue = args.value;
+            var scope = this;
+            var calendarOpen = false;
 
-        this.destroy = function() {
-            $input.datepicker("hide");
-            $input.datepicker("destroy");
-            $input.remove();
-        };
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />");
 
+                if (args.value != null) {
+                    $input[0].defaultValue = args.value;
+                    $input.val(defaultValue);
+                }
 
-        this.focus = function() {
-            $input.focus();
-        };
+                $input.appendTo(args.container);
+                $input.focus().select();
+                $input.datepicker({
+                    showOn: "button",
+                    buttonImageOnly: true,
+                    buttonImage: "../images/calendar.gif",
+                    beforeShow: function() { calendarOpen = true },
+                    onClose: function() { calendarOpen = false }
+                });
+                $input.width($input.width() - 18);
+            };
 
-        this.setValue = function(value) {
-            $input.val(value);
-            defaultValue = value;
-        };
+            this.destroy = function() {
+                $.datepicker.dpDiv.stop(true,true);
+                $input.datepicker("hide");
+                $input.datepicker("destroy");
+                $input.remove();
+            };
 
-        this.getValue = function() {
-            return $input.val();
-        };
+            this.show = function() {
+                if (calendarOpen) {
+                    $.datepicker.dpDiv.stop(true,true).show();
+                }
+            };
 
-        this.isValueChanged = function() {
-            return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
-        };
+            this.hide = function() {
+                if (calendarOpen) {
+                    $.datepicker.dpDiv.stop(true,true).hide();
+                }
+            };
 
-        this.validate = function() {
-            return {
-                valid: true,
-                msg: null
+            this.position = function(position) {
+                if (!calendarOpen) return;
+                $.datepicker.dpDiv
+                    .css("top", position.top + 30)
+                    .css("left", position.left);
             };
-        };
 
-        this.init();
-    },
+            this.focus = function() {
+                $input.focus();
+            };
 
-    YesNoSelectCellEditor : function($container, columnDef, value, dataContext) {
-        var $select;
-        var defaultValue = value;
-        var scope = this;
+            this.setValue = function(value) {
+                $input.val(value);
+                defaultValue = value;
+            };
 
-        this.init = function() {
-            $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");
+            this.getValue = function() {
+                return $input.val();
+            };
 
-            if (defaultValue)
-                $select.val('yes');
-            else
-                $select.val('no');
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
 
-            $select.appendTo($container);
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
 
-            $select.focus();
-        };
+            this.init();
+        },
 
+        YesNoSelectCellEditor : function(args) {
+            var $select;
+            var defaultValue = args.value;
+            var scope = this;
 
-        this.destroy = function() {
-            $select.remove();
-        };
+            this.init = function() {
+                $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");
 
+                if (defaultValue)
+                    $select.val('yes');
+                else
+                    $select.val('no');
 
-        this.focus = function() {
-            $select.focus();
-        };
+                $select.appendTo(args.container);
 
-        this.setValue = function(value) {
-            $select.val(value);
-            defaultValue = value;
-        };
+                $select.focus();
+            };
 
-        this.getValue = function() {
-            return ($select.val() == 'yes');
-        };
+            this.destroy = function() {
+                $select.remove();
+            };
 
-        this.isValueChanged = function() {
-            return ($select.val() != defaultValue);
-        };
+            this.focus = function() {
+                $select.focus();
+            };
 
-        this.validate = function() {
-            return {
-                valid: true,
-                msg: null
+            this.setValue = function(value) {
+                $select.val(value);
+                defaultValue = value;
             };
-        };
 
-        this.init();
-    },
+            this.getValue = function() {
+                return ($select.val() == 'yes');
+            };
 
-    YesNoCheckboxCellEditor : function($container, columnDef, value, dataContext) {
-        var $select;
-        var defaultValue = value;
-        var scope = this;
+            this.isValueChanged = function() {
+                return ($select.val() != defaultValue);
+            };
 
-        this.init = function() {
-            $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus>");
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
 
-            if (defaultValue)
-                $select.attr("checked", "checked");
+            this.init();
+        },
 
-            $select.appendTo($container);
-            $select.focus();
-        };
+        YesNoCheckboxCellEditor : function(args) {
+            var $select;
+            var defaultValue = args.value;
+            var scope = this;
 
+            this.init = function() {
+                $select = $("<INPUT type=checkbox value='true' class='editor-checkbox' hideFocus>");
 
-        this.destroy = function() {
-            $select.remove();
-        };
+                if (defaultValue)
+                    $select.attr("checked", "checked");
 
+                $select.appendTo(args.container);
+                $select.focus();
+            };
 
-        this.focus = function() {
-            $select.focus();
-        };
 
-        this.setValue = function(value) {
-            if (value)
-                $select.attr("checked", "checked");
-            else
-                $select.removeAttr("checked");
+            this.destroy = function() {
+                $select.remove();
+            };
 
-            defaultValue = value;
-        };
 
-        this.getValue = function() {
-            return $select.attr("checked");
-        };
+            this.focus = function() {
+                $select.focus();
+            };
 
-        this.isValueChanged = function() {
-            return (scope.getValue() != defaultValue);
-        };
+            this.setValue = function(value) {
+                if (value)
+                    $select.attr("checked", "checked");
+                else
+                    $select.removeAttr("checked");
 
-        this.validate = function() {
-            return {
-                valid: true,
-                msg: null
+                defaultValue = value;
             };
-        };
 
-        this.init();
-    },
+            this.getValue = function() {
+                return $select.attr("checked");
+            };
 
-    PercentCompleteCellEditor : function($container, columnDef, value, dataContext) {
-        var $input, $picker;
-        var defaultValue = value;
-        var scope = this;
+            this.isValueChanged = function() {
+                return (scope.getValue() != defaultValue);
+            };
 
-        this.init = function() {
-            $input = $("<INPUT type=text class='editor-percentcomplete' />");
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
 
-            if (value != null)
-            {
-                $input[0].defaultValue = value;
-                $input.val(defaultValue);
-            }
+            this.init();
+        },
 
-            $input.width($container.innerWidth() - 25);
-            $input.appendTo($container);
+        PercentCompleteCellEditor : function(args) {
+            var $input, $picker;
+            var defaultValue = args.value;
+            var scope = this;
 
-            $picker = $("<div class='editor-percentcomplete-picker' />").appendTo($container);
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-percentcomplete' />");
 
-            $picker.append("<div class='editor-percentcomplete-helper'><div class='editor-percentcomplete-wrapper'><div class='editor-percentcomplete-slider' /><div class='editor-percentcomplete-buttons' /></div></div>");
+                if (args.value != null) {
+                    $input[0].defaultValue = args.value;
+                    $input.val(defaultValue);
+                }
 
-            $picker.find(".editor-percentcomplete-buttons").append("<button val=0>Not started</button><br/><button val=50>In Progress</button><br/><button val=100>Complete</button>");
+                $input.width($(args.container).innerWidth() - 25);
+                $input.appendTo(args.container);
 
-            $input.focus().select();
+                $picker = $("<div class='editor-percentcomplete-picker' />").appendTo(args.container);
 
-            $picker.find(".editor-percentcomplete-slider").slider({
-                orientation: "vertical",
-                range: "min",
-                value: defaultValue,
-                slide: function(event, ui) {
-                    $input.val(ui.value)
-                }
-            });
+                $picker.append("<div class='editor-percentcomplete-helper'><div class='editor-percentcomplete-wrapper'><div class='editor-percentcomplete-slider' /><div class='editor-percentcomplete-buttons' /></div></div>");
 
-            $picker.find(".editor-percentcomplete-buttons button").bind("click", function(e) {
-                $input.val($(this).attr("val"));
-                $picker.find(".editor-percentcomplete-slider").slider("value", $(this).attr("val"));
-            })
-        };
+                $picker.find(".editor-percentcomplete-buttons").append("<button val=0>Not started</button><br/><button val=50>In Progress</button><br/><button val=100>Complete</button>");
 
+                $input.focus().select();
 
-        this.destroy = function() {
-            $input.remove();
-            $picker.remove();
-        };
+                $picker.find(".editor-percentcomplete-slider").slider({
+                    orientation: "vertical",
+                    range: "min",
+                    value: defaultValue,
+                    slide: function(event, ui) {
+                        $input.val(ui.value)
+                    }
+                });
 
+                $picker.find(".editor-percentcomplete-buttons button").bind("click", function(e) {
+                    $input.val($(this).attr("val"));
+                    $picker.find(".editor-percentcomplete-slider").slider("value", $(this).attr("val"));
+                })
+            };
 
-        this.focus = function() {
-            $input.focus();
-        };
 
-        this.setValue = function(value) {
-            $input.val(value);
-            defaultValue = value;
-        };
+            this.destroy = function() {
+                $input.remove();
+                $picker.remove();
+            };
 
-        this.getValue = function() {
-            var val = $.trim($input.val());
-            return (val == "") ? 0 : parseInt($input.val(), 10);
-        };
 
-        this.isValueChanged = function() {
-            return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
-        };
+            this.focus = function() {
+                $input.focus();
+            };
+
+            this.setValue = function(value) {
+                $input.val(value);
+                defaultValue = value;
+            };
+
+            this.getValue = function() {
+                var val = $.trim($input.val());
+                return (val == "") ? 0 : parseInt($input.val(), 10);
+            };
+
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                if (isNaN($input.val()))
+                    return {
+                        valid: false,
+                        msg: "Please enter a valid positive number"
+                    };
 
-        this.validate = function() {
-            if (isNaN($input.val()))
                 return {
-                    valid: false,
-                    msg: "Please enter a valid positive number"
+                    valid: true,
+                    msg: null
                 };
+            };
+
+            this.init();
+        },
+
+        TaskNameCellEditor : function(args) {
+            var $input;
+            var defaultValue = args.value;
+            var scope = this;
+
+            this.init = function() {
+                $input = $("<INPUT type=text class='editor-text' />");
 
-            return {
-                valid: true,
-                msg: null
+                if (args.value != null) {
+                    $input[0].defaultValue = args.value;
+                    $input.val(defaultValue);
+                }
+
+                $input.bind("keydown.nav", function(e) {
+                    if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
+                        e.stopImmediatePropagation();
+                    }
+                });
+                $input.appendTo(args.container);
+                $input.focus().select();
             };
-        };
 
-        this.init();
-    },
+            this.destroy = function() {
+                $input.remove();
+            };
 
-    TaskNameCellEditor : function($container, columnDef, value, dataContext) {
-        var $input;
-        var defaultValue = value;
-        var scope = this;
+            this.focus = function() {
+                $input.focus();
+            };
 
-        this.init = function() {
-            $input = $("<INPUT type=text class='editor-text' />");
+            this.setValue = function(value) {
+                $input.val(value);
+                defaultValue = value;
+            };
 
-            if (value != null)
-            {
-                $input[0].defaultValue = value;
-                $input.val(defaultValue);
-            }
+            this.getValue = function() {
+                return $input.val();
+            };
 
-            $input.bind("keydown.nav", function(e) {
-                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
-                    e.stopImmediatePropagation();
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
+            };
+
+            this.validate = function() {
+                if (columnDef.validator) {
+                    var validationResults = columnDef.validator(scope.getValue());
+                    if (!validationResults.valid)
+                        return validationResults;
                 }
-            });
-            $input.appendTo($container);
-            $input.focus().select();
-        };
-
-        this.destroy = function() {
-            $input.remove();
-        };
-
-        this.focus = function() {
-            $input.focus();
-        };
-
-        this.setValue = function(value) {
-            $input.val(value);
-            defaultValue = value;
-        };
-
-        this.getValue = function() {
-            return $input.val();
-        };
-
-        this.isValueChanged = function() {
-            return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
-        };
-
-        this.validate = function() {
-            if (columnDef.validator)
-            {
-                var validationResults = columnDef.validator(scope.getValue());
-                if (!validationResults.valid)
-                    return validationResults;
-            }
 
-            if ($input.val() == "")
+                if ($input.val() == "")
+                    return {
+                        valid: false,
+                        msg: "This field cannot be empty"
+                    };
+
                 return {
-                    valid: false,
-                    msg: "This field cannot be empty"
+                    valid: true,
+                    msg: null
                 };
-
-            return {
-                valid: true,
-                msg: null
             };
-        };
-
-        this.init();
-    },
 
-    ResourcesCellEditor : function($container, columnDef, value, dataContext) {
-        var $input;
-        var defaultValue = [];
-        var scope = this;
+            this.init();
+        },
 
-        this.init = function() {
-            $input = $("<INPUT type=text class='editor-text' />");
+        StarCellEditor : function(args) {
+            var $input;
+            var defaultValue = args.value;
+            var scope = this;
 
-            var resources = dataContext ? dataContext["resources"] : null;
+            function toggle(e) {
+                if (e.type == "keydown" && e.which != 32) return;
 
-            defaultValue = resources ? resources.concat() : [];
+                if ($input.css("opacity") == "1")
+                    $input.css("opacity", 0.5);
+                else
+                    $input.css("opacity", 1);
 
-            if (resources != null)
-            {
-                $input[0].defaultValue = defaultValue.join(", ");
-                $input.val(defaultValue.join(", "));
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
             }
 
-            $input.bind("keydown.nav", function(e) {
-                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
-                    e.stopImmediatePropagation();
-                }
-            });
-            $input.appendTo($container);
-            $input.focus().select();
-        };
-
-        this.destroy = function() {
-            $input.remove();
-        };
-
-        this.focus = function() {
-            $input.focus();
-        };
-
-        this.setValue = function(value) {
-            defaultValue = value ? value : [];
-            $input.val(defaultValue.join(", "));
-        };
-
-        this.getValue = function() {
-            if ($input.val() == "")
-                return [];
-
-            var names = $input.val().split(",");
-
-            for (var i = 0; i < names.length; i++)
-                names[i] = $.trim(names[i]);
-
-            return names;
-        };
-
-        this.isValueChanged = function() {
-            // todo:  implement
-            return true;
-        };
-
-        this.validate = function() {
-            if (columnDef.validator)
-            {
-                var validationResults = columnDef.validator(scope.getValue());
-                if (!validationResults.valid)
-                    return validationResults;
-            }
+            this.init = function() {
+                $input = $("<IMG src='../images/bullet_star.png' align=absmiddle tabIndex=0 title='Click or press Space to toggle' />");
 
-            // todo:  implement
+                if (defaultValue)
+                    $input.css("opacity", 1);
+                else
+                    $input.css("opacity", 0.5);
 
-            return {
-                valid: true,
-                msg: null
+                $input.bind("click keydown", toggle);
+
+                $input.appendTo(args.container);
+                $input.focus();
             };
-        };
 
-        this.init();
-    },
+            this.destroy = function() {
+                $input.unbind("click keydown", toggle);
+                $input.remove();
+            };
 
-    StarCellEditor : function($container, columnDef, value, dataContext) {
-        var $input;
-        var defaultValue = value;
-        var scope = this;
+            this.focus = function() {
+                $input.focus();
+            };
 
-        function toggle(e) {
-            if (e.type == "keydown" && e.which != 32) return;
+            this.setValue = function(value) {
+                defaultValue = value;
 
-            if ($input.css("opacity") == "1")
-                $input.css("opacity", 0.5);
-            else
-                $input.css("opacity", 1);
+                if (defaultValue)
+                    $input.css("opacity", 1);
+                else
+                    $input.css("opacity", 0.2);
+            };
 
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-        }
+            this.getValue = function() {
+                return $input.css("opacity") == "1";
+            };
 
-        this.init = function() {
-            $input = $("<IMG src='../images/bullet_star.png' align=absmiddle tabIndex=0 title='Click or press Space to toggle' />");
+            this.isValueChanged = function() {
+                return defaultValue != scope.getValue();
+            };
 
-            if (defaultValue)
-                $input.css("opacity", 1);
-            else
-                $input.css("opacity", 0.5);
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
 
-            $input.bind("click keydown", toggle);
+            this.init();
+        },
 
-            $input.appendTo($container);
-            $input.focus();
-        };
+        /*
+         * An example of a "detached" editor.
+         * The UI is added onto document BODY and .position(), .show() and .hide() are implemented.
+         * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
+         */
+        LongTextCellEditor : function (args) {
+            var $input, $wrapper;
+            var defaultValue = args.value;
+            var scope = this;
 
-        this.destroy = function() {
-            $input.unbind("click keydown", toggle);
-            $input.remove();
-        };
+            this.init = function() {
+                var $container = $("body");
 
-        this.focus = function() {
-            $input.focus();
-        };
+                $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
+                    .appendTo($container);
 
-        this.setValue = function(value) {
-            defaultValue = value;
+                $input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0'>")
+                    .appendTo($wrapper);
 
-            if (defaultValue)
-                $input.css("opacity", 1);
-            else
-                $input.css("opacity", 0.2);
-        };
+                $("<DIV style='text-align:right'><BUTTON>Save</BUTTON><BUTTON>Cancel</BUTTON></DIV>")
+                    .appendTo($wrapper);
+
+                $wrapper.find("button:first").bind("click", this.save);
+                $wrapper.find("button:last").bind("click", this.cancel);
+                $input.bind("keydown", this.handleKeyDown);
+
+                if (args.value != null) {
+                    $input[0].defaultValue = args.value;
+                    $input.val(defaultValue);
+                }
+
+                scope.position(args.position);
+                $input.focus().select();
+            };
+
+            this.handleKeyDown = function(e) {
+                if (e.which == $.ui.keyCode.ENTER && e.ctrlKey) {
+                    scope.save();
+                }
+                else if (e.which == $.ui.keyCode.ESCAPE) {
+                    e.preventDefault();
+                    scope.cancel();
+                }
+                else if (e.which == $.ui.keyCode.TAB && e.shiftKey) {
+                    e.preventDefault();
+                    grid.navigatePrev();
+                }
+                else if (e.which == $.ui.keyCode.TAB) {
+                    e.preventDefault();
+                    grid.navigateNext();
+                }
+            };
+
+            this.save = function() {
+                args.commitChanges();
+            };
+
+            this.cancel = function() {
+                $input.val(defaultValue);
+                args.cancelChanges();
+            };
 
-        this.getValue = function() {
-            return $input.css("opacity") == "1";
-        };
+            this.hide = function() {
+                $wrapper.hide();
+            };
+
+            this.show = function() {
+                $wrapper.show();
+            };
+
+            this.position = function(position) {
+                $wrapper
+                    .css("top", position.top - 5)
+                    .css("left", position.left - 5)
+            };
+
+            this.destroy = function() {
+                $wrapper.remove();
+            };
+
+            this.focus = function() {
+                $input.focus();
+            };
 
-        this.isValueChanged = function() {
-            return (defaultValue == true) != scope.getValue();
-        };
+            this.setValue = function(value) {
+                $input.val(value);
+                defaultValue = value;
+            };
+
+            this.getValue = function() {
+                return $input.val();
+            };
 
-        this.validate = function() {
-            return {
-                valid: true,
-                msg: null
+            this.isValueChanged = function() {
+                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
             };
-        };
 
-        this.init();
-      }
-  };
+            this.validate = function() {
+                return {
+                    valid: true,
+                    msg: null
+                };
+            };
+
+            this.init();
+        }
+
+    };
 
-  $.extend(window, SlickEditor);
+    $.extend(window, SlickEditor);
 
 })(jQuery);