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

// 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);
 
            }
        }
    }
});

// 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;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: UnboundTreeGrids
        public ActionResult UnboundTreeGrids()
        {
            return View();
        }
    }
}

<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");
    })
)