This is a migrated thread and some comments may be shown as answers.

support for formatting and parsing data during text binding

0 Answers 286 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Maxim
Top achievements
Rank 1
Maxim asked on 29 Apr 2014, 07:55 PM
Hi,

If you want to add formatting and parsing to kendo you have to override text binding in the framework. Add data-format and data-parser attribute bound element. The data-parser attribute is not required and will only be used if data-format attribute is present. So far I had no problem using it.
PS: data-parser attributes is only needed when underlying data is stored as string(s) apposed to native form. 

<li class="text-center" data-bind="text:date" data-format="MMM-yy" data-parser="date"><b></b></li>
<li> </li>
<li><a href="\#" data-bind="text:salary"></a></li>
<li><a href="\#" data-bind="text:overtime" data-format="N2"></a></li>

(function (f, define) {
    define(["kendo"], f);
})(function () {
 
    (function ($, undefined) {
 
        var kendo = window.kendo,
            binders = kendo.data.binders,
            Binder = kendo.data.Binder,
            toString = kendo.toString;
 
        var parsers = {
            "number": function (value) {
                return kendo.parseFloat(value);
            },
 
            "date": function (value) {
                return kendo.parseDate(value);
            },
 
            "boolean": function (value) {
                if (typeof value === "string") {
                    return value.toLowerCase() === "true";
                }
                return value != null ? !!value : value;
            },
 
            "string": function (value) {
                return value != null ? (value + "") : value;
            },
 
            "default": function (value) {
                return value;
            }
        };
 
        binders.text = Binder.extend({
            init: function (element, bindings, options) {
                //call the base constructor
                Binder.fn.init.call(this, element, bindings, options);
                this.jelement = $(element);
                this.format = this.jelement.attr("data-format");
                this.parser = parsers[this.jelement.attr("data-parser") || "default"];
            },
            refresh: function () {
                var text = this.bindings.text.get();
                if (text === null) {
                    text = "";
                }
                else if (this.format) {
                    text = toString(this.parser(text), this.format);
                }
                this.jelement.text(text);
            }
        });
 
    })(window.kendo.jQuery);
 
    return window.kendo;
}, typeof define == 'function' && define.amd ? define : function (_, f) { f(); });

No answers yet. Maybe you can help?

Tags
MVVM
Asked by
Maxim
Top achievements
Rank 1
Share this question
or