Kendo grid popup with Yes/No combo for boolean

[Tyrel]

This is driving me nuts. I am trying to do something that should be a no-brainer, but having loads of issues. I have two boolean fields that I want to bind to a combo box with Yes and No in it. I want to use the Kendo UI Combobox and I am doing all this in a popup template for a Kendo UI grid.In the code snippet bellow I have two selects (at the end of the template), one with the data-role="dropdownlist" set, the other without.The first select, ReceiveEmailMontlyFlyer, will select the correct value when you edit a user, but will not change the value it's supposed to be bound to. The second select, ReceiveEmailMessages, will not select the correct value or return the correct value.Please help. I must be missing something painfully simple, some rule about HTML 5 binding or Kendo that I don't know or understand.

<script id="popupEditorTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="Username" class="required">Username</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Username" data-bind="value:Username">

    <div class="k-edit-label">
        <label for="FirstName" class="required">First Name</label>
    </div>
    <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">

    <div class="k-edit-label">
        <label for="LastName" class="required">Last Name</label>
    </div>
    <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">

    <div class="k-edit-label">
        <label for="Email" class="required">Email</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Email" data-bind="value:Email">

    <div class="k-edit-label">
        <label for="HomePhone">Home Phone</label>
    </div>
    <input type="text" class="k-input k-textbox" name="HomePhone" data-bind="value:HomePhone">

    <div class="k-edit-label">
        <label for="WorkPhone">Work Phone</label>
    </div>
    <input type="text" class="k-input k-textbox" name="WorkPhone" data-bind="value:WorkPhone">

    <div class="k-edit-label">
        <label for="MobilePhone">Mobile Phone</label>
    </div>
    <input type="text" class="k-input k-textbox" name="MobilePhone" data-bind="value:MobilePhone">

    <div class="k-edit-label">
        <label for="Line1" class="required">Address Line 1</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Line1" data-bind="value:Line1">

    <div class="k-edit-label">
        <label for="Line2">Address Line 2</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Line2" data-bind="value:Line2">

    <div class="k-edit-label">
        <label for="ReceiveEmailMontlyFlyer">Receive Flyer</label>
    </div>

    <select name="ReceiveEmailMontlyFlyer" id="ReceiveEmailMontlyFlyer" data-bind="value:ReceiveEmailMontlyFlyer">
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>

    <div class="k-edit-label">
        <label for="ReceiveEmailMessages">Receive other</label>
    </div>
    <select id="ReceiveEmailMessages" name="ReceiveEmailMessages" data-bind="value:ReceiveEmailMessages" data-role="dropdownlist">
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>
    <br />
</script>

[Alexander Valchev]

Hello Tyrel,

Your editor template looks OK, so I assume that the problem is connected with the data or the DataSource. Could you please provide a small example (probably in jsBin) which demonstrates the problem or your DataSource configuration together with a small extract of the data it contains. In this way I would be able to examine your case in details and assist you further.
Thank you in advance for the cooperation.
 
Kind regards,
Alexander Valchev
the Telerik team

[Tyrel]

I used one of the other examples (361804_popup-template-example) and added a IsRegistered boolean field to the people.js and data source in the html.  That file works, the bool binds and shows a difference in the grid.  I then duplicated all of that in my own cshtml file and the drop down shows the Yes/No fields, but does not bind.

local-data.html and people.js are from the sample (modified) and manage.cshtml is my file.  Not sure why there's a difference between the MVC example and the plain HTML example. 

[Alexander Valchev]

Hello Tyrel,

I am afraid that the provided information is not sufficient enough in order to determine where exactly the problem comes from. Your code looks OK, generally speaking the MVC framework should not affect the binding. Could you please provide a small but runnable example which isolates the issue? In this way I would be able to debug your project locally, examine what is going wrong and assist you further.
Please send such project and I will check it right away. Thank you in advance for the cooperation.

Kind regards,
Alexander Valchev
the Telerik team

[Tyrel]

I am going to work on this again today.  I have the day off from work (this is a home project), so I am hoping I find the missing link here pretty soon.  Otherwise I will modify the sample I used for the file upload question to include the same html I posted for this one.

[Tyrel]

I modified the example used for the file upload question, just copied the popup template from the HTML and I see the same result.  The discontinued value shows false in the grid, but when you click edit it shows Yes.  And changing it does not even call update because the code does not see any change to the object worth saving.

As a side note, the data source for the YesNo is mostly likely extreme.  I originally tried just having a select in the template.  My guess is the data source does not need the schema bit.

Something like this?
    var yesNoDropDownDataSource = new kendo.data.DataSource({data:[{ Value: true, Text: "Yes" }, { Value: false, Text: "No" }]});

[Alexander Valchev]

Hello Tyrel,

Thank you for providing a sample project.
It seems that the issue is connected with having boolean value as dataValueField. Currently this scenario is not working as expected, I will forward the issue to the developer team for further investigation.

As a workaround, I suggest you to use strings values in the DropDownLists data. Note that they must be in lower case, e.g. "true" but not "True".

var yesNoDropDownDataSource = new kendo.data.DataSource({
    data: [{ Value: "true", Text: "Yes" }, { Value: "false", Text: "No" }]
});

In this way both the initial select and update will work as expected.
For your convenience I updated the project.

All the best,
Alexander Valchev
the Telerik team

[Tyrel]

Thanks!  Works like a charm.  Hopefully you can fix the bug with the boolean, but in the mean time this works for me.