Question

我正在使用Durandal和Kendo 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",
    });

这是下拉列表的编辑模板：

function instrumentsDropDownEditor（container，options）{

    // 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);


}

非常感谢鲍勃

Answer 1

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

假设：仅限工具下拉菜单（将其他字段保留为字符串），网格的虚拟数据

<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>

在Home Controller中为dropddown提取json的操作：

public JsonResult GetMl()
        {
            return Json(new[] { new { IName = "Auth", IID = 1 }, new { IName = "Auth1", IID = 2 }, new { IName = "Auth2", IID = 3 } }, 
                JsonRequestBehavior.AllowGet);
        }

为KendoDropDownList设置选定的文本或值

1 个答案: