As the name suggests, in unbound mode, grid is not bound to any data source and data is stored in the control itself. In this case, you can build trees by adding rows and columns in code.
To work in unbound mode, you need to start with a data source in an array, initialize the FlexGrid without binding it to the array, add columns and define properties, loop through the arrays and add group rows and cells as shown in the following code. The example uses TreeItem.cs model which was added to the application in the TreeGrid topic:
UnboundTreeGridController.cshtml |
コードのコピー
|
---|---|
public ActionResult UnboundTree() { var list = Folder.Create(Server.MapPath("~")).Children; return View(list); } |
UnboundTreeGrid.razor |
コードのコピー
|
---|---|
@model IEnumerable<ITreeItem> @(Html.C1().FlexGrid().Id("ubgrid").Width(500).Height(500) .AutoGenerateColumns(false) ) <script> c1.documentReady(function () { let grid = wijmo.Control.getControl("#ubgrid"); grid.rows.defaultSize = 25; // 列を追加します。 grid.columns.push(new wijmo.grid.Column({ header: 'Header', width: '2*' })); grid.columns.push(new wijmo.grid.Column({ header: 'Size' })); let data = @(Html.Raw(Json.Encode(Model))); // 行を追加します。 for (let r = 0; r < data.length; r++) { // ヘッダを追加します。 var header = data[r]; var row = new wijmo.grid.GroupRow(); row.dataItem = header; row.isReadOnly = false; row.level = 0; grid.rows.push(row); grid.setCellData(row.index, 0, header.Header); if (header.Children) { addChild(grid, header, 1); } } }); function addChild(grid, parent, level) { for (var c = 0; c < parent.Children.length; c++) { // 子を追加します。 var child = parent.Children[c]; row = new wijmo.grid.GroupRow(); row.dataItem = child; row.isReadOnly = false; row.level = level; grid.rows.push(row); grid.setCellData(row.index, 0, child.Header); grid.setCellData(row.index, 1, child.Size); if (child.Children) { addChild(grid, child, level + 1); } } } </script> |