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

Posted 2023-05-07

【中文标题】在下拉选择的索引更改事件上刷新 Kendo UI 网格

【英文标题】：Refresh Kendo UI grid on dropdown selected index change event

【发布时间】：2014-06-10 02:38:53

【问题描述】：

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

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);
    

【参考方案1】：

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

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

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

如果您想访问 Kendo ListView，您应该这样做：$("#elem_id").data("kendoListView");（作为包含 ListView 的 HTML 元素的 elem_id id）。 如果是下拉列表，那么你应该做$("#elem_id").data("kendoDropDownList"); 等等……

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

【讨论】：

我进行了更改，但没有成功。下拉选择更改事件时网格仍然不刷新

【参考方案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)