Unable to get value of the property 'dataSource': object is null or undefined when trying to add a row to a kendo detail grid

Question

I get the error when trying to add a row to the child grid of a kendo hierarchical grid. You can see on this JS Fiddle sample

Expand a row then click any of the checkboxes to attemp the row add. The error shows up on the console.

The child grid looks like this:

function InductedTasksDetailInit(e) {
$("<div class='ob-child-grid' id='childGrid" + e.data.EmployeeID + "' />").appendTo(e.detailCell).kendoGrid({
    dataSource: {
        data: [],
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        type: "odata",

        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 5,
        schema: {
            model: {
              id: "OrderID",
              fields: {
                OrderID: {
                },
                Select: {
                },
                ShipCountry: {
                }
              }
            }
          },              
        filter: { 
            field: "OrderID", operator: "lt", value: 10251 }
    },
    selectable: false,
    columns: [            
        { field: "OrderID", width: "70px" },
        { field: "ShipCountry", title:"Ship Country", width: "110px" }
    ]
});
}

Thanks for the help, I'm really not sure why this is happening.

Answer 1

In your function moveParentRowTo, you're returning the grid for the element with id

'#InductedTasksDetailGrid_' + data.EmployeeID

but the grid element actually has the id

'#childGrid' + data.EmployeeID

I updated your example: http://jsfiddle.net/765pJ/21/

Also: you should use jQuery.on() instead of delegate() now.