CollectionView

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

CollectionView has a powerful client API. CollectionViewHelper internally performs server side operations like sorting, filtering, paging on data for data-bound controls like FlexGrid, FlexChart and other Input controls. However, it is possible to explicitly perform these operations on client-side too. The Client-side operations include Current Record Management, Sorting, Filtering, Grouping and Tracking Changes.

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

Client-Side Access	Copy Code
@using MVCCollectionView.Models; <script> var Grid, GridCV; c1.mvc.Utils.documentReady(function () { Grid = wijmo.Control.getControl('#fGrid'); GridCV = Grid.collectionView; }); </script> <!--Instantiate FlexGrid and set its properties--> @(Html.C1().FlexGrid().Id("fGrid").IsReadOnly(true).AllowSorting(false).AutoGenerateColumns(false) .Bind(b => b.DisableServerRead(true).Bind(Model.Customers)) .Columns(columns => columns .Add(c => c.Binding("CustomerID")) .Add(c => c.Binding("CompanyName")) .Add(c => c.Binding("ContactName")) .Add(c => c.Binding("City")) .Add(c => c.Binding("Country")) .Add(c => c.Binding("Phone")) ) )

Client-Side Access

Copy Code

@using MVCCollectionView.Models;

<script>
    var Grid, GridCV;
    c1.mvc.Utils.documentReady(function () {
        Grid = wijmo.Control.getControl('#fGrid');
        GridCV = Grid.collectionView;
    });
</script>

<!--Instantiate FlexGrid and set its properties-->
@(Html.C1().FlexGrid().Id("fGrid").IsReadOnly(true).AllowSorting(false).AutoGenerateColumns(false)
    .Bind(b => b.DisableServerRead(true).Bind(Model.Customers))
    .Columns(columns => columns
        .Add(c => c.Binding("CustomerID"))
        .Add(c => c.Binding("CompanyName"))
        .Add(c => c.Binding("ContactName"))
        .Add(c => c.Binding("City"))
        .Add(c => c.Binding("Country"))
        .Add(c => c.Binding("Phone"))
        )
)

See Wijmo CollectionView API Documentation for more information.