非連結のTreeGrid

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.

MVC FlexGrid Unbound TreeGrid

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:

Controller code

UnboundTreeGridController.cshtml	コードのコピー
public ActionResult UnboundTree() { var list = Folder.Create(Server.MapPath("~")).Children; return View(list); }

View code

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>

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>