Kendo Grid Custom MVC Filter

Question

Basically, I'm looking for the MVC version of this demo:

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Here is what I have now:

.Columns(columns => { columns.Bound(e => e.ID) .Hidden(); columns.Bound(e => e.SearchFunctionCode) .Hidden(); columns.Bound(e => e.SearchFunctionDesc) .Title("Search Function") .Filterable( *** WHAT GOES HERE? *** ) .HtmlAttributes(new { style = "text-align: center" }) .HeaderHtmlAttributes(new { style = "text-align: center" }); 

Am I still referring to javascript, or is there another approach?

 <script type="text/javascript"> function SearchFunctionFilter(element) { element.kendoDropDownList({ dataSource: searchfunctions(), optionLabel: "--Select Value--" }); } </script> 

Answer 1

Yes, we need to define specific filter functions in javascript, as shown below.

 .Columns(columns => { columns.Template(@<text>@item.FirstName @item.LastName</text>) .ClientTemplate("#=FirstName# #=LastName#") .Title("Name"); columns.Bound(e => e.City) .Filterable(filterable => filterable.UI("cityFilter")) .Width(200); columns.Bound(e => e.Title) .Filterable(filterable => filterable.UI("titleFilter")) .Width(350); }) .Filterable(filterable => filterable .Extra(false) .Operators(operators => operators .ForString(str => str.Clear() .StartsWith("Starts with") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") )) ) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("FilterMenuCustomization_Read", "Grid")) ) ) <script type="text/javascript"> function cityFilter(element) { element.kendoDropDownList({ dataSource: { transport: { read: "@Url.Action("FilterMenuCustomization_Cities")" } }, optionLabel: "--Select Value--" }); } function titleFilter(element) { element.kendoAutoComplete({ dataSource: { transport: { read: "@Url.Action("FilterMenuCustomization_Titles")" } } }); } </script> 

see this

http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization