StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The best way to approach this, in my view anyways, is to code your own editor which you'll add into <code>slick.editor.js</code> as another new custom editor. This file is made for that too. I did implement the regex test and it works great.</p> <p>Here's my new editor which is not only working for Regex but also for various condition types, for example an option of <code>min:2</code> would required a minimum number of 2, while a <code>minLength:2</code> would required the input to be a String of at least 2 chars, etc... Now for the one you're really looking for, that would be in my code definition the <code>pattern</code> type. So basically, you'll have to include this code inside the <code>slick.editor.js</code> : </p> <pre><code>ConditionalCellEditor : function(args) { var $input; var defaultValue; var scope = this; var condObj = null; 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.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.applyValue = function(item,state) { item[args.column.field] = state; }; this.isValueChanged = function() { return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); }; this.validate = function() { var condObj = args.column.editorOptions; var returnMsg = null; var returnValid = true; if(typeof condObj.min != 'undefined') { if( parseFloat($input.val()) < parseFloat(condObj.min) ) { returnMsg = "Value should not be less then "+condObj.min; returnValid = false; } } if(typeof condObj.max != 'undefined') { if( parseFloat($input.val()) > parseFloat(condObj.max) ) { returnMsg = "Value should not be over "+condObj.max; returnValid = false; } } if(typeof condObj.minLength != 'undefined') { if($input.val().length < condObj.minLength) { returnMsg = "Value length should not be less then "+condObj.minLength; returnValid = false; } } if(typeof condObj.maxLength != 'undefined') { if($input.val().length > condObj.maxLength) { returnMsg = "Value length should not be over "+condObj.maxLength; returnValid = false; } } if(typeof condObj.pattern != 'undefined') { if( condObj.pattern.test($input.val()) != true ) { returnMsg = (condObj.msg) ? condObj.msg : "Value is invalid following a regular expression pattern"; returnValid = false; } } if(typeof condObj.required != 'undefined') { if($input.val().length == "" && condObj.required) { returnMsg = "Required field, please provide a value"; returnValid = false; } } // Now let's return our boolean results and message if invalid return { valid: returnValid, msg: returnMsg } }; this.init(); }, </code></pre> <p>Then inside my SlickGrid column definition I'm calling that new editor which I defined and passing some options which I decided to pass into an <code>editorOptions</code> as an Object and that gives me more flexibility to add any options I want, pattern, msg, minLength, etc... all at one. My example is for an email regex pattern validation.</p> <pre><code>columns1 = [ ... {id:"email", field:"email", name:"Em@il", width:145, editor:ConditionalCellEditor, editorOptions:{pattern:/^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$/, msg:"Must be a valid email"} }, ...]; </code></pre> <p>And voilà, works like a charm!!! I'm barely using the <code>editor:TextCellEditor</code> anymore, since my new <code>ConditionalCellEditor</code> editor gives me a lot more flexibility. Hope it helps and let me know how it goes...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload