Question

在Kendo UI中，我希望自定义列过滤器只在每列上有一个文本框，而没有任何菜单，操作符和按钮。当用户在文本框中键入内容时，我必须在服务器端执行“包含”过滤器。最简单的方法是什么？

Answer 1

看看这个JSBin，我认为它实现了你想要的功能 http://jsbin.com/equwes/1/edit

Answer 2

您将很难在常规行中执行此操作。使用Headers，您可以将AutoComplete或常规输入置于更改时触发与this demo中的DropDownList类似的逻辑。 DropDownList位于ToolBar模板中，但可以在列标题模板中实现相同的目的。

Answer 3

我们发现剑道没有任何完全内置的支持，因此通过扩展来定制剑道网格。我们为每列添加了文本框，并实现了包含过滤器。

Answer 4

这与您描述的完全不同，但如果您需要，可以在网格上方或网格上的工具栏模板中添加搜索框，您可以使用以下代码：

     $("#txtSearcg").on("keypress blur change", function () {
        var filter = { logic: "or", filters: [] };
        $searchValue = $(this).val();
        if ($searchValue) {
            $.each($("#grid").data("kendoGrid").columns, function( key, column ) {
                if(column.filterable) { 
                    filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});
                }
            });
        }
        $("#grid").data("kendoGrid").dataSource.query({ filter: filter });
    });

其中txtSearch是您正在使用的搜索输入的ID。我从jQuery Datatables插件切换到Kendo UI Grid后创建了这段代码。我喜欢剑道，但真的错过了DataTables提供的全球搜索文本框。我在所有的Kendo网格上都包含了这段代码。同样，不完全是您描述的内容，这将是一个搜索框，将搜索所有标记为可过滤的列。

Answer 5

我修改了G Siry的答案。它不需要修改，适用于任何网格。只需将#grid替换为您的网格ID：

    var tr = $("<tr/>");
    tr.appendTo($("#grid thead"));
    $("#grid thead th").each(function (index) {
        var th = $(this);
        if (th.data("field")) {
            tr.append($("<th data-field='" + th.data("field") + "' class='k-header'><input class='k-textbox' /></th>"));
        }
        else
            tr.append($("<th/>"));
    });
    tr.find("input").keyup(function () {
        grid.dataSource.filter({
            operator: "contains",
            value: $(this).val(),
            field: $(this).parent("th").data("field")
        });
    });

Answer 6

只需要清除kendoAutoComplete配置

columns: [
            {
                field: 'Name', title: 'Name',
                filterable: {
                    cell: {
                        template: function (container) {
                            container.element.kendoAutoComplete()
                        },
                        showOperators: false
                    }
                }
            }
        ]

在Kendo UI自定义列过滤器中，每列只有一个文本框，没有任何菜单，操作符和按钮

6 个答案: