Child grid not showing records when only one exists

[Steven]

I have a master and child grid that is being displayed.   When the child grid has only one row in it, it does not display any records.   If there are two or more, they become visible.

I have been able to add a second child record and then all of a suddent it shows up.   If I delete the second child record, the grid no longer shows any records.

What am I doing wrong?

Here is the master grid:

_createMasterGrid: function() {

    $(this._renderTo).kendoGrid({

        dataSource: this._masterDS,

        sortable: true,

        pageable: false,

        navigatable: true,

        filterable: true,

        detailInit: $.proxy( function(e) { this._detailInit(e) }, this ),

        columns: [

            { field: "BSROrder.Name", title: "BSROrder", width: 150 },

            { field: "_2", title: "Headcount", width: 250 },

            { field: "_6", title: "FTE", width: 100 },

            { field: "_7", title: "EmployeeName", width: 200},

            { field: "_10", title: "JobCode", width: 50 },

            { field: "_11", title: "JobTitle", width: 50 },

            { field: "_21", title: "JobTitle" }

        ]

    });

 

    return $(this._renderTo).data("kendoGrid");

},

Here is the child grid:

_detailInit: function(e) {

    $("<div/>").appendTo(e.detailCell).kendoGrid({

        dataSource: this._createDetailDS(e),

        scrollable: false,

        sortable: true,

        navigatable: true,

        toolbar: ["create", "save", "cancel"],

        columns: [

            { field: "BSROrder.Name", title: "BSROrder", width: 150 },

            { field: "_2", title: "Headcount", width: 250 },

            { field: "_6", title: "FTE", width: 100 },

            { field: "_7", title: "EmployeeName", width: 200},

            { field: "_10", title: "JobCode", width: 50 },

            { field: "_11", title: "JobTitle", width: 50 },

            { field: "_21", title: "JobTitle" }

        ]

    });

},

 

_createDetailDS: function(e) {

    var ds = new kendo.data.DataSource({

        transport: {

            read: {

                url: this._url + "/BSROrders?BSROrder=MDX:[BSR Order].[" + e.data.BSROrder.ID + "].Children",

                dataType: "json"

            }

        },

        schema: {

            data: "BSROrdersResponse.Results.RowSet.Rows",

            model: {

                id: "BSROrder.ID",

                fields: {

                    "BSROrder.Name": { editable: true, type: "string" },

                    "_2": { editable: true, type: "string" },

                    "_6": { editable: true, type: "string" },

                    "_7": { editable: true, type: "string" },

                    "_10": { editable: true, type: "string" },

                    "_11": { editable: true, type: "string" },

                    "_21": { editable: true, type: "string" }

                }

            }

        }

    });

     

    return ds;

}

[Rosen]

Hi Steven,

I'm afraid that I'm unable to recreate such behavior locally. Therefore, please provide a jsFiddle test page in which this issue can be observed.

Regards,
Rosen
the Telerik team