Set the selected text or value for a KendoDropDown

Question

I'm using Durandal and Kendo UI. My current problem is the edit popup event on my grid. I cannot seem to set the selected value on my dropdown.

I can debug and inspect, and I indeed do see the correct value of e.model.InstrumentName nicely populated.

How can I set the value/text of those dropdowns in edit mode ?

Here's my grid init:

      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",
    });

Here's my Editor Template for the dropdown:

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


}

thanks a lot Bob

Answer 1

Your editor configuration is bit unlucky for grid, anyway i have updated my ans on provided code avoiding manual selections:

Assumptions: Instrument dropdown editor only (leaving other fields as strings), Dummy data for grid

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

Action fetching json for dropddown in Home controller:

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