support for formatting and parsing data during text binding

1 posts, 0 answers
  1. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 29 Apr 2014 Link to this post

    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(); });

Back to Top