ASP.NET MVC Controls | ComponentOne
Client- Side API Reference / FlexGrid
In This Topic
    FlexGrid
    In This Topic

    All controls in ASP.NET MVC Edition are optimized for client-side web development.

    You can access FlexGrid control on client-side with the help of wijmo.Control.getControl() method. Add the script that accesses the control after the control declaration. Use the control's Id to create its jQuery selector and use the client-side API.

    The ICollectionView class is the main data binding class used on client-side. This class enables the collections to have currency, filtering, grouping, and sorting services. This interface also includes the IEditableCollectionView and IPagedCollectionView classes that support editing and paging. See https://developer.mescius.com/wijmo/api/classes/wijmo.collectionview.html for more information.

    The following code sample demonstrates how to access a FlexGrid and FlexGrid CollectionView on client-side.

    Client-Side Access
    Copy Code 
    @using MVCFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

<!--Instantiate FlexGrid and set its properties-->
@(Html.C1().FlexGrid<Sale>()
    .Id("fGrid")
    .AutoGenerateColumns(false)
    .Height(450)
    .Width(700)
    .AllowAddNew(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
    .CssClass("grid")
    .Bind(Model) 
     // Binding columns data to FlexGrid
     .Columns(bl =>
       {
           bl.Add(cb => cb.Binding("ID"));
           bl.Add(cb => cb.Binding("Start"));
           bl.Add(cb => cb.Binding("Product"));
           bl.Add(cb => cb.Binding("Amount").Format("c"));
           bl.Add(cb => cb.Binding("Discount").Format("p0"));
           bl.Add(cb => cb.Binding("Active"));
       })
)
<script>
    var grid, gridCV;
    c1.mvc.Utils.documentReady(function ()
    {
        grid = wijmo.Control.getControl('#fGrid');
        gridCV = grid.collectionView;
    });
</script>

    See Wijmo FlexGrid API Documentation for more information.