Detail grid Error: Index:399 Uncaught TypeError: $(...).appendTo(...).kendoGrid is not a function

[peter]

Grid is coming up fine. the detail page , when I attempt to expand... fails:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            { field: "org_name" },
            { command: ["edit"], width: 180 }
        ],
        toolbar: ["create", "excel"],
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: "ef_org_Read"
                },
                create: {
                    url: "ef_org_Create"
                },
                update: {
                    url: "ef_org_Update"
                }
            },
            schema: {
                data: "Data",
                model: {
                    id: "org_id",
                    fields: {
                        org_id: { type: "number" },
                        org_name: { type: "string" }
                    }
                }
            },
            serverPaging: true,
            serverSorting: true,
            serverSorting: true,
        },
        columnMenu: true,
        editable: "popup",
        pageable: true,
        detailInit: detailInit,
        dataBound: function () {
            this.collapseRow(this.tbody.find("tr.k-master-row").first());
        },
        navigatable: true,
        selectable: "single row",
        sortable: {
            mode: "single"
        },
        filterable: true,
        scrollable: true
    })

    function detailInit(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: "/admin/ef_sites_Read"
                },
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 10,
                filter: { field: "org_id", operator: "eq", value: e.data.org_id }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
                { field: "Name", width: "110px" },
            ]
        });
    }
   
</script>

[Teya]

Hi Peter,

I've pasted the provided code in a Dojo and tried running it by only replacing the dataSource:

https://dojo.telerik.com/OMoDUDot/4

At my end, the detail expands works as expected and I don't seem to be able to reproduce the issue that you're experiencing.

Can you please test the provided Dojo yourself and check whether it works okay for you? If it does, this means that something else might be causing the issue- incorrect loading of scripts, missing scripts, etc. The following documentation about common Kendo UI issues can provide you with some troubleshooting ideas:
 
https://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues

If that does not help, could you please provide us with a runnable example of your setup with a reproducible error? This will help me in fully understand the case, and I will be able to investigate the issue further?

I am looking forward to your reply.


Regards,

Teya
Progress Telerik