Kendo Grid Filter values

I am currently trying to log any applied filters to the console for use later on. I have the filter section of my grid declaration set up like this:

filterable: true,
    filter: function(e) {
      if (e.filter == null) {
        console.log("filter has been cleared");
      } else {
        console.log(e.filter.logic);
        console.log(e.filter.filters[0].field);
        console.log(e.filter.filters[0].operator);
        console.log(e.filter.filters[0].value);
      }
    }

This is taken directly from the dojo example in the docs. However I am not getting anything logged to the console. I am working in I.E if it helps, I ran the dojo in chrome and it works.

Solution

Please check your IE browser version. From the Kendo official document and the test result on my local. I found that the code works well on my IE browser (IE 9 ~ IE 11). You could try to use F12 developer tools to check whether it contain some error.

Code as below:

<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js" type="text/javascript"></script>
    <div id="example">
        <div id="grid"></div>

        <script>
          var categories = [{
            "value": 1,
            "text": "Beverages"
          },{
            "value": 2,
            "text": "Condiments"
          },{
            "value": 3,
            "text": "Confections"
          },{
            "value": 4,
            "text": "Dairy Products"
          },{
            "value": 5,
            "text": "Grains/Cereals"
          },{
            "value": 6,
            "text": "Meat/Poultry"
          },{
            "value": 7,
            "text": "Produce"
          },{
            "value": 8,
            "text": "Seafood"
          }];

          $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
              pageSize: 20,
              data: products,
              schema: {
                model: {
                  id: "ProductID",
                  fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true} },
                    CategoryID: {
                      field: "CategoryID",
                      type: "number",
                      defaultValue: function(e) {
                        if(typeof this.CategoryID === "function") {
                          var grid = $("#grid").data("kendoGrid");
                          var ds = grid.dataSource;
                          var filter = ds.filter();

                          if(filter && filter.filters[0].field === "CategoryID") {
                            return filter.filters[0].value;
                          } else {
                            return 1;
                          }
                        }
                      }
                    },
                    UnitPrice: { type: "number", validation: { required: true, min: 1} }
                  }
                }
              }
            });

            $("#grid").kendoGrid({
              dataSource: dataSource,
              filterable: true,
              filter: function(e) {
                if (e.filter == null) {
                  console.log("filter has been cleared");
                } else {
                  console.log(e.filter.logic);
                  console.log(e.filter.filters[0].field);
                  console.log(e.filter.filters[0].operator);
                  console.log(e.filter.filters[0].value);
                }
              },
              groupable: true,
              pageable: true,
              height: 540,
              toolbar: ["create"],
              columns: [
                { field: "ProductName", title: "Product Name", filterable: false },
                { field: "CategoryID", width: "200px", values: categories, title: "Category" },
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "200px" , filterable: false},
                { command: "destroy", title: " ", width: "110px"}],
              editable: "popup"
            });
          });
        </script>
    </div>

</body>

the result like this:

Note: please test the code on the local application, instead of using dojo, because, when I using dojo on IE 11, everything works well, but if I change the document mode to IE 10 (via F12 developer tools), it will show some JS error, like this. So, it is better to test your code on the local application.