Kendo UI Combobox Customized: Previous Value Restore

Today I want to share a little Kendo UI Combobox customization, one that I hope you’ll find useful: restoring the previous value on an invalid entry. First, why would we want to do that?

Often we see validation, especially numeric validation on a range for example, use coercion to simply force the value to either the highest or lowest number. This certainly prevents invalid entry, but the user experience isn’t all that great in every scenario. What may be preferred, for an allowed range of 0–10, and if the user intends to change a 3 to a 4 and instead accidentally enters 44, would be to just restore the value of 3 (not coerce to 10).

In this case we are looking at a combobox, but the concept could be applied to other widgets. We can restore the previous value if we add a Previous field in the widget options on initialization. This field is then used to store only the most recent valid saved entry.

$("#combobox").kendoComboBox({
dataSource: {
data: [
{Text:'Zero', Value: 0},
{Text:'Test One', Value: 1},
{Text:'Test Two', Value: 2},
{Text:'Test Three', Value: 3},
{Text:'Test Four', Value: 4}
]
},
filter: 'contains',
dataTextField: 'Text',
dataValueField: 'Value',
template: kendo.template($("#template").html()),
previous: ""
});

Then, we interrupt the save (here using a button), to check our range and upon failure, restore the previous value. If the change passes, set the Previous field to the new value and repeat.

$("#saveButton").kendoButton({
click: function(e){
var cb = $("#combobox").getKendoComboBox();
// check the combobox value
var newValue = cb.value();
var newInt = parseInt(newValue);
if (!isNaN(newInt) && newInt >= 0 && newInt <= 10){
cb.value(newInt);
cb.setOptions({previous: newInt})
}
else{
// restore the previous value
var prev = cb.options.previous;
cb.value(prev);
}

var ot = $('#savedValue');
var comboboxValue = cb.value();
ot.html(ot.html() + '<br/>' + 'value: ' + comboboxValue );

}
});

In my example, you can see below the widget the save values, and how on invalid entry (such as abc), the previous value is restored.

2016-10-09-15_08_14-kendo-combobox-for-headings-jsfiddle

One thing to note: if your page utilizes Kendo Validation, you wouldn’t be saving the invalid value anyway, and the user would be notified by a validation error message instead of coercion. But not every page nor every entry scenario involves validation errors and messages. This is an alternative for cases where full-blown validation is not desired, or can be applied as part of a custom validation rule operation.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.