Kendo ui添加新记录时清除过滤器

时间:2019-05-23 02:56:37

标签: javascript kendo-ui kendo-grid

假设我有情况like this。过滤名称示例“ Chai”时,我有一个网格列表列出了所有名称。然后,我不允许单击“添加新记录”。似乎我需要先清除过滤器,然后才能添加一条记录。

当我想在过滤后添加新记录时,如何清除过滤器或刷新网格?

$(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        filterable: {
          extra: false,
          operators: {
            string: {
              contains: "contains",
              startswith: "Start with",
              eq: "Equal to"
            }
          }
        },
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px", editor: customBoolEditor },
            { command: ["edit", "destroy"], title: " ", width: "250px" }],
        editable: "inline",
        edit: function(e){
            if(e.model.isNew()){
              alert("trigger");
              // $("#grid").data("kendoGrid").dataSource.filter([]);
                // $('#grid').data('kendoGrid').refresh();
            }
        },
    });
});

function customBoolEditor(container, options) {
    var guid = kendo.guid();
    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
    $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
}
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.black.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.black.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="example">
            <div id="grid"></div>
        </div>     
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以简单地使用此函数来调用。它将重置过滤器并更新网格

NAMESPACE     NAME                                           READY   STATUS             RESTARTS   AGE
default       constraintpod                                  1/1     Running            1          88d
default       postgres-78f78bfbfc-72bgf                      1/1     Running            0          109m
default       rcsise-krbxg                                   1/1     Running            1          87d
default       spring-boot-postgres-sample-667f87cf4c-858rx   0/1     CrashLoopBackOff   4          110s
default       twocontainers                                  2/2     Running            479        89d
kube-system   coredns-86c58d9df4-kr4zj                       1/1     Running            1          89d
kube-system   coredns-86c58d9df4-qqq2p                       1/1     Running            1          89d
kube-system   etcd-ip-172-31-6-149                           1/1     Running            8          89d
kube-system   kube-apiserver-ip-172-31-6-149                 1/1     Running            1          89d
kube-system   kube-controller-manager-ip-172-31-6-149        1/1     Running            1          89d
kube-system   kube-flannel-ds-amd64-4h4x7                    1/1     Running            1          89d
kube-system   kube-flannel-ds-amd64-fcvf2                    1/1     Running            1          89d
kube-system   kube-proxy-5sgjb                               1/1     Running            1          89d
kube-system   kube-proxy-hd7tr                               1/1     Running            1          89d
kube-system   kube-scheduler-ip-172-31-6-149                 1/1     Running            1          89d