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

javascript, kendo-asp.net-mvc, kendo-grid, kendo-ui

Solution

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'

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

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

Then create a javascript function to add the filter

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

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

Problem

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

Original source