Editing percentage values with a KendoUI NumericTextBox

by Michael Henstock 16. April 2013 23:48

KendoUI has some great widgets and functionality built into it, and while it's not the best library in every situation it's great in most situations. The numeric text box widget is a simple widget that I'm using more frequently for percentages, which is great, however our users are wanting something that the default functionality doesn't supply. Our users love the widget but want to edit the text with the whole numbers (5 for 5% instead of 0.05).

We achieved this by extending the MVVM functionality to include a new formatter in the KendoUI binders. The default binder looks something like this:

<input data-role="numerictextbox" data-format="p" data-bind="value: percent" />

Which shows the value as a whole percentage, and edits in the decimal place number.

By extending the KendoUI binders with the following:

kendo.data.binders.widget.percentage = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);

        var that = this;
        that.element.options.format = "#.00 \\%";
        that.element.options.min = that.element.options.min || 0;
        that.element.options.max = that.element.options.max || 100;

        that.element.element.on("change", function () {
    refresh: function () {
        var that = this,
            value = that.bindings["percentage"].get();

        // Take a percentage value and display it in a simpler percentage format
        that.element.value(value * 100);
    change: function () {
        var value = this.element.value();
        if (!isNaN(value)) {
            // divide the percentage value by 100 to set the model value to the database percentage value
            this.bindings["percentage"].set(value / 100);

we can change our input binding to this:

<input data-role="numerictextbox" data-bind="percentage: percent" />

and get the same functionality and the ability to edit the percentages as whole numbers.

You can see a demonstration of this here: http://jsbin.com/ekovif/1/edit


JavaScript | KendoUI

Custom JavaScript handler to process the last event occurring instead of every event

by Michael Henstock 7. April 2013 10:02

I recently had a requirement to bind to a browser resize event that would adjust an elements size. Now that's all well and fine except you can get hundreds of resize events firing during the user resizing the browser. What we really want is to apply the changes after the user has finished resizing the window.

Now, there are plenty of third party libraries that provide this capability and a lot more (the Reactive Extensions library by Microsoft is the first that comes to my mind [http://msdn.microsoft.com/en-us/data/gg577609.aspx]), but my requirements were very simple and didn't need a full library. All our requirements are for an event to be called back half a second after the resize events have stopped calling.

var __customEventsHandler;
(function (events) {
    var timers = { };
    events.waitForFinalEvent = function(callback, ms, uniqueId) {
        if(!uniqueId) {
            throw "must specify uniqueId";
        if(timers[uniqueId]) {
        timers[uniqueId] = setTimeout(callback, ms);
})(__customEventsHandler || (__customEventsHandler = {}));

This gives us a __customEventsHandler.waitForFinalEvent function that takes the callback to run when the events stop occurring, the expected timeout milliseconds to wait and an uniqueId that we specify for the bind event to allow the handler to contain whatever timeout identifiers it needs to cancel/complete the timeouts.

How we can call this is via the following code:

$(window).resize(function () {
    __customEventsHandler.waitForFinalEvent(function () {
        alert('resize complete!')
    }, 500, "my_window_resize");

With the alert appearing 500 milliseconds after no more resize events have occurred.