Uncaught Type error: m is not a function
0 Answers 13 Views
Top achievements
Rank 1
Peter asked on 03 Jun 2021, 07:33 PM | edited on 07 Jun 2021, 02:07 PM

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:

        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"/>')
        dataTextField: "text",
        dataValueField: "value",
        dataSource: items,
        change: onChange,
        open: onOpen

The provided information is not enough for me to completely understand the scenario and to try to reproduce it locally. Could you please provide a small runnable Dojo example where I can observe the problem? Or provide code snippets with the initial Grid configuration? I will then try to create a mockup that reproduces the issue.
- by
Telerik team
on 08 Jun 2021, 10:24 AM

I was able to pinpoint what was causing the issue. I am using two separate dropdownlists as editor templates, one in each grid. The template names that I attempted to use were identical without me realizing - both called "dropdownlist". Changing the template names to be distinguished for each grid seems to have fixed the error.
- by
Top achievements
Rank 1
on 10 Jun 2021, 05:14 PM

No answers yet. Maybe you can help?

Share this question