Kendo grid popup with Yes/No combo for boolean

问题

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>

回答1:

Not sure if this completely helps your issue, but you didn't close your

<script>

which could be problematic

回答2:

I figured this out a while ago, but never posted back here. So in case anyone else needs this, this is what I found out.

I created a datasource in a script tag like so:

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

Then I used that as follows in my popup template:

    <div class="k-edit-label">
        <label for="ReceiveEmailMonthlyFlyer" class="required">Receive Flyer</label>
    </div>
    <input name="ReceiveEmailMonthlyFlyer"
        data-bind="value:ReceiveEmailMonthlyFlyer"
        data-value-field="Value"
        data-text-field="Text"
        data-source="yesNoDropDownDataSource"
        data-role="dropdownlist" />
    <br>

来源：https://stackoverflow.com/questions/15604605/kendo-grid-popup-with-yes-no-combo-for-boolean

标签

kendo-ui

kendo-grid