Kendo Grid Drop-Down column with conditional formatting - kendo-grid

Question

I have a grid I'm working on, and some of the columns are Boolean (true/false). I want them to display as "Yes/No" in the column. I also am using a drop-down to change the value. The issue I am having is that once I select the value form the drop-down, it doesn't display the new value when I leave the line. But only if I'm going from "no" to "yes". I think it's something to do with the interaction between my template and the drop-down? That the value isn't getting set to "yes" from the drop down for the template, so it'd falling into the "no" logic.
Here is my data for the drop-down:
indData = [
{ Text: "Yes", boolValue: "true" },
{ Text: "No", boolValue: "false" }
];
And my definition for that column:
Copy code
{
field: "FreeAndReducedInd", width: "150px",
editor: indDropDownEditor,
title: "Free and Reduced",
template: ("# if (FreeAndReducedInd == true) { #" + "Yes" + "# } else { #" + "No" + "#}#")
},
And the editor code:
Copy code
function indDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "boolValue",
dataSource: indData
});
};
What do I have wrong?
thanks
Lisa
Update - I got an answer from Kendo, they suggested I add a Custom Binder and that seems to be working.
kendo.data.binders.widget.boolValue = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change);
},
refresh: function () {
var value = this.bindings.boolValue.get();
this.widget.value(value.toString());
},
change: function () {
var value = this.widget.value();
this.bindings.boolValue.set(value === "true");
},
destroy: function () {
this.widget.unbind("change", this._change);
}
});
I also modified my editor:
function indDropDownEditor(container, options) {
$('<input data-bind="boolValue:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Text",
dataValueField: "boolValue",
dataSource: [
{ Text: "Yes", boolValue: "true" },
{ Text: "No", boolValue: "false" }
]
});
};

Answer 1

It would be better if you could give us the full code. Its easier to check locally before giving any solution. But try using the following in template. If it doesn't help please update your post with full code so I can recheck. Thanks.
template: "<td role='gridcell'> #= FreeAndReducedInd == true ? 'Yes' : 'No' # </td>"