Поле поиска для каждого столбца сетки Кендо - PullRequest
Новая
       11

Поле поиска для каждого столбца сетки Кендо

0 голосов
/ 06 июня 2018

Я использую сетку кендо на странице

enter image description here

Я использую это окно поиска на панели инструментов сетки.Это решается следующим образом: 

@(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.enter image description here

Можно ли добиться этого с помощью сетки Кендо?

1 Ответ

0 голосов
/ 07 июня 2018

Он называется «Строка сетки / фильтра» и доступен для Kendo ASP.NET MVC.Это приходит как из коробки особенность.

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

...

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

Демонстрационный и полный образцы кода

...