FlexGrid Filter

Filter Hierarchical data

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
    
        <h1>FlexGrid: Tree View</h1>
        <h2>Filtering on Hierarchical Data</h2>
        
        <p>
        	<input ng-model="filter">
        </p>
        <wj-flex-grid
            control="flex"
            style="height:260px;width:320px"
            items-source="data"
            child-items-path="cities"
            headers-visibility="Column">
        </wj-flex-grid>

	</div>

JavaScript

'use strict';

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // some hierarchical data
    var data = [
        {
            name: 'Washington', type: 'state', population: 6971, cities: [
                { name: 'Seattle', type: 'city', population: 652 },
                { name: 'Spokane', type: 'city', population: 210 }
            ]
        },
        {
            name: 'Oregon', type: 'state', population: 3930, cities: [
                { name: 'Portland', type: 'city', population: 609 },
                { name: 'Eugene', type: 'city', population: 159 }
            ]
        },
        {
            name: 'California', type: 'state', population: 38330, cities: [
              { name: 'Los Angeles', type: 'city', population: 3884 },
              { name: 'San Diego', type: 'city', population: 1356 },
              { name: 'San Francisco', type: 'city', population: 837 }
            ]
        }
    ];

    $scope.data = new wijmo.collections.CollectionView(data);

    // update row visibility when filter changes
    $scope.$watch('filter', function() {
        updateRowVisibility();
    });

    // update row visibility
    function updateRowVisibility() {
        var rows = $scope.flex.rows,
            filter = $scope.filter.toLowerCase();
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i],
                state = row.dataItem,
                rng = row.getCellRange();

            // handle states (level 0)
            if (row.level == 0) {

                // check if the state name matches the filter
                var stateVisible = state.name.toLowerCase().indexOf(filter) >= 0;
                if (stateVisible) {

                    // it does, so show the state and all its cities
                    for (var j = rng.topRow; j <= rng.bottomRow; j++) {
                        rows[j].visible = true;
                    }

  ...