Javascript 如何使用下拉列表筛选剑道UI MVC网格

Javascript 如何使用下拉列表筛选剑道UI MVC网格,javascript,kendo-ui,kendo-grid,kendo-asp.net-mvc,Javascript,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,我有一个剑道网格,通过将下拉列表中的值推送到内置剑道过滤器中进行过滤。当我在文本框中键入值并进行搜索时,我可以使用相同的方法搜索网格。这是我的剑道格网和下拉列表 @(Html.Kendo().DropDownListFor(model => model.MyObject.ID) .Name("Objects").DataTextField("Value").DataValueField("Key") .BindTo(@Model.MyObjec

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

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

当搜索字段是文本框时,上面的函数可以工作,但当我使用下拉菜单时,它不工作。我想这是因为我正在将'MyObject'的id推入网格过滤器,而网格中填充了'MyObject'的名称。谁能告诉我怎么解决这个问题吗。谢谢

您要在过滤器中设置

 value: selectedObject
但是
selectedObject
是实际的剑道下拉列表小部件实例。 您需要使用
.value()
.text()


我发现有两种方法可以解决这个问题。一种是将所选值推送到内置剑道过滤器中,或者将值传递给控制器操作并在服务器端进行过滤。首先将更改时下拉列表事件的选定值存储到名为“selectedDropDownValue”的对象中

筛选客户端(将值推送到剑道筛选器)

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

筛选服务器端

通过添加数据编辑数据源读取行

.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();
 }
在读取调用之后,您仍然可以添加客户端筛选器,应用筛选器,然后进行读取回调。 控制器签名应该如下所示

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

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

谢谢您的帮助。这是一种问题,尽管我无法使用提供的答案来解决问题。
function AddFilter()
{
   return {filter:selectedDropDownValue};
}
function searchGrid()
{
   var gridListFilter = { filters: [] };
   var gridDataSource = $("#MyGrid").data("kendoGrid").dataSource;
   gridDataSource.read();
 }
 public JsonResult GetList_Read([DataSourceRequest] DataSourceRequest request, string filter)