Count the Hidden Rows after Filtering in Spreadsheet

Environment

Product	Progress® Kendo UI® Spreadsheet for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I count the number of hidden rows after filtering in the Spreadsheet?

Solution

1. Check the total rows count.
2. For every row, check if it is hidden.

<div id="spreadsheet" style="width: 100%"></div>
<script>
    kendo.spreadsheet.Controller.fn.onCommandRequest = function (e) {
        if (e.command) {
          this._execute(e);
        } else {
          this._workbook.undoRedoStack[e.action]();
        }       
        if (e.command === "ApplyFilterCommand") {
            var totalCount = this.view._sheet.toJSON().rows.length;
            var hiddenRows = 0
            // decrease by one due to filter header
            alert(totalCount-1);
            for (var i = 0; i < this.view._sheet.toJSON().rows.length; i++) {
              if (this.view._sheet.isHiddenRow(i)) {
                totalCount--;
                hiddenRows++
              }
            }                  
            alert('hidden: ' + hiddenRows);
        }
    }    


    $(function() {
        $("#spreadsheet").kendoSpreadsheet({
            sheets: [{
                filter: {
                  ref: "A1:C8",
                  columns:[]
                },
                rows: [{
                  cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
                }, {
                  cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
                }, {
                  cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
                }, {                 
                  cells: [{ value: "7" }, { value: "8" }, { value: "9" }]
                }, {
                  cells: [{ value: "10" }, { value: "21" }, { value: "34" }]
                }, {
                  cells: [{ value: "81" }, { value: "27" }, { value: "36" }]
                }, {
                  cells: [{ value: "14" }, { value: "29" }, { value: "73" }]
                }, {                   
                  cells: [{ value: "Lorem ipsum" },
                          { value: "sed do eiusmod" },
                          { value: "Ut enim ad minim" }]
                }]
            }]
        });
    });
</script>