JSON返回,但Kendo Grid不显示数据

时间:2014-04-26 00:55:49

标签: jquery asp.net-mvc json kendo-grid

我正在尝试创建一个网格层次结构,如下所示:http://demos.telerik.com/kendo-ui/web/grid/hierarchy.html

我的基本结构是我从一个触发detailInit的html表初始化了一个主网格,并生成一个子网格。子网格从控制器方法读取,该方法返回JSON。我已经验证控制器方法返回正确的,有效的JSON,但子网格只显示列标题,表格的行中没有任何数据。我得到的唯一例外是javascript异常:

Uncaught TypeError: undefined is not a function 

控制器方法:

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

返回示例JSON:

{
    "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 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>

从上面定义的表中初始化Kendo Grid:

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

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

将网格绑定到onDataBound函数:

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" }
        ]
    });
}

1 个答案:

答案 0 :(得分:1)

我终于让它工作了,但我仍然不知道为什么我以前的功能没有显示数据。这是我最后的工作职能:

    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" }
              ]
          });
      });


}