Features

Virtual Scrolling

Virtual Scrolling

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

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Group Headers
Row Header
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Custom Column Headers
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
Active
End
Product
Color
Discount
Amount2
1
01/25/2025
German
581.61
-2,939.67
true
01/25/2025 00:00:00
Gadget
Green
0.14
2
02/25/2025
Canada
4,919.02
-4,673.75

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@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>
  
}