MVC Kendo Grid Custom Filter

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

Solution

Yes we need to define specified filter functions in javascript like 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

Problem

Basically, I am looking for the MVC version of this demo: http://demos.telerik.com/kendo-ui/grid/filter-menu-customization Here is what I currently have: ``` .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" }); ``` Do I still reference the javascript, or is there another approach? ``` <script type="text/javascript"> function SearchFunctionFilter(element) { element.kendoDropDownList({ dataSource: searchfunctions(), optionLabel: "--Select Value--" }); } </script> ```

Original source