Kendo布尔弹出窗口，带有“是/否"组合以表示布尔值 [英] Kendo grid popup with Yes/No combo for boolean

问题描述

这真让我发疯.我正在尝试做应该不费吹灰之力的事情，但是有很多问题.我有两个布尔字段，我想绑定到带有是"和否"的组合框.我想使用Kendo UI组合框，而我正在Kendo UI网格的弹出模板中完成所有这些操作.

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.

在下面的代码段中，我有两个选择(在模板的末尾)，一个选择设置了data-role ="dropdownlist"，另一个没有.

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.

第一个选择，ReceiveEmailMontlyFlyer，将在您编辑用户时选择正确的值，但不会更改应绑定的值. 第二个选择ReceiveEmailMessages将不会选择正确的值或返回正确的值.

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.

请帮助.我一定会错过一些非常简单的东西，一些我不了解或不了解的有关HTML 5绑定或Kendo的规则.

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>

推荐答案

我前一段时间想通了，但从未在这里发布过.因此，如果有人需要它，这就是我所发现的.

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>

这篇关于Kendo布尔弹出窗口，带有“是/否"组合以表示布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！