# On Demand Loading

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## 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
@(Html.C1().FlexGrid()
                .Id("ODataVirtualCollectionView")
                .CssStyle("height", "400px")
                .AllowAddNew(true)
                .AllowDelete(true)
                .BindODataVirtualSource(odsb => 
                                       odsb.ServiceUrl("~/MyNorthWind") 
                                                 .TableName("Orders") 
                                                 .Keys("OrderID") 
                                       ) 
                .Filterable(fb => fb.DefaultFilterType(FilterType.Both))
                .OnClientScrollPositionChanged("scrollPositionChanged")
                .OnClientLoadedRows("oDataVCVLoaded")
)
@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>
}
```