【问题标题】:Search any kendo grid field regardless of it's column name搜索任何剑道网格字段,无论其列名如何
【发布时间】:2021-07-22 22:19:58
【问题描述】:

是否可以搜索所有列而不单独列出它们?我的问题是会定期添加新列,我不想每次都回来添加列标题。例如,在下面的代码中,而不是列出“姓名”、“电话”、“电子邮件”等。是否有一些代码可以用来基本上说明该列是否存在以将其包含在过滤器中?

提前致谢!

$(document).ready(function () {
    $("#FieldFilter1").keyup(function () {

        var value = $("#FieldFilter1").val();
        grid = $("#UnclaimedLeadsGrid").data("kendoGrid");

        if (value) {
            grid.dataSource.filter({
                logic: "or",
                filters: [
                    { field: "Name", operator: "contains", value: value },
                    { field: "Phone", operator: "contains", value: value },
                    { field: "Email", operator: "contains", value: value },
                    { field: "Address", operator: "contains", value: value },
                    { field: "City", operator: "contains", value: value },
                    { field: "State", operator: "contains", value: value },
                    { field: "ZipCode", operator: "contains", value: value },
                    { field: "Subject", operator: "contains", value: value },
                    { field: "Message", operator: "contains", value: value },
                    { field: "FirstName", operator: "contains", value: value },
                    { field: "LastName", operator: "contains", value: value }
                ]
            });
        } else {
            grid.dataSource.filter({});
        }
    });
});

【问题讨论】:

    标签: asp.net-mvc kendo-ui kendo-grid


    【解决方案1】:

    这听起来像是Search Panel 的工作。

    您将Search Panel 作为toolbar 选项添加到网格中:

    toolbar: ["search"]
    

    搜索框将出现在网格的右上角。搜索将对网格中的所有列运行“包含”过滤器。

    这是上面链接的演示页面中的示例:

    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                toolbar: ["search"],
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                        "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                        "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多