javascript - 在下拉选择的索引更改事件上刷新 Kendo UI 网格

Question

不好意思再问这个常见的问题，有几点我实在是听不懂。所以，我有这个网格，它是我使用 Telerik Kendo UI 生成的。这是一个非常简单的网格，我在页面上有这个组合框，它作为独立控件位于网格之外。当然，这又是一个 Telerik Kendo UI ComboBox 控件。现在，我正在尝试实现一个场景，当用户更改 Combobox 上的选择时，我想将选择值传递给操作方法并相应地刷新网格。我引用了几篇关于 StackOverflow 的文章，并找到了这些有用的链接，

Kendo UI Grid Refesh on Dropdown Selection

How to refresh the Kendo UI grid

Reloading/refreshing Kendo Grid

所有这些链接都提供了这个代码行，它将在客户端刷新网格，

var grid = $("#Product").data("**kendoGrid**");
grid.dataSource.read();

现在我无法理解上面的粗体词“kendoGrid”代表什么，即“数据”方法的参数应该是什么？

我已经为我的应用程序实现了以下代码，但遗憾的是，它无法正常工作。 任何人都可以指出我遗漏了什么以及如何修复此代码以使其正常工作，

@(Html.Kendo()
        .DropDownList()
        .Name("ddlProject")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
         {
              source.Read(read => { read.Action("GetProjectsForCurrentUser", "Home"); });
         })
         .OptionLabel("Select a Project")
         .HtmlAttributes(new { style = "width:200px;height:20px;" })
                                  .Events(e => e.Change("selectedIndexChanged")))

@Html.Action("LoadDefects")

@(Html.Kendo()
      .Grid(Model)
      .Name("DefectGrid")
      .Columns(columns =>
      {
          columns.Bound(d => d.DefectId).Title("ID").Width("5%");
          columns.Bound(d => d.Title).Title("Title").Width("20%");
          columns.Bound(d => d.Severity).Title("Severity").Width("10%");
          columns.Bound(d => d.Status).Title("Status").Width("10%");
          columns.Bound(d => d.Description).Title("Description").Width("20%");
          columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
          columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
      })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(200))
      .DataSource(dataSource => dataSource
                                          .Ajax()
                                          .Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid"))
                                          .PageSize(20)
                                          .ServerOperation(false))


var dataItem;

function refreshGrid() {
    return {
        selectedProject: dataItem
    };
}

function selectedIndexChanged(e) {
    dataItem = this.dataItem(e.item.index());
    var grid = $("#grid").data("kendoGrid");
    alert(grid);
    grid.dataSource.read();
    return;
}

    [ChildActionOnly]
    public ActionResult LoadDefects(string selectedProject = "")
    {
        var defectList = dBO.GetDefects(2, "2").ToList();
        for (int i = 0; i < 100; i++)
        {
            defectList.Add(defectList[0]);
        }
        return PartialView(defectList);
    }

Answer 1

因为你的 Kendo UI Grid 的 id 是 DefectGrid 所以你应该使用:

var grid = $("#DefectGrid").data("kendoGrid");
grid.dataSource.read();

您不应修改 kendoGrid，因为您要更新的 Widget 是一个 kendoGrid。

• 如果您想访问 Kendo ListView，您应该这样做:$("#elem_id").data("kendoListView");(elem_id 包含 ListView 的 HTML 元素的 ID)。
• 如果它是一个下拉列表，那么你应该做 $("#elem_id").data("kendoDropDownList");
• 等等...

当 KendoUI 创建一个 Widget 时，它会在 data 中存储一个对 object 的引用，该 object 包含该 Widget 的方法和私有(private)数据。这不是 KendoUI 特有的，而是从 jQuery 继承的(请参阅有关 jQuery data here 的文档)。