Wijmo 5 - Editable Tree Grid

by KirillMetrik

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.input.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/controls/wijmo.chart.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" class="container" >

  <h1>
    Editable Tree Grid</h1>
  <p>
    This <b>FlexGrid</b> control uses the <b>childItemsPath</b> property to 
    show some hierarchical data.</p>
  <p>
    By default, hierarchical data is shown on group rows, which are read-only.
    This sample uses the <b>loadedRows</b> event to make the rows editable.</p>
  
  <wj-flex-grid
    items-source="data"
    child-items-path="children"
    headers-visibility="Column"
    selection-mode="Row"
    loaded-rows="loadedRows(s, e)">
    <wj-flex-grid-column binding="name" header="Name" width="100"></wj-flex-grid-column>
    <wj-flex-grid-column binding="date" header="Date" format="dd MMM yyyy" width="100"></wj-flex-grid-column>
    <wj-flex-grid-column binding="amount" header="Amount" format="n2" width="100"></wj-flex-grid-column>
  </wj-flex-grid>
</div>

CSS

.wj-flexgrid {
  max-height: 350px; 
  margin-top:10px;
}
.wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}
.wj-group.wj-cell {
  border: none;
}

JavaScript

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

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

  // create some hierarchical data
  var today = new Date();
  $scope.data = [
  	{ name: 'Joe', amount: 123, date: today, children: [
    		{ name: 'Johnny', amount: 12, date: today},
    		{ name: 'Bobby', amount: 122, date: today}
		] },
  	{ name: 'Bob', amount: 123, date: today, children: [
    		{ name: 'Cindy', amount: 12, date: today },
    		{ name: 'Suzy', amount: 122, date: today }
    ] },
  	{ name: 'Sue', amount: 123, date: today, children: [
    		{ name: 'Larry', amount: 12, date: today },
    		{ name: 'Huey', amount: 122, date: today }
    ] },
  	{ name: 'Tim', amount: 123, date: today, children: [
    		{ name: 'Donny', amount: 12, date: today },
    		{ name: 'Ricky', amount: 122, date: today }
		] }
  ]
  
  // make grid rows editable
  $scope.loadedRows = function (s, e) {
  	for (var i = 0; i < s.rows.length; i++) {
    	s.rows[i].isReadOnly = false;
    }
    
    if(s.collectionView)
    {
    	s.collectionView.moveCurrentToPosition(1);
    }
  }
});