CODEWITHSUNDEEP
javascriptjquerykendo-uitelerikkendo-grid
Alex McManns
Alex McManns

Reputation: 267

How to detect a filtering is done in Kendo?

After filtering being done, I have to select a second page/do something. How can I detect it?

Thank you!

Upvotes: 0

Views: 627

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
    <script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
    <script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 550,
                filterable: true,
                dataBinding: onDataBinding,
                sortable: true,
                pageable: true,
                columns: [{
                    field: "OrderID",
                    filterable: false
                },
                    "Freight",
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                    }, {
                        field: "ShipName",
                        title: "Ship Name"
                    }, {
                        field: "ShipCity",
                        title: "Ship City"
                    }
                ]
            });
        });
        function onDataBinding(arg) {
            if ($("#grid").data("kendoGrid").dataSource.filter()) {
                alert("Filter has been applied to grid");
            }
            else {
                alert("Filter has NOT been applied to gridNo filter");
            }
        }
    </script>
</body>
</html>

Let me know if any concern.

Upvotes: 1

Related Questions