Unbound Tree Grids

If you prefer to work in unbound mode, you can still build trees by adding rows and columns in code.

name
hours
rate
Jack Smith
check1
hourly
30.00
15.00
overtime
10.00
20.00
bonus
5.00
30.00
check2
hourly
20.00
18.00
overtime
20.00
24.00
Jack Smith
check1
hourly
30.00
15.00
overtime
10.00
20.00
bonus
5.00
30.00
check2
hourly
20.00
18.00
overtime
20.00
24.00
Jane Smith
check1
hourly
30.00
15.00
overtime
10.00
20.00
bonus
5.00
30.00
check2
hourly
20.00
18.00
overtime
20.00
24.00
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// This file locates: "Scripts/Lesson/C1FlexGrid/UnboundTreeGrids.js".
c1.documentReady(function () {
    // 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 }
            ]
        }]
    }, {
        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 }
            ]
        }]
    }, {
        name: 'Jane 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 = wijmo.Control.getControl('#workersGrid');
    uwt.beginningEdit.addHandler(function (s, e) {
        var value = e.panel.getCellData(e.row, e.col);
        if (value == null) {
            e.cancel = true; // can't edit!
        }
    });
 
    // add rows
    for (var w = 0; w < workers.length; w++) {
 
        // add worker
        var worker = workers[w];
        var row = new wijmo.grid.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 wijmo.grid.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 wijmo.grid.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);
 
            }
        }
    }
});
1
2
3
4
5
6
7
8
9
10
// This file locates: "Content/css/Lesson/C1FlexGrid/UnboundTreeGrids.css".
.wj-flexgrid {
  max-height: 220px;
}
.wj-cell.wj-group {
  border: none;
}
.wj-cell.wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: UnboundTreeGrids
        public ActionResult UnboundTreeGrids()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>
    @Html.Raw(Resources.C1FlexGrid.UnboundTreeGrids_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.UnboundTreeGrids_Text1)
</p>
@(Html.C1().FlexGrid().Id("workersGrid")
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("name");
        cs.Add().Binding("hours").DataType(C1.Web.Mvc.Grid.DataType.Number).Format("n2");
        cs.Add().Binding("rate").DataType(C1.Web.Mvc.Grid.DataType.Number).Format("n2");
    })
)