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

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

@(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”的名称。任何人都可以告诉我如何解决这个问题。谢谢！！

来源

2014-05-23 Sophonias

有，因为我已经找到了处理这个问题两个方面widget的。一种方法是将选定的值推入内置的Kendo过滤器中，或者将值传递给控制器操作并在服务器端进行过滤。第一下拉平变化事件的设定值存储到名为“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(); 
}

这推动液滴的选定值到内置的剑道电网滤波器

过滤服务器端

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

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

过滤器将包含向下选择

来源

2014-06-12 19:25:40 Sophonias

在您的过滤器正在设置

value: selectedObject

但selectedObject是实际的剑道的DropDownList控件实例。你需要得到数值超出使用.value()或.text()

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

来源

2014-05-24 00:13:00 CodingWithSpike

感谢您的帮助下降的值。尽管我无法使用提供的答案来解决问题，但这仍然是一个问题。 – Sophonias

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

回答

相关问题