Adding Custom Column Property to SlickGrid
I want to add my own column property to some of my columns in SlickGrid. I have a custom editor that uses regex to validate 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 in it. I need something like this for 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 check 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 will not work, but it matches what I want to do.
+3
source to share
1 answer
The column information goes the same way as you define it, thus a custom property will be created. Supply all the necessary functions and the check 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();
}
+2
source to share