JSON returned, but Kendo Grid does not display data

Question

I am trying to create a grid hierarchy as shown here: http://demos.telerik.com/kendo-ui/web/grid/hierarchy.html.

My basic structure is I have a main grid initialized from an html table that fires detailInit, and produces a child grid. The child grid reads from a controller method, which returns JSON. I have verified that the controller method is returning the correct, valid JSON, but the child grid only shows the column titles, without any data in the table's rows. The only exception I am getting is a javascript exception:

Uncaught TypeError: undefined is not a function 

Controller method:

        public JsonResult GetDBA(string DBAName, [DataSourceRequest] DataSourceRequest request)
    {
        return Json(repository.DBAs
            .Where(m => m.DBAName == DBAName)
            .ToDataSourceResult(request));
    }

Example JSON returned:

{
    "Data": [
        {
            "DBAId": 25,
            "DBAName": "adam's hotdog store",
            "LegalEntity": "adam",
            "BusinessPhone": "1234567890",
            "AlternatePhone": null,
            "EmailAddress": "test@email.com",
            "Address": null,
            "EIN": null,
            "DBAs": null,
            "Products": [],
            "ProductsList": null,
            "SelectedProductIds": null
        }
    ],
    "Total": 1,
    "AggregateResults": null,
    "Errors": null
}

Table, which forms the DataSource for the main grid:

    <table id ="grid">
    <thead>
        <tr>
            <th data-field="DBAName">
                DBA
            </th>
            // ...
        </tr>
    </thead>
    <tbody>
        @foreach (AppStatus.Domain.Entities.Contract contract in Model) {
            <tr>
                <td>@contract.DBA.DBAName</td>
                //...
            </tr>

        }
   </tbody>
</table>

Initialize the Kendo Grid from the table defined above:

<script>
        $(document).ready(function () {

            $("#grid").kendoGrid({
                sortable: true,
                dataSource: {
                    schema: {
                        model: {
                            fields: {
                                Aging: {type: "number"}
                            }
                        }
                    },
                    pageSize: 8
                },
                detailInit: detailInit,
                pageable: true,
                resizable: true
            });

Bind the grid to the onDataBound function:

function onDataBound(e) {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
}
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", onDataBound);

detailInit:

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    type: "POST",
                    url: "/Admin/GetDBA",
                    data: {"DBAName": e.data.DBAName}

                }

            }
        },
        columns: [
            { field: "LegalEntity" },
            { field: "BusinessPhone" },
            { field: "AlternatePhone" }
        ]
    });
}

Answer 1

I finally got it to work, but I still have no idea why my previous function was not displaying data. Here is my final, working function:

    function detailInit(e) {

    $.ajax({
        type: "POST",
        url: "/Admin/GetDBA",
        data: { DBAName: e.data.DBAName }
    })
      .done(function (data) {
          $("<div/>").appendTo(e.detailCell).kendoGrid({
              dataSource: data.Data,
              columns: [
                  { field: "LegalEntity" },
                  { field: "BusinessPhone" },
                  { field: "AlternatePhone" }
              ]
          });
      });


}