Thursday, October 23, 2014

Kendo annoyances series: numerictextbox

The problem:
You cannot let the user enter whole numbers. They will be interpreted as thousands of percent.  For example, if the user enters 90 as opposed to .90, this will be 9000%.  

The solution:
Since our users insist on using whole numbers, the only way I've found to fix this is to adjust the maximum percentage value up to 100 (instead of 1), monitor the data change event and then divide any number that is greater than one by 100.  By setting the value, it will cause another change event and then I can push the change to the server.

See the jsFiddle example below for more information.


Kendo annoyances series: select html element

The problem:
If you need two way binding so that edits that take place on your viewmodel (after user interactions or an AJAX call), you need to create an option template (option being the html element that represents an item inside of a select html element).

Without two way binding:
<select data-text-field="firstName" data-value-field="id" data-bind="source: users, value: selecteUser"></select>

The solution:
<select data-text-field="firstName" data-value-field="id" data-template="optionTemplate"   data-bind="source: users, value: selecteUser"></select>

<script type="text/x-kendo-template" id="optionTemplate">
        <option data-bind="value:id,text:firstName"></option>