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

Question

很抱歉再次提出这个常见问题，但我真的无法理解几点。所以，我有这个使用 Telerik Kendo UI 生成的网格。这是一个非常简单的网格，我在页面上有这个组合框，它作为独立控件位于网格之外。当然，这又是一个 Telerik Kendo UI ComboBox 控件。现在，我正在尝试实现一个场景，当用户更改 Combobox 上的选择时，我想将选择值传递给操作方法并相应地刷新网格。我参考了一些关于 StackOverflow 的文章，我发现了这些有用的链接，

Kendo UI 网格刷新下拉选择

如何刷新 Kendo UI 网格

重新加载/刷新剑道网格

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

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

由于id您的 Kendo UI Grid 是DefectGrid这样，您应该使用：

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

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

• 如果您想访问剑道的ListView你应该做的：$("#elem_id").data("kendoListView");（是elem_id的id，包括ListView控件的HTML元素）。
• 如果它是一个下拉列表，那么你应该这样做 $("#elem_id").data("kendoDropDownList");
• 等等...

当KendoUI创建一个Widget，它存储到一个参考对象保持的方法和专用数据到该小部件data。这不是 KendoUI 特有的，而是继承自jQuery（请参阅data 此处有关 jQuery 的文档）。