MultiRow - Virtual Scrolling

Virtual Scrolling

This sample shows how to make grid work in virtual scrolling mode.

Features

Sample
Source
Documentation

Active

End

Product

Color

Discount

Amount2

Description

This sample shows how to make grid work in virtual scrolling mode.

To enable this functionality, the DisableServerRead property should be false(default).
Then the InitialItemsCount property should be set a number which is greater than 0.

VirtualScrollingController.cs
VirtualScrolling.cshtml

using MultiRowExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
using C1.Web.Mvc; 
using C1.Web.Mvc.Serialization; 
  
  
namespace MultiRowExplorer.Controllers 
{ 
    public partial class MultiRowController : Controller 
    { 
        // 
        // GET: /VirtualScrolling/ 
  
        public ActionResult VirtualScrolling() 
        { 
            return View(); 
        } 
  
        public ActionResult VirtualScrolling_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) 
        { 
            return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(100000))); 
        } 
    } 
} 

@model IEnumerable<Sale> 
  
<c1-multi-row id="virtualScrollingMultiRow" class="multirow" is-read-only="true"> 
    <c1-items-source initial-items-count="100" read-action-url="@Url.Action("VirtualScrolling_Bind")"></c1-items-source> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="ID"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Start" format="MM/dd/yyyy"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="End" format="MM/dd/yyyy HH:mm:ss" width="150"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group colspan="2"> 
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Product"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Color"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group colspan="2"> 
        <c1-multi-row-cell binding="Amount"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Amount2"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Discount" colspan="2"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
</c1-multi-row> 
  
@section Description{ 
<p>@Html.Raw(MultiRowRes.VirtualScrolling_Text0)</p> 
  
<p>@Html.Raw(MultiRowRes.VirtualScrolling_Text1)</p> 
  
} 