Kendo Grid / DropDownList组合中缺少什么？

菲尔·惠勒

似乎是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;
    });
}

总是有一些非常简单的事情引起此类问题，但我看不到森林茂盛。任何帮助表示赞赏。

菲尔·惠勒

破解了。

需要告知Kendo Grid数据源以期望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请求并重新绑定数据。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。