调用读取后未填充 Kendo UI Grid

Posted

技术标签:

【中文标题】调用读取后未填充 Kendo UI Grid【英文标题】:Kendo UI Grid not populating after call to read 【发布时间】: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);

【问题讨论】:

【参考方案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);

【讨论】:

以上是关于调用读取后未填充 Kendo UI Grid的主要内容,如果未能解决你的问题,请参考以下文章

获取 Kendo UI Grid 中使用的过滤器

Kendo UI Grid 自定义过滤器菜单在第一次过滤或清除后中断

Kendo UI Web Grid、虚拟滚动和动态复选框

Kendo UI Grid:如果有任何未决更改,则无法拦截和取消排序事件

Kendo UI Grid添加新记录而不是将数据发布到服务器端

如何使用嵌套 Json 填充 Kendo UI 网格?