Kendo Grid / DropDownList 组合缺少什么？

Question

似乎是 Kendo 网格的常见问题，但是呈现到工具栏中的下拉菜单需要向服务器发出 Ajax 请求并根据返回的数据刷新网格。我可以在 Fiddler 中看到 Ajax 调用已成功执行并且数据肯定会返回，但我们没有在网格上刷新任何内容。

查看代码如下：

<div class="grid-validation-error" id="unitgrid-validation-error">
</div>

  @(Html.Kendo()
  .Grid(Model)
  .Name("WheelchairAlertsGrid")
  .Sortable()
  .Scrollable(scr => scr.Height("100%"))
  .Filterable()
  .ToolBar(t => t.Template(
      @<text>
        <div class="toolbar">
            <label class="category-label" for="category">Show alerts for:</label>
            @(Html.Kendo().DropDownList()
                        .Name("filter-periods")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .OptionLabel("Month")
                        .Events(e => e.Change("filterPeriodChange"))
                        .BindTo(new List<SelectListItem>(){ 
                            new SelectListItem{ Text = "Day", Value = "Day" }, 
                            new SelectListItem{ Text = "Week", Value = "Week" },
                            new SelectListItem{ Text = "Month", Value = "Month" } })
            )

        </div>
      </text>
      ))
  .Pageable(paging => paging.Messages(msg => msg.Display(ResourceManager.RetrieveResource("PagingFormat"))))
  .Columns(
      col =>
      {
          col.Bound(um => um.SerialNumber).Width(150).Title("Wheelchair").ClientTemplate
             (
                 "<a href='" +
                 Url.DealerGroupAction("Index", "Wheelchair") +
                 "/#= WheelchairDataAssignmentId #'>#= SerialNumber #" + "</a>"
             );
          col.Bound(um => um.Name).Width(150);
          col.Bound(um => um.ChargeAlert).Width(60);
          col.Bound(um => um.BatteryAbuse).Width(60);
          col.Bound(um => um.Flash).Width(60);
          col.Bound(um => um.Transmission).Width(60);
          col.Bound(um => um.DealerGroup).Width(100);
      })
)

这里是刷新数据的JS代码（注释掉了各种变体，也已经尝试但未能产生结果）：

function filterPeriodChange(e) {

  var ddl = $('#filter-periods').data('kendoDropDownList');
    var grid = $('#WheelchairAlertsGrid').data("kendoGrid");
    $.getJSON('@Url.DealerGroupWheelChairAlertsApiUrl("WheelchairAlerts")', { filterPeriod: ddl.value() }, function (data) {
        grid.dataSource = data;
    });
}

总是有一些非常简单的事情导致了这类问题，但我只见树木不见森林。感谢任何帮助。

Answer 1

破解了。

需要告知 Kendo 网格数据源期望 Ajax 内容。所以代码应该如下所示：

... other stuff as above
.DataSource(ds => ds
    .Ajax()
    .PageSize(20)
)

下一个难题是确保在获取数据后正确设置数据源：

function filterPeriodChange(e) {

    var ddl = $('#filter-periods').data('kendoDropDownList');
    var grid = $('#WheelchairAlertsGrid').data("kendoGrid");

    $.getJSON('@Url.DealerGroupWheelChairAlertsApiUrl("WheelchairAlerts")', { filterPeriod: ddl.value() }, function (data) {
        var dataSource = new kendo.data.DataSource({
            data: data.Data,
            pageSize: 20
        });

        grid.setDataSource(dataSource);
    });

}

这似乎解决了问题。现在，在顶层更改我的下拉列表会调用我的 filterPeriodChange 方法，触发 Ajax 请求并重新绑定数据。

Kendo Grid / DropDownList 组合缺少什么？

What's missing in this Kendo Grid / DropDownList combination?

ajax

asp.net-mvc

kendo-grid

kendo-dropdown