调用读取后未填充 Kendo UI Grid答案

【问题标题】：Kendo UI Grid not populating after call to read调用读取后未填充 Kendo UI Grid
【发布时间】：2013-09-13 12:10:18
【问题描述】：

好的，我还有另一个，我确定我又错过了一些简单的东西。使用 json 结果集填充 Kendo Grid。加载由 kendo 下拉列表控件中的选择触发。我可以看到数据是从我的 webapi 返回并转换为 json 结果。但数据并没有显示在网格中。

我错过了什么做错了吗？

以下是网格视图的添加方式：

<div id="messageGridArea">
    @Html.Partial("Messages")
</div>

这里是下拉列表定义：

@(Html.Kendo().DropDownList()
    .Name("importDates")
    .CascadeFrom("clients")
    .OptionLabel("Select Import Date...")
    .DataSource(source => {
        source.Read(read =>
        {
            read.Action("GetDistinctImportDates", "Home").Data("filterImportDates");
        })
        .ServerFiltering(true); 
     })
     .AutoBind(false)
     .Enable(false)
     .Events(e => e.Change("OnImportDatesChanged"))
)

这里是网格参数的过滤器：

function filterGridMessages() {
    return { importdate: $("#importDates").val() };
}

这是填充网格的事件：

function OnImportDatesChanged(e) {
    var grid = $("#clientMessages").data("kendoGrid");
    grid.dataSource.read();
}

这里是网格定义：

@(Html.Kendo().Grid<Pulse.Data.Model.ImportHeader>()
    .Name("clientMessages")
    .AutoBind(false)
    .Filterable()
    .Groupable()
    .Sortable()
    .Pageable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ImportId))
        .ServerOperation(false)
        .Read(read =>
            read.Action("GetImportMessages", "Home").Data("filterGridMessages")
         )
    )
    .Columns(columns =>
    {
        columns.Bound("ImportStatus").Title("I").Width("3%");
        columns.Bound("ImportTime").Title("Import Time");
        columns.Bound("RecordStatus").Title("Status").Filterable(true).Sortable(true).Width("7%");
        columns.Bound("RecordState").Title("State").Filterable(true).Sortable(true).Width("7%");
        columns.Bound("RecordAction").Title("Action").Filterable(true).Sortable(true).Width("7%");                
    })
)

最后是读取数据的控制器代码：

public JsonResult GetImportMessages(string importdate)
{
    IEnumerable<ImportHeader> messages = null;
    var msgs = client.GetStringAsync(string.Format("api/importheaders?$filter=RecordSource eq '{0}'", importdate)).Result;
    if (!string.IsNullOrWhiteSpace(msgs))
        messages = JsonConvert.DeserializeObject<IEnumerable<ImportHeader>>(msgs);
    return Json(messages, JsonRequestBehavior.AllowGet);
}

【问题讨论】：

标签： c# .net kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

网格需要 DataSourceResult。

你应该得到这样的东西（没有测试过）：

public JsonResult GetImportMessages([DataSourceRequest] DataSourceRequest request, string importdate)
{
    IEnumerable<ImportHeader> messages = null;

    var msgs = client.GetStringAsync(string.Format("api/importheaders?$filter=RecordSource eq '{0}'", importdate)).Result;
    if (!string.IsNullOrWhiteSpace(msgs))
        messages = JsonConvert.DeserializeObject<IEnumerable<ImportHeader>>(msgs);

    return Json(messages.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

【讨论】：