I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:

1. A dropdownlist is clicked on in the initial grid,

2. The modal is opened afterward (each row has its own button)

3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens

Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid, 
this error is thrown:

Uncaught TypeError: m is not a function
    at init.editor (kendo.all.min.js:54)
    at init.refresh (kendo.all.min.js:54)
    at new init (kendo.all.min.js:54)
    at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
    at Function.each (jquery.min.js:2)
    at R.fn.init.each (jquery.min.js:2)
    at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
    at init.editCell (kendo.all.min.js:59)
    at init.tap (kendo.all.min.js:59)
    at init.trigger (kendo.all.min.js:25)

This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.

Any ideas on where this console error comes from?

Here is a snippet of the grid being generated in the modal:

 $("#account-tracking-grid").kendoGrid({
        columns: [
            {
                field: "accountName",
                title: "Account Name",
                editable: function () { return false },
                width: "200px",
            },
            {
                field: "accountNumber",
                title: "Account Number",
                editable: function () { return false },
                width: "200px"
            },
            {
                field: "Balance",
                title: "Balance",
                width: "40px",
                template: "<span>#=getIcon(Balance)#</span>",
                editor: dropdownlist,
                headerTemplate: "<span class='verticalText'>Balance</span>"
            }
 ],
        editable: "incell",
        edit: function (e) {
            var container = e.container;
            var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
            if (dropDownList) dropDownList.open();
        },
        dataSource: {
            transport: {
              read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
            }
        }
    });
}

function dropdownlist(container, options) {
    $('<input id="account-dropdownlist"/>')
        .appendTo(container)
    $("#account-dropdownlist").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: items,
        change: onChange,
        open: onOpen
    });
}

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.

Hello,

I'm running into a problem when trying to use the same dataSource in two different grids on my SPA page.

The following construction in used in the different grids:

{
    field: "_company_id",
    title: "Bedrijf",
    editor: companyComboBox,
    dataSource: dataSourceCompany,
    dataTextField: "name",
    dataValueField: "id"
}

When I leave out the dataSource at one grid, both grids show up, but one grid only shows the _company_id value.

When I use the same code in both grids the second grid will not show, also no errors show up.

Please advice, I've added more info below, more info added.