Problems creating dropdownlist inside of grid

[Jed]

I am having a problem creating a dropdownlist inside of a grid cell. I have seen the docs and some other posts but I can't seem to get it to work.  Any insight to what I am doing wrong?

        $("#multipleUploadDetailGrid").kendoGrid({
            dataSource: {
                data: self.MultipleUploadDetails,
            },
            pageable: false,
            selectable: false,
            refresh: false,
            resizable: true,
            reorderable: true,
            noRecords: { template: "<div class='k-grid-norecords-template' style='margin:0 auto;position:static;'>No Files Uploaded</div>" },
            sortable: {
                mode: "multiple",
                allowUnsort: true
            },
            columns: [
                {
                    headerTemplate: "<div class='oir-actions-header'>Actions</div>",
                    title: "Actions",
                    width: 50,
                    template: '<a class="oir-exp-inv-pay-delete" href="\\#" data-uid="#:Uid#" title="Click to delete the file"><i class="fa fa-trash-o fa-fw fa-lg oir-fa-action"></i></a>',
                    attributes: { style: "text-align: center" },
                    filterable: false,
                    sortable: false
                },
                { field: "FileName", title: "Name", width: 150, sortable: true },
                { field: "FileSize", title: "Size", width: 150, sortable: true },
                { field: "Id", title: "Document Type", width: 225,editor: docTypeDropDownEditor, template: "#=DocumentType.Name#" },
                { field: "IsConf", title: "Confidential", template: "<input type=\"checkbox\" />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }},
                { field: "IsTs", title: "Trade Secret", template: "<input type=\"checkbox\" />", width: 40, sortable: true, headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center;" }},
            ]
        });
        
        function docTypeDropDownEditor(container, options) {
            $('<input name="' + options.field + '" data-value-primitive="true"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    dataSource: { data: self.DocumentTypes},
                });
        }

I am trying to bind to knockout sources, I know the sources are populated.

Each row should have a dropdown to select the document type, the selected Id will ultimately be passed in to the controller.

[Martin]

Hello, Jed,

Thank you for the provided code snippet. 

There are several changes that are needed in order for the example to work as expected.

1. I can't see the editable option for the Grid.

2. From the template for the Id field, I can see that you wish to bind the column to an object. In that case, the Id field should also be an object and not a number. As I do not know what data is passed to the Grid, I thought I would mention it.

I have prepared a small Dojo example with the provided code snippet for reference. Let me know if you have any questions.

Regards,
Martin
Progress Telerik