Adding a custom column property in SlickGrid

Question

I want to add a custom column property to some of my columns in SlickGrid. I have a custom editor that uses regex to validate the input. I would like to add a regex statement property to my columns so that I can use the same editor for each of them and just grab the unique regex statement from them column. I want something like this for the columns:

var columns = [{ id: "id", name: "#", field: "id", cssClass: "cell-title", resizeable: true, sortable: true },
           { id: "upc", name: "UPC", field: "upc", resizable: true, sortable: true, editor: regexValidationEditor, regex: /^[a-zA-Z0-9 ]{0,20}$/ },
           { id: "price", name: "Price", field: "price", resizable: true, sortable: true, editor: regexValidationEditor, regex: /^\d*\.?\d{0,3}$/ }];

Then if I could do something like this in my validate function:

function regexValidationEditor(args) {
    var $value;
    var inputBox = "<INPUT class='customInput' type=text />";
    var scope = this;

    this.init = function () {
        $value = $(inputBox)
        .appendTo(args.container);

        scope.focus();
    };

    this.validate = function () {
        if (!args.column.regex.test($value.val())) {
            return { valid: false, msg: "Invalid Data Entry" };
        }
        return { valid: true, msg: null };
    };

    this.init();
}

Obviously, this doesn't work, but it's along the lines of what I want to do.

Answer 1

The column information goes in just as you define it, thus the custom property will be there. Supply all the necessary editor functions and the validation will work.

Fiddle

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

  this.init = function () {
    $input = $("<INPUT type=text 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())) {
         
        return {
            valid: false,
            msg: "Invalid Data Entry"
        };
    }
    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();
}