Kendo UI Combobox Customized: Previous Value Restore

By October 9, 2016JavaScript, Kendo UI

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.

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.

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.

Here’s the full Kendo UI Combobox example you can try out for yourself:

The following two tabs change content below.

Latest posts by Falafel Posts (see all)