ASP.NET MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Unbound FlexGrid / Using CollectionView Service
In This Topic
    Using CollectionView Service
    In This Topic

    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)

    app.js
    Copy Code
    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

    HomeController.cs
    Copy Code
    public ActionResult Index()
    {
        return View(Sale.GetData(15));
    }
    

    View Code

    Index.cshtml
    Copy Code
    <script src="~/Scripts/app.js"></script>
    @model IEnumerable<Sale>
    
    @(Html.C1().CollectionViewService().Id("cv").Bind(Model))
    @(Html.C1().FlexGrid().Id("fg").Height(400).AutoGenerateColumns(false).AllowAddNew(false)
        .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
        .Columns( col => {
            col.Add(cb => cb.Name("Product").Header("Product"));
            col.Add(cb => cb.Name("Country").Header("Country"));
            col.Add(cb => cb.Name("Amount").Header("Amount"));
            }))
    
    See Also