如何使用下拉列表过滤剑道UI MVC网格

How to filter a Kendo UI MVC grid using a dropdown list

本文关键字：UI MVC 网格 何使用 下拉列表 过滤      更新时间：2023-09-26

我有一个剑道网格，通过将值从下拉列表推入内置的剑道过滤器来过滤。当我在文本框中输入值并进行搜索时，我可以使用相同的方法搜索网格。这是我的剑道网格和下拉菜单

 @(Html.Kendo().DropDownListFor(model => model.MyObject.ID)
           .Name("Objects").DataTextField("Value").DataValueField("Key")
           .BindTo(@Model.MyObjectList).AutoBind(true)
           .HtmlAttributes(new { id = "selectedObject" })
 <a class="button"  onclick="searchGrid()" id="search">Search</a>                       
@(Html.Kendo().Grid<MyViewModel>()
        .Name("MyGrid").HtmlAttributes(new { style = " overflow-x:scroll;" })
        .Columns(columns =>
        {
           columns.Bound(a => a.MyObject.Name).Title("Field 1");
            columns.Bound(a => a.Column2).Title("Field 2");
        }
        .Pageable(page => page.PageSizes(true))
        .Scrollable(src => src.Height("auto"))
        .Sortable()
        .Filterable()
        .Reorderable(reorder => reorder.Columns(true))
        .ColumnMenu()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
        .Read(read => read.Action("GetList_Read", "MyController"))
        )
    )
  <script>
       function searchGrid()
       {
          selectedObject = $("#selectedObject").data("kendoDropDownList");
          gridFilter = = { filters: [] };
          if ($.trim(selectedRecipient).length > 0) {
        gridListFilter.filters.push({ field: "Field 1", operator: "eq", value: selectedObject});
    }
        }
    var grid = $("#MyGrid").data("kendoGrid");
    grid.dataSource.filter(gridFilter);
  </script>

我的视图模型看起来像

 public class MyViewModel
 {
    public MyObject myObj {get;set;}
    public string Column2 {get;set;}
 }

上面的函数工作时，搜索字段是一个文本框，但它不工作，当我使用下拉。我认为这是因为我将"MyObject"的id推入网格过滤器，而网格则填充了"MyObject"的名称。谁能告诉我怎么修这个。谢谢你! !

我发现有两种方法可以处理这个问题。一种方法是将选定的值推入内置的Kendo Filters，或者将值传递给控制器操作并在服务器端进行过滤。首先将下拉更改事件的选定值存储到一个名为'selectedDropDownValue'的对象

过滤客户端(将值推送到剑道过滤器) 

function searchGrid()
{
   var gridListFilter = { filters: [] };
   var gridDataSource = $("#MyGrid").data("kendoGrid").dataSource;
   gridListFilter.logic = "and";   // a different logic 'or' can be selected
    if ($.trim(selectedDropDownValue).length > 0) {
        gridListFilter.filters.push({ field: "MyObject.MyObjectID", operator: "eq", value: parseInt(selectedDropDownValue) });
    }
   gridDataSource.filter(gridListFilter);
   gridDataSource.read();
}

这将下拉列表的选定值推送到内置的剑道网格过滤器

过滤端

通过添加数据编辑DataSource read行

.Read(read => read.Action("GetApportionmentList_Read", "Apportionment").Data("AddFilter"))
然后创建一个javascript函数来添加过滤器 
function AddFilter()
{
   return {filter:selectedDropDownValue};
}

然后在搜索网格JS函数中以

开始
function searchGrid()
{
   var gridListFilter = { filters: [] };
   var gridDataSource = $("#MyGrid").data("kendoGrid").dataSource;
   gridDataSource.read();
 }

在read调用之后，您仍然可以添加客户端筛选器，应用该筛选器，然后进行读召回。控制器签名应该如下所示

 public JsonResult GetList_Read([DataSourceRequest] DataSourceRequest request, string filter)

过滤器将包含所选

下拉列表的值。

在您的过滤器中设置

 value: selectedObject

但是selectedObject是实际的Kendo DropDownList小部件实例。您需要使用.value()或.text()

从小部件中获取值
selectedObject = $("#selectedObject").data("kendoDropDownList").value();
相关文章：