Joined February 2014
·

Guillermo Londono

Athens, GA
·
·

Posted to Kendo CSS Binding extensions over 1 year ago

Thanks Jason for sharing... base on your code, I create this one that I had used in many occasions... the ideas is basically apply a css based on an operation like value equals to 1 or greater than 2... etc...

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

    var target = $(element);
    this.class = target.data("class");
    this.operator = target.data("operator");
    this.value = target.data("value");
},

refresh: function(){
    var v = this.bindings.cssIf.get();
    var apply = false;
    if (this.operator === "=" && v === this.value) {
        apply = true;
    } else if (this.operator === ">" && v > this.value) {
        apply = true;
    } else if (this.operator === "<" && v < this.value) {
        apply = true;
    } else if (this.operator === ">=" && v >= this.value) {
        apply = true;
    } else if (this.operator === "<=" && v <= this.value) {
        apply = true;
    } else if (this.operator === "!=" && v !== this.value) {
        apply = true;
    }
    if (apply) {
        $(this.element).addClass(this.class);
    } else {
        $(this.element).removeClass(this.class);
    }
}

});

Achievements
9 Karma
0 Total ProTip Views
Interests & Skills