KB - Wijmo 5 - Freeze TreeView Rows/Columns

This sample shows how to freeze rows and columns of a TreeView.

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<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>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Editable Tree</h1>

    <wj-flex-grid
        items-source="treeData" 
        items-source-changed="itemsSourceChanged(s,e)"
        child-items-path="items"
				frozen-columns="1"
				frozen-rows="2"
				headers-visibility="None">
        <wj-flex-grid-column binding="name" header="Name" width="500"></wj-flex-grid-column>
       <wj-flex-grid-column binding="length" header="Length" width="300"></wj-flex-grid-column>
    </wj-flex-grid>

</div>

CSS

.wj-flexgrid {
  max-height: 400px;
}

JavaScript

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

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

    // make rows editable when items source/rows change
    $scope.itemsSourceChanged = function (s, e) {
        $scope.grid = s;
        makeRowsEditable();
        s.rows.collectionChanged.addHandler(makeRowsEditable);
    };
    function makeRowsEditable() {
        var rows = $scope.grid.rows;
        for (var r = 0; r < rows.length; r++) {
            //if (rows[r].hasChildren) { // make rows with no children editable
            	rows[r].isReadOnly = false;
            //}
        }
    }
    
    // hierarchical data
    $scope.treeData = [
        { name: '\u266B Adriane Simione', items: [
            { name: '\u266A Intelligible Sky', items: [
                { name: 'Theories', length: '2:02' },
                { name: 'Giant Eyes', length: '3:29' },
                { name: 'Jovian Moons', length: '1:02' },
                { name: 'Open Minds', length: '2:41' },
                { name: 'Spacetronic Eyes', length: '3:41' }]
            }
        ]},
        { name: '\u266B Amy Winehouse', items: [
            { name: '\u266A Back to Black', items: [
                { name: 'Addicted', length: '1:34' },
                { name: 'He Can Only Hold Her', length: '2:22' },
                { name: 'Some Unholy War', length: '2:21' },
                { name: 'Wake Up Alone', length: '3:43' },
                { name: 'Tears Dry On Their Own', length: '1:25' }]
            },
            { name: '\u266A Live in Paradiso', items: [
                { name: "You Know That I'm No Good", length: '2:32' },
                { name: 'Wake Up Alone', length: '1:04' },
                { name: 'Valerie', length: '1:22' },
                { name: 'Tears Dry On Their Own', length: '3:15' },
                { name: 'Rehab', length: '3:40' }]
            }]
        },
        { name: '\u266B Black Sabbath', items: [
            { name:...