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
|
|---|---|
@(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>
}
|
|
