ASP.NET MVC コントロールヘルプ
オンデマンド読み込み
コントロールの使用 > FlexGrid > FlexGridの使用 > データ連結 > オンデマンド読み込み

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#
コードのコピー
public class FlexGridController : Controller
    {
        // GET: FlexGrid
        public ActionResult Index()
        {
            return View();
        }
    }

View Code

CSHTML
コードのコピー
@(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>
}