This is a migrated thread and some comments may be shown as answers.

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

1 Answer 27 Views
Grid
This is a migrated thread and some comments may be shown as answers.
peter
Top achievements
Rank 1
peter asked on 13 Dec 2018, 06:48 PM

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>

1 Answer, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 14 Dec 2018, 01:38 PM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
peter
Top achievements
Rank 1
Answers by
Teya
Telerik team
Share this question
or