Slickgrid : Custom Editor

HTML

<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<div id='container'>
    <div id="myGrid" style="width:600px;height:300px;"></div>
</div>

JavaScript

function Editor(args) {
    var $input, defaultValue;
    var scope = this;

    this.init = function () {
        $input = $("<INPUT type='checkbox' class='editor-text' />")
            .appendTo(args.container)
            .bind("keydown.nav", function (e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                e.stopImmediatePropagation();
            }
        })
            .focus()
            .select();
    };

    this.validate = function () {
        if (!args.column.regex.test($input.val())) {
            alert($input.val() + " is " + args.column.failureMessage)
            return {
                valid: false,
                msg: args.column.failureMessage
            };
        }
        return {
            valid: true,
            msg: null
        };
    };

    this.applyValue = function (item, state) {
        item[args.column.field] = state;
    };

    this.destroy = function () {
        $input.remove();
    };

    this.focus = function () {
        $input.focus();
    };

    this.getValue = function () {
        return $input.val();
    };

    this.setValue = function (val) { 
        $input.val(val);
    };

    this.loadValue = function (item) {
        defaultValue = item[args.column.field] || "";
         
        $input.val(defaultValue);
        $input[0].defaultValue = defaultValue;
        $input.select();
    };

    this.serializeValue = function () {
        return $input.val();
    };
    this.isValueChanged = function () {
        return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
    };
    scope.init()
}


function apply() {
    var grid, data = [];

    var options = {
        editable: true,

        enableCellNavigation: true,
        asyncEditorLoading: false,
        autoEdit: true,
        forcefitColumns: false

    };

    var columns = [{
        id: "data",
        name: "Data",
        field: "data",
        width: 120,
     ...