title: Kendo Grid Drop-Down column with conditional formatting
body: <p>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.</p>
  
  <p>Here is my data for the drop-down:</p>
  
  <pre><code>indData = [
  { Text: "Yes", boolValue: "true" },
  
  { Text: "No", boolValue: "false" }
  
  
  
  ];
  </code></pre>
  
  <p>And my definition for that column: 
  Copy code</p>
  
  <pre><code>{
  
  field: "FreeAndReducedInd", width: "150px",
  
  editor: indDropDownEditor,
  
  title: "Free and Reduced",
  
  template: ("# if (FreeAndReducedInd == true) { #" + "Yes" + "# } else { #" + "No" + "#}#")
  
  },
  </code></pre>
  
  <p>And the editor code:</p>
  
  <p>Copy code</p>
  
  <p>function indDropDownEditor(container, options) {</p>
  
  <pre><code>$('&lt;input data-bind="value:' + options.field + '"/&gt;')
  
                  .appendTo(container)
  
                  .kendoDropDownList({
  
                      dataTextField: "Text",
  
                      dataValueField: "boolValue",
  
                      dataSource: indData
                  });
  };
  </code></pre>
  
  <p>What do I have wrong?</p>
  
  <p>thanks</p>
  
  <p>Lisa</p>
  
  <p>Update - I got an answer from Kendo, they suggested I add a Custom Binder and that seems to be working.</p>
  
  <pre><code>    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);
          }
      });
  </code></pre>
  
  <p>I also modified my editor:</p>
  
  <pre><code>function indDropDownEditor(container, options) {
      $('&lt;input data-bind="boolValue:' + options.field + '"/&gt;')
          .appendTo(container)
          .kendoDropDownList({
              dataTextField: "Text",
              dataValueField: "boolValue",
              dataSource: [
              { Text: "Yes", boolValue: "true" },
              { Text: "No", boolValue: "false" }
              ]
          });
  };
  </code></pre>