FlexGrid for MVC does not support unbound mode, however you can achieve this by adding code on the client side to set the data using JavaScript or TypeScript.

To achieve this we will be using CollectionViewService which binds to the model. At client side we get a reference of the CollectionViewService and add rows to the FlexGrid as per the number of items in the Sale.cs model. Finally we get the data of the three columns and add to FlexGrid using setCellData method.

The following image shows how you can set the data from the client side using CollectionViewService. The example uses Sale.cs model added in the QuickStart section.

The following code example demonstrates how to set the data by adding code to the client side.

JavaScript File (app.js)

var fg;
c1.documentReady(function () {
    populate();
})
function populate() {
    var fg = wijmo.Control.getControl("#fg");
        var cv = c1.getService('cv');
            var total = cv.items.length;

            for (var i = 0; i <= total - 1; i++) {
        var obj = [cv.items[i].Product, cv.items[i].Country, cv.items[i].Amount];
            var row = new wijmo.grid.Row();
            fg.rows.push(row);
            for (var c = 0; c <= fg.columns.length - 1; c++) {
                fg.setCellData(i, c, obj[c]);
        }
    }
}

Controller Code

public IActionResult Index()
{
    return View(Sale.GetData(15));
}

View Code

@using <ApplicationName>.Models
<script src="./js/app.js"></script>
@model IEnumerable<Sale>

<c1-items-source id="cv" source-collection="Model"></c1-items-source>

<c1-flex-grid id="fg" height="400px" auto-generate-columns="false" allow-add-new="false" selection-mode="@((C1.Web.Mvc.Grid.SelectionMode.Cell))">
    <c1-flex-grid-column name="Product" header="Product"></c1-flex-grid-column>
    <c1-flex-grid-column name="Country" header="Country"></c1-flex-grid-column>
    <c1-flex-grid-column name="Amount" header="Amount"></c1-flex-grid-column>
</c1-flex-grid>