# On Demand Loading

## Content



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**

```csharp
public class FlexGridController : Controller
    {
        // GET: FlexGrid
        public ActionResult Index()
        {
            return View();
        }
    }
```

**View Code**

```razor
<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>
}
```