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

2 posts, 0 answers
  1. peter
    peter avatar
    4 posts
    Member since:
    Feb 2008

    Posted 13 Dec 2018 Link to this post

    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>

  2. Missing user
    Missing user avatar

    Posted 14 Dec 2018 Link to this post

    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.
Back to Top