Kendo ui 设置KendoDropDownList的选定文本或值

我正在使用Durandal和剑道UI。我当前的问题是网格上的编辑弹出事件。我似乎无法在下拉列表中设置所选值

我可以调试和检查，我确实看到了e.model.InstrumentName的正确值

如何在编辑模式下设置这些下拉列表的值/文本

这是我的网格初始化：

      positGrid = $("#positGrid").kendoGrid({
        dataSource: datasource,         
        columnMenu: false,
        {
            field: "portfolioName", title: "Portfolio Name",
            editor: portfolioDropDownEditor, template: "#=portfolioName#"      
        },
        {
            field: "InstrumentName",
            width: "220px",
            editor: instrumentsDropDownEditor, template: "#=InstrumentName#",
        },
        edit: function (e) {
            var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
            var portfDropDown = $('#portfolioName').data("kendoDropDownList");
            instrDropDown.list.width(350);  // let's widen the INSTRUMENT dropdown list

            if (!e.model.isNew()) {          // set to current valuet                
                //instrDropDown.text(e.model.InstrumentName); // not working...
                instrDropDown.select(1);
                //portfDropDown.text();
            }
        },
          filterable: true,
        sortable: true,
        pageable: true,
        editable: "popup",
    });

以下是我的下拉列表编辑器模板：

功能仪表下拉编辑器容器，选项{

    // INIT INSTRUMENT DROPDOWN !
    var dropDown = $('<input id="InstrumentName" name="InstrumentName">'); 
    dropDown.appendTo(container);
    dropDown.kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: {
            type: "json",
            transport: {
                read: "/api/breeze/GetInstruments"
            },                    
        },
        pageSize: 6,
        select: onSelect,
        change: function () { },
        optionLabel: "Choose an instrument"
    }).appendTo(container);


}

非常感谢

---

Bob

您的编辑器配置对于grid来说有点不走运，无论如何，我已经在提供的代码上更新了我的ans，避免了手动选择：

假设：仪器下拉编辑器仅将其他字段保留为字符串，虚拟数据用于网格

<div id="positGrid"></div>

<script>
    $(document).ready(function () {    

        $("#positGrid").kendoGrid({
            dataSource: {
                data: [
              { PositionId: 1, Portfolio: "Jane Doe", Instrument: { IID: 3, IName: "Auth2" }, NumOfContracts: 30, BuySell: "sfsf" },
            { PositionId: 2, Portfolio: "John Doe", Instrument: { IID: 2, IName: "Auth1" }, NumOfContracts: 33, BuySell: "sfsf" }
                ],
                schema: {
                    model: {
                        id: "PositionId",
                        fields: {
                            "PositionId": { type: "number" },
                            Portfolio: { validation: { required: true } },
                            Instrument: { validation: { required: true } },
                            NumOfContracts: { type: "number", validation: { required: true, min: 1 } },
                            BuySell: { validation: { required: true } }
                        }
                    }
                }    
            },
            toolbar: [
                { name: "create", text: "Add Position" }
            ],
            columns: [
                { field: "PositionId" },
                { field: "Portfolio" },
                { field: "Instrument", width: "220px",
                    editor: instrumentsDropDownEditor, template: "#=Instrument.IName#" },
                { field: "NumOfContracts" },
                { field: "BuySell" },
                { command: [ "edit", "destroy" ]
            },
            ],
            edit: function (e) {
                var instrDropDown = $('#InstrumentName').data("kendoDropDownList");                
                instrDropDown.list.width(400);  // let's widen the INSTRUMENT dropdown list                
            },
            //sortable: true,
            editable: "popup",
        });
    });

    function instrumentsDropDownEditor(container, options) {
        $('<input id="InstrumentName" required data-text-field="IName" data-value-field="IID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({                                
                dataSource: {
                    type: "json",
                    transport: {
                        read: "../Home/GetMl"
                    }
                },
                optionLabel:"Choose an instrument"
            });
    }
</script>

---

您的编辑器配置对于网格来说有点不走运，无论如何，我已经在提供的代码上更新了我的ans，避免了手动选择：

假设：仪器下拉编辑器仅将其他字段保留为字符串，虚拟数据用于网格

<div id="positGrid"></div>

<script>
    $(document).ready(function () {    

        $("#positGrid").kendoGrid({
            dataSource: {
                data: [
              { PositionId: 1, Portfolio: "Jane Doe", Instrument: { IID: 3, IName: "Auth2" }, NumOfContracts: 30, BuySell: "sfsf" },
            { PositionId: 2, Portfolio: "John Doe", Instrument: { IID: 2, IName: "Auth1" }, NumOfContracts: 33, BuySell: "sfsf" }
                ],
                schema: {
                    model: {
                        id: "PositionId",
                        fields: {
                            "PositionId": { type: "number" },
                            Portfolio: { validation: { required: true } },
                            Instrument: { validation: { required: true } },
                            NumOfContracts: { type: "number", validation: { required: true, min: 1 } },
                            BuySell: { validation: { required: true } }
                        }
                    }
                }    
            },
            toolbar: [
                { name: "create", text: "Add Position" }
            ],
            columns: [
                { field: "PositionId" },
                { field: "Portfolio" },
                { field: "Instrument", width: "220px",
                    editor: instrumentsDropDownEditor, template: "#=Instrument.IName#" },
                { field: "NumOfContracts" },
                { field: "BuySell" },
                { command: [ "edit", "destroy" ]
            },
            ],
            edit: function (e) {
                var instrDropDown = $('#InstrumentName').data("kendoDropDownList");                
                instrDropDown.list.width(400);  // let's widen the INSTRUMENT dropdown list                
            },
            //sortable: true,
            editable: "popup",
        });
    });

    function instrumentsDropDownEditor(container, options) {
        $('<input id="InstrumentName" required data-text-field="IName" data-value-field="IID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({                                
                dataSource: {
                    type: "json",
                    transport: {
                        read: "../Home/GetMl"
                    }
                },
                optionLabel:"Choose an instrument"
            });
    }
</script>

---

不起作用。我已经更新了上面的代码以显示编辑器模板功能。我甚至不能使用标准jquery来更新下拉值-即$instrDropDown.valtestNB:instrDropDown.select2实际执行下拉选择值，但仅在我调试时才执行。一旦我离开网格编辑事件，我的下拉列表就会返回以选择仪器。给出了什么？请帮助。谢谢。您好binbsr。我通过添加剑道数据源更新了您的答案。我了解您的设置工具：{IID:3，IName:Auth2}但是我如何将其转换为我的数据源模式呢？再次感谢。鲍勃。只需从API返回网格的方便json。你能告诉我你的API返回了什么吗？在你的API中，只需创建一些viewmodels，绑定一些数据，最后转换为网格的json。我刚刚更新了你的答案，以显示我的json数据示例。我不会o要求其他开发人员以名称对ID/名称的形式发送仪器数据。不起作用。我已更新了上面的代码以显示编辑器模板功能。我甚至无法使用标准jquery更新下拉值-即$instrDropDown.valtestNB:instrDropDown.select2实际执行下拉选择值，但仅在我调试时执行。一旦保存网格编辑事件我的下拉列表返回选择乐器。给出了什么？请帮助。谢谢。您好binbsr。我通过添加剑道数据源更新了您的答案。我了解您的设置乐器：{IID:3，IName:Auth2}但是我如何将其转换为我的数据源模式呢？再次感谢。鲍勃。只需从API返回网格的方便json。你能告诉我你的API返回了什么吗？在你的API中，只需创建一些viewmodels，绑定一些数据，最后转换为网格的json。我刚刚更新了你的答案，以显示我的json数据示例。我不会o要求其他开发人员将仪器数据作为名称对ID/名称发送。