Question

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

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

var grid = $（＆＃34;＃Product＆＃34;）。data（＆＃34; kendoGrid ＆＃34;）; grid.dataSource.read（）;

现在我无法理解的是上面这个大胆的词语＆＃39; kendoGrid＆＃39;代表什么应该是＆＃39;数据＆＃39;的参数。方法

我已经为我的应用程序实现了下面的代码，但不幸的是，它已经工作了。 任何人都可以请指出我错过了什么，如何修复此代码以使其正常工作

@(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网格的id为DefectGrid，因此您应该使用：

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

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

如果您想访问Kendo ListView，您应该：$("#elem_id").data("kendoListView");（elem_id id包含ListView的HTML元素。
如果是DropDown列表，那么您应该$("#elem_id").data("kendoDropDownList");
等......

当KendoUI创建一个Widget时，它会存储对对象的引用，该引用将方法和私有数据保存到data中的该Widget。这不是KendoUI的特定内容，而是继承自jQuery（请参阅有关jQuery的文档data here）。

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)

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

2 个答案: