KendoGrid with KendoDropDownList

Question

I'm trying to use kendoDropDownList in a column of my kendo grid and it's not working.

I'm following the examples on this post, but I guess I'm missing something.

KendoGrid DataSource:

var comboDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                crossDomain: true,
                url: url,
                dataType: "json"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    typeId: { field: "typeId", defaultValue: 1 },
                    value: { type: "number", validation: { required: true } }
                }
            }
        }
    });

KendoDropDownList DataSource:

var typesComboDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            type: "GET",
            crossDomain: true,
            url: url,
            dataType: "json"
        }
    },
    schema: {
        data: "data",
        model: {
            id: "typeId",
            fields: {
                typeId: { editable: false, nullable: true },
                description: { validation: { required: true } }
            }
        }
    }
});

KendoGrid:

$("#grid").kendoGrid({
    editable: true,
    toolbar: ["create", "save", "cancel"],
    dataSource: comboDataSource,
    columns: [{
        title: "Type",
        field: "typeId",
        editor: typeDropDownEditor,
        template: "#=getType(typeId)#"
    }, {
        title: "Value",
        field: "value"
    }]
})

function typeDropDownEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "description",
        dataValueField: "typeId",
        dataSource: typesComboDataSource,
        change: function (e) {
            var dataItem = e.sender.dataItem();
            options.model.set("typeId", dataItem.typeId);
        }
    });
}

function getType(typeId) {
    var data = typesComboDataSource.data();
    for (var idx = 0, length = data.length; idx < length; idx++) {
        if (data[idx].typeId === typeId) {
            return data[idx].description;
        }
    }
}

For some reason I'm getting the error ReferenceError: getType is not defined and I don't know why.

And if I put the function directly on the template, my data is loaded, but the type field displays as undefined. My typesComboDataSource was not trigger.

$("#grid").kendoGrid({
    editable: true,
    toolbar: ["create", "save", "cancel"],
    dataSource: comboDataSource,
    columns: [{
        title: "Type",
        field: "typeId",
        editor: typeDropDownEditor,
        template: function getType(typeId) {
            var data = typesComboDataSource.data();
            for (var idx = 0, length = data.length; idx < length; idx++) {
                if (data[idx].typeId === typeId) {
                    return data[idx].description;
                }
            }
        }
    }, {
        title: "Value",
        field: "value"
    }]
});

Can someone help me, please? Thanks!

Answer 1

Your template functions are evaluated at runtime outside the JQuery code block scope, so it doesn't know what getType is when the code actually runs. Move both the typeDropDownEditor() and getType() functions outside your JQuery block and you should be good to go.

Here's a JSBin example displaying what you're trying to accomplish: http://jsbin.com/woxidojiyu/edit?js,output