Question

137

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

rated 0 times [ 143] [ 6] / answers: 1 / hits: 18051 / 10 Years ago, fri, may 23, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

robinh

Add To Favorites

Follow

Total Points: 371

Total Questions: 105

Total Answers: 89

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

answered 10 Years ago dequant · Accepted Answer

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