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 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请求并重新绑定数据。

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

1 个答案: