Editable Tree Grids

If you use FlexGrid's childItemsPath property to show the data as a tree, the resulting grid will be read-only by default. This happens because every row in a tree is a GroupRow, and group rows are read-only by default.

If you want your tree to be editable, handle the loadedRows event to set the isReadOnly property of every row to false.

You can still control which columns are editable using the column's isReadOnly property or the beginningEdit event.

For example, the grid below allows users to edit cells in the 'hours' and 'rate' columns:

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/EditableTreeGrids.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 }
            ]
        }]
    }];
 
    // workers tree
    var workersGrid = wijmo.Control.getControl('#workersGrid');
    workersGrid.loadedRows.addHandler(function (s, e) {
        s.rows.forEach(function (row) {
            row.isReadOnly = false;
        })
    });
    workersGrid.beginningEdit.addHandler(function (s, e) {
        var item = s.rows[e.row].dataItem,
            binding = s.columns[e.col].binding;
        if (!(binding in item)) { // property not on this item?
            e.cancel = true; // can't edit!
        }
    });
    workersGrid.childItemsPath = ['checks', 'earnings'];
    workersGrid.itemsSource = workers;
});

// This file locates: "Content/css/Lesson/C1FlexGrid/EditableTreeGrids.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: EditableTreeGrids
        public ActionResult EditableTreeGrids()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.EditableTreeGrids_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.EditableTreeGrids_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.EditableTreeGrids_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.EditableTreeGrids_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.EditableTreeGrids_Text4)
</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").IsReadOnly(true);
        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");
    })
)