# 바인딩되지 않은 트리 그리드(TreeGrid)

## Content


바인딩 해제 모드로 작업하는 경우에도, 코드로 행과 열을 추가하여 트리를 빌드 할 수 있습니다.

배열의 데이터 소스로 시작하세요. FlexGrid를 초기화하되 배열에 바인딩하지 마세요. 

```javascript
import * as wjGrid from '@grapecity/wijmo.grid';

	// workers tree data (heterogeneous collection)
  var workers = [{
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
      	{ name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0}
      ]
    }, {
      name: 'check2',
      earnings: [
      	{ name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }];

  // unbound workers tree
  var uwt = new wjGrid.FlexGrid('#workersGrid', {
  	headersVisibility: 'Column',
    selectionMode: 'Row',
    beginningEdit: function(s, e) {
    	var value = e.panel.getCellData(e.row, e.col);
      if (value == null) {
      	e.cancel = true; // can't edit!
      }
    }
  });  
```

 열을 추가하고 속성을 정의합니다.
  ```javascript
  // unbound workers tree
  var uwt = new wjGrid.FlexGrid('#workersGrid', {
  	headersVisibility: 'Column',
    selectionMode: 'Row',
    beginningEdit: function(s, e) {
    	var value = e.panel.getCellData(e.row, e.col);
      if (value == null) {
      	e.cancel = true; // can't edit!
      }
    }
  });
  ```
배열을 반복하고 그룹 행과 셀을 추가합니다.
  ```javascript
    // add rows
  for (var w = 0; w < workers.length; w++) {
  	// add worker
    var worker = workers[w];
    var row = new wjGrid.GroupRow(worker);
    row.isReadOnly = false;
    row.level = 0;
    uwt.rows.push(row);
    uwt.setCellData(row.index, 0, worker.name);
    for (var c = 0; c < worker.checks.length; c++) {
        // add check
        var check = worker.checks[c];
        row = new wjGrid.GroupRow(check);
            row.isReadOnly = false;
        row.level = 1;
        uwt.rows.push(row);
        uwt.setCellData(row.index, 0, check.name);
        for (var e = 0; e < check.earnings.length; e++) {
            // add earning
            var earning = check.earnings[e];
            row = new wjGrid.GroupRow(earning);
                row.isReadOnly = false;
            row.level = 2;
            uwt.rows.push(row);
            uwt.setCellData(row.index, 0, earning.name);
            uwt.setCellData(row.index, 1, earning.hours);
            uwt.setCellData(row.index, 2, earning.rate);
        }
    }
}
  ```