如何使用下拉列表過濾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網格

回答

相關問題