ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Data Binding / On Demand Loading
In This Topic
    On Demand Loading
    In This Topic

    FlexGrid supports loading data on demand through ODataVirtualCollectionView. The ODataVirtualCollectionView extends ODataCollectionView to provide on-demand loading of data. To perform on demand loading in FlexGrid, you need to access the ODataVirtualCollectionViewService class which supports loading data from the OData service on demand. The ODataVirtualCollectionView does not load the data from the server automatically. Instead, it relies on the setWindow method to load data fragments (windows) on demand.

    The following example illustrates how the data is loaded on demand in the FlexGrid control using the ODataVirtualCollectionViewService class. In this example, we specify the service url, table name, and keys property to perform binding.

    Controller Code

    C#
    Copy Code 
    public class FlexGridController : Controller
    {
        // GET: FlexGrid
        public ActionResult Index()
        {
            return View();
        }
    }

    View Code

    CSHTML
    Copy Code 
    <c1-flex-grid id="ODataVirtualCollectionView" allow-add-new="true" allow-delete="true" 
        style="height:400px" scroll-position-changed="scrollPositionChanged" loaded-rows="oDataVCVLoaded">
    <c1-odata-virtual-source service-url="~/MyNorthWind" table-name="Orders" keys="OrderID">
        </c1-odata-virtual-source>
    <c1-flex-grid-filter default-filter-type="Both"></c1-flex-grid-filter>
</c1-flex-grid>

@section Scripts{
    <script type="text/javascript">
        function scrollPositionChanged(grid) {
            var rng = grid.viewRange;
            grid.collectionView.setWindow(rng.row, rng.row2);
        }
        function oDataVCVLoaded(grid, e) {
            var el = document.getElementById('totalItemCount');
            el.innerHTML = wijmo.format('{length:n0} items', grid.rows);
        }
    </script>
}