每列剑道网格的搜索框

Question

我在页面上使用剑道网格

我正在使用网格工具栏中的搜索框。 是这样解决的：

@(Html.Kendo().Grid<GGISServices.Models.Model>()
    .Name("grid")
    .HtmlAttributes(new { @class = "newGrid" })
    .Columns(columns =>
    {....}
    .ToolBar(toolbar =>
    {
    toolbar.Template(@<text>
        <div class="toolbar">

            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                        <input type="text" class="form-control" id='FieldFilter' placeholder="Cauta...">
                    </div>
                </div>                    
             </div>
        </div>
    </text>);
    })

在 javascript 中我添加了以下代码：

  $("#FieldFilter").keyup(function () {
        var val = $('#FieldFilter').val();
        console.log(val);
        if (val) {
            $("#grid").data("kendoGrid").dataSource.filter({
                logic: "or",
                filters: [
                    {
                        field: "Field1",
                        operator: "contains",
                        value: val
                    },
                    {
                        field: "Field2",
                        operator: "contains",
                        value: val
                    }
                ]
            });
        } else {
            $("#grid").data("kendoGrid").dataSource.filter({});
    }

    });

它工作正常，但现在客户想要不同的搜索，每列都有一个搜索框，就像在这个 DevExpress 网格中一样。

我可以使用剑道网格来实现吗？

Answer 1

它被称为“网格/过滤器行”，可用于 Kendo ASP.NET MVC。它是开箱即用的功能。

@(Html.Kendo().Grid<GGISServices.Models.Model>()
.Name("grid")

...

.Filterable(f=> f.Mode(GridFilterMode.Row))

Demo and Complete sample code