如何使用下拉列表过滤Kendo UI MVC网格 [英] How to filter a Kendo UI MVC grid using a dropdown list

问题描述

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

I have a kendo grid that is filtered by pushing values from a dropdownlist into the built in kendo filters. I can search the grid using the same method when I type values in a textbox and search. This is my kendo grid and the dropdown

 @(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>

我的视图"模型看起来像

My View model looks like

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

以上功能在搜索字段为文本框时有效，但在使用下拉菜单时不起作用.我认为这是因为在网格中填充了"MyObject"的名称时，我将"MyObject"的ID推送到了网格过滤器中.谁能告诉我如何解决这个问题.谢谢！！

The above function work when the search field is a textbox but it doesnt work when I am using a dropdown. I think it is because I am pushing the id of 'MyObject' into the grid filter while the grid is populated with the name of 'MyObject'. Can anyone show me how I can fix this. Thank you!!

推荐答案

我发现有两种方法可以解决此问题.一种是通过将选定的值推送到内置的Kendo过滤器中，或者将值传递给控制器​​操作并在服务器端进行过滤.首先将下拉转换事件的选定值存储到名为"selectedDropDownValue"的对象中

There are two ways of handling this issue as I've found out. One is by pushing the selected values into the built in Kendo Filters or by passing a value to the controller action and filtering on the server side. First store the selected value of the dropdown on-change event to an object called 'selectedDropDownValue'

过滤客户端(将值推入kendo过滤器)

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

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

This pushes the selected value of the drop down to the built-in kendo grid filter

过滤服务器端

通过添加数据来编辑DataSource读取行

Edit the DataSource read line by adding data

.Read(read => read.Action("GetApportionmentList_Read", "Apportionment").Data("AddFilter"))

然后创建一个JavaScript函数以添加过滤器

Then create a javascript function to add the filter

function AddFilter()
{
   return {filter:selectedDropDownValue};
}

然后在搜索网格JS函数内部以

Then inside the search grid JS function start with

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

在进行读取调用之后，您仍然可以添加客户端过滤器，应用过滤器，然后再进行读取调用. 控制器签名应如下图所示

After the read call you can still add client-side filters, apply the filter and then make the read recall afterwards. The contoller signature should look like this

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

过滤器将包含所选下拉列表的值

filter will contain the value of the drop down selected

这篇关于如何使用下拉列表过滤Kendo UI MVC网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！