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({});
    }

    });

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

我可以使用Kendo网格实现这一目标吗？

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

SearchBox为每一列Kendo网格

1 个答案: