Kendo ui очистить фильтр при добавлении новой записи - PullRequest
Новая
       27

Kendo ui очистить фильтр при добавлении новой записи

1 голос
/ 23 мая 2019

Предположим, у меня была ситуация , как это .У меня был список всех имен в сетке, когда я отфильтровал пример имени «Чай».Тогда я не разрешаю нажимать «Добавить новую запись».Кажется, мне нужно сначала очистить мой фильтр, и он позволяет мне добавить запись.

Итак, как я могу очистить фильтр или обновить сетку, когда я хочу добавить новую запись после фильтрации? 

$(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 голосов
/ 23 мая 2019

вы можете просто вызвать функцию с этим.Это сбросит фильтр и обновит сетку 

$("#grid").data("kendoGrid").dataSource.filter({});
...