MVC Kendo 网格自定义过滤器

Question

基本上，我正在寻找这个演示的 MVC 版本：

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

这是我目前拥有的：

.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" });

我仍然引用javascript，还是有其他方法？

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

Answer 1

是的，我们需要在 javascript 中定义指定的过滤器函数，如下所示。

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

看这个

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

Answer 2

马尔坎的答案应该有效。您所需要做的就是在每列上都有一个单独的过滤器。只需将“可过滤”列替换为您喜欢的任何内容即可：

    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
        .ForString(str => str.Clear()
            .StartsWith("Starts with")
            .IsEqualTo("Is equal to")
            .IsNotEqualTo("Is not equal to")
        ))
    )   

Answer 3

MVC版本的演示：

    .Columns(columns =>
    {
        columns.Bound(e => e.ID)
            .Hidden();
        columns.Bound(e => e.SearchFunctionCode)
            .Hidden();
        columns.Bound(e => e.SearchFunctionDesc)                
            .Title("Search Function")
            .Filterable(filterable => filterable.UI("SearchFunctionFilter"))
            .HtmlAttributes(new { style = "text-align: center" })
            .HeaderHtmlAttributes(new { style = "text-align: center" });

})

对于 JavaScript 函数：

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

此方法允许您使用 SearchFunctionFilter JavaScript 函数为“搜索功能”列定义自定义过滤器 UI。确保您已在项目中包含 Kendo UI 和 jQuery 所需的 JavaScript 文件，并适当地引用它们。