javascript 如何使用下拉列表过滤 Kendo UI MVC 网格

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

提问by Sophonias

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

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!!

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

回答by Sophonias

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 过滤器中，或者将值传递给控制器​​操作并在服务器端进行过滤。首先将下拉更改事件的选定值存储到名为“selectedDropDownValue”的对象中

Filtering Client Side (Pushing values to kendo filters)

过滤客户端（将值推送到剑道过滤器）

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

这会将下拉选择的值推送到内置的剑道网格过滤器

Filtering Server-side

过滤服务器端

Edit the DataSource read line by adding data

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

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

Then create a javascript function to add the filter

然后创建一个javascript函数来添加过滤器

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

Then inside the search grid JS function start with

然后在搜索网格JS函数里面开始

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

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

回答by CodingWithSpike

In your filter you are setting

在您的过滤器中，您正在设置

 value: selectedObject

but selectedObjectis the actual Kendo DropDownList widget instance. You need to get the value out of the widget using .value()or .text()

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

selectedObject = $("#selectedObject").data("kendoDropDownList").value();