CODEWITHSUNDEEP
javascriptregexpropertiesslickgrid
Tommy Godsey
Tommy Godsey

Reputation: 99

Adding a custom column property in SlickGrid

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.

Upvotes: 3

Views: 1311

Answers (1)

Origineil
Origineil

Reputation: 3118

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();
}

Upvotes: 2

Related Questions