在下拉选择的索引更改事件上刷新 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

由于您的 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 中存储对对象的引用，该对象保存该 Widget 的方法和私有data 。 这不是 KendoUI 特有的，而是从jQuery继承而来的（请参阅此处有关 jQuery data文档）。

Answer 2

您的网格读取事件：

 .Read(read => read.Action("My_Read", "Admin").Data("combodata"))

您的更改事件功能：

function selectedIndexChanged() {
                var grid = $("#DefectGrid").data("kendoGrid");

                grid.dataSource.read(); // rebind the Grid's DataSource
            }

并添加此功能

 function combodata(e) {

                var value = $("#ddlProject").data("kendoDropDownList").value();
                return { ID: value };
                }

编辑：不要忘记在控制器中读取 id

 public ActionResult my_Read([DataSourceRequest] DataSourceRequest request,int ID)