How to Add Data-Virtualized Paging in a WinForms Datagrid
Tags: webdev, devops, dotnet, tutorial
Published: 2024-05-07 16:40:49

---
canonical_url: https://developer.mescius.com/blogs/how-to-add-data-virtualized-paging-in-a-winforms-datagrid
description: Learn how to add data-virtualized paging features in FlexGrid, a WinForms Datagrid. See more from ComponentOne today.
---

**What You Will Need**
- Visual Studio 2022
- ComponentOne WinForms Edition

**Controls Referenced**
- [FlexGrid for WinForms](https://developer.mescius.com/componentone/docs/win/online-flexgrid/overview.html)
- [C1DataCollection](https://developer.mescius.com/componentone/docs/services/online-datacollection/overview.html)

**Tutorial Concept**
WinForms Datagrid Virtualized Paging Features - How to implement data virtualized paging UI using ComponentOne FlexGrid for WinForms and a data pager control.

---

When creating applications, developers need to figure out how to show long lists of data efficiently and quickly. One popular method that is often used is **Paging**, which includes breaking up long content into pages. Each page shows a specific number of items, and users can navigate to different pages when required. Paging makes things faster and easier to read, and it helps users find items quickly.

![WinForms Datagrid Paging](//cdn.mescius.io/umb/media/bt5fqcmh/winforms_flexgrid_paging.png?rmode=max&width=745&height=326)

In this blog post, we'll learn how Paging can be implemented in [<span>FlexGrid</span>](https://developer.mescius.com/componentone/docs/win/online-flexgrid/overview.html "https://developer.mescius.com/componentone/docs/win/online-flexgrid/overview.html"), our flagship DataGrid control, with the help of [DataCollection](https://developer.mescius.com/componentone/docs/services/online-datacollection/overview.html "https://developer.mescius.com/componentone/docs/services/online-datacollection/overview.html") to give users an intuitive way to interact with large sets of data. The implementation steps are as follows:

1.  [Setup a WinForms App with the Required Packages](#setup)
2.  [Create a Virtual DataCollection](#create-virtual)
3.  [Create a Paged DataCollection and Bind to FlexGrid](#create-paged)
4.  [Handle the Toolstrip Event to Perform Navigation](#handle)

## <a id="setup"></a>Setup a WinForms App with the Required Packages

Let’s begin by creating a new “Windows Forms App” Project targeting .NET 8 using Visual Studio 2022 and installing the following NuGet packages to the project:

*   [<span>C1.Win.FlexGrid</span>](https://www.nuget.org/packages/C1.Win.FlexGrid "https://www.nuget.org/packages/C1.Win.FlexGrid")
*   [<span>C1.Win.Themes</span>](https://www.nuget.org/packages/C1.Win.Themes "https://www.nuget.org/packages/C1.Win.Themes")
*   [<span>C1.DataCollection</span>](https://www.nuget.org/packages/C1.DataCollection "https://www.nuget.org/packages/C1.DataCollection")
*   [<span>C1.DataCollection.BindingList</span>](https://www.nuget.org/packages/C1.DataCollection.BindingList "https://www.nuget.org/packages/C1.DataCollection.BindingList")

Once the packages are installed, drag and drop a FlexGrid as well as a ToolStrip control on the Form and configure the Toolstrip using buttons, labels, and textboxes to show navigation items, as shown in the following screenshot.

![WinForms Datagrid Paging_Mainform](//cdn.mescius.io/umb/media/pf5dcx3k/mainform.png?rmode=max&width=725&height=514)

**<u>Note:</u>** For the demo project, we are using [<span>Themes</span>](https://developer.mescius.com/componentone/docs/win/online-themes/overview.html "https://developer.mescius.com/componentone/docs/win/online-themes/overview.html") with FlexGrid to give it an enhanced look by applying the ”Office2016Green” theme.

## <a id="create-virtual"></a>Create a Virtual DataCollection

In this step, we will use the **C1VirtualDataCollection** class from our DataCollections API to create a virtual data collection that provides data virtualization and on-demand loading.

To implement this, create a new class named **VirtualModeDataCollection** that inherits the C1VirtualDataCollection class and overrides its **GetPageAsnyc** method. This method includes the code to retrieve records for the requested page from the data source.

```
    internal class VirtualModeDataCollection : C1VirtualDataCollection<Customer>
    {
        public int TotalCount { get; set; } = 400;
        protected override async Task<Tuple<int, IReadOnlyList<Customer>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default)
        {
            return new Tuple<int, IReadOnlyList<Customer>>(TotalCount, Enumerable.Range(startingIndex, count).Select(i => new Customer(i)).ToList());
        }
    }
```

**<u>Note:</u>** For the data, we are using a custom data class named **Customer**, which can be found in the [<span>Quick Start guide</span>](https://developer.mescius.com/componentone/docs/services/online-datacollection/quickstart.html#i-tab-content-CS "https://developer.mescius.com/componentone/docs/services/online-datacollection/quickstart.html#i-tab-content-CS") of the DataCollections API.

## <a id="create-paged"></a>Create a Paged DataCollection and bind FlexGrid

In the previous step, we made a **VirtualModeDataCollection** class. Now, we'll use it to create a paged data collection using the **C1PagedDataCollection** class from our DataCollections API, which provides the functionality to show data in pages.

Let’s create an object of the VirtualModeDataCollection class and pass it to the C1PagedDataCollection class to create a new Paged DataCollection. Here, the **PageSize** property of the C1PagedDataCollection should be set to define the number of records shown on a page.

```
    C1PagedDataCollection<Customer> _pagedCollection;
    var virtualCollection = new VirtualModeDataCollection();
    _pagedCollection = new C1PagedDataCollection<Customer>(virtualCollection) { PageSize = 15 };
```

Once we have the C1PagedDataCollection configured, we can bind the FlexGrid with this DataCollection using the **C1DataCollectionBindingList** class from the DataCollections API.

```
    c1FlexGrid1.DataSource = new C1DataCollectionBindingList(_pagedCollection);
```

## <a id="handle"></a>Handle the Toolstrip Event to Perform Navigation

In the final step, we will handle the **ItemClicked** event of the Toolstrip to perform navigation between Pages.

We will use the **MoveToPageAsync** method of the **C1PagedDataCollection** to jump to the required page.

```
    private void ToolStrip1_ItemClicked(object sender, ToolStripItemClickedEventArgs e)
    {
        switch (e.ClickedItem?.Name)
        {
            case "toolStripButtonFirst":
                //Move to first page
                _pagedCollection.MoveToPageAsync(0);
                break;
            case "toolStripButtonPrevious":
                //If current page is greater than 0, keep going to previous page
                _pagedCollection.MoveToPageAsync(_pagedCollection.CurrentPage > 0 ? _pagedCollection.CurrentPage - 1 : 0);
                break;
            case "toolStripButtonNext":
                //If current page is less than total page count, keep going to next page
                _pagedCollection.MoveToPageAsync(_pagedCollection.CurrentPage < _pagedCollection.PagesCount - 1 ? _pagedCollection.CurrentPage + 1 : _pagedCollection.PagesCount - 1);
                break;
            case "toolStripButtonLast":
                //Move to last page
                _pagedCollection.MoveToPageAsync(_pagedCollection.PagesCount - 1);
                break;
        }
    }
```

After implementing all the steps, the final application works as shown in the GIF below:

![WinForms Datagrid Paging](//cdn.mescius.io/umb/media/v5ndeg3t/winforms_flexgrid_paging.gif?rmode=max&width=762&height=533)

You can [download the sample](https://cdn.mescius.io/umb/media/x4ppw42u/flexgridpaging.zip) to implement the Paging functionality.

We hope you find this demo useful for implementing Paging in a WinForms DataGrid. The DataCollection API used in this demo includes more useful features like filtering, sorting, and grouping, among others. Both FlexGrid and C1DataCollection can be licensed with ComponentOne WinForms Edition. You can explore it more by referring to its [<span>documentation</span>](https://developer.mescius.com/componentone/docs/services/online-datacollection/overview.html "https://developer.mescius.com/componentone/docs/services/online-datacollection/overview.html").

Try it out and leave your feedback or questions in the comments section. Happy Coding!