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:400px"
            items-source="data"
            auto-size-mode="Both"
            child-items-path='["cities", "neighborhoods", "landmarks"]'
            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, neighborhoods: [
                		{ name: 'Downtown', type: 'neighborhood' },
                  	{ name: 'Capitol Hill', type: 'neighborhood' },
                  	{ name: 'Pike Place', type: 'neighborhood', landmarks: [
                    		{ name: 'Public Market Center Signs' },
                        { name: 'Pike Street Station' },
                        { name: 'Post Alley' },
                    	]
                    },
                	]
                },
                { 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 =...