在下拉选择的索引变化事件中刷新Kendo UI网格。

Question

对不起，我又问了这个常见的问题，但我真的有几点不明白。所以，我有这个网格，是我用Telerik Kendo UI生成的，这是一个非常简单的网格，我在页面上有这个组合框，它作为独立的控件放在网格外面。这是一个非常简单的网格，我在页面上有这个组合框，它作为一个独立的控件在网格之外。当然，这又是一个Telerik Kendo UI ComboBox控件。现在，我正试图实现一个场景，当用户改变Combobox上的选择时，我想把选择值传递给动作方法并相应地刷新网格。

剑道UI网格在下拉选择时重新刷新。

如何刷新剑道UI网格

重装刷新剑道网

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

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

现在我无法理解的是，上面这个粗体字 "kendoGrid "代表什么，即 "data "方法的参数应该是什么？

我已经为我的应用程序实现了下面这段代码，但不幸的是，它没有工作。谁能指点一下，我到底遗漏了什么，如何修正这段代码，让它正常工作。

@(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网格是 DefectGrid 所以你应该使用。

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

你不应该修改 kendoGrid 因为你想更新的Widget是一个 剑道网格.

• 如果你想访问Kendo ListView，你应该这样做。$("#elem_id").data("kendoListView"); (被 elem_id 的 id 的HTML元素）。)
• 如果它是一个DropDown List，那么你应该做以下操作 $("#elem_id").data("kendoDropDownList");
• 等等...

当KendoUI创建一个Widget时，它存储了一个引用到 对象 中持有该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)