How to Add Data-Virtualized Paging in a WinForms Datagrid

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.

In this blog post, we'll learn how Paging can be implemented in FlexGrid, our flagship DataGrid control, with the help of DataCollection 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
2. Create a Virtual DataCollection
3. Create a Paged DataCollection and Bind to FlexGrid
4. Handle the Toolstrip Event to Perform Navigation

Ready to Get Started? Download ComponentOne Today!

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:

• C1.Win.FlexGrid
• C1.Win.Themes
• C1.DataCollection
• 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.

 Note: For the demo project, we are using Themes with FlexGrid to give it an enhanced look by applying the ”Office2016Green” theme.

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());
    }
}

Note: For the data, we are using a custom data class named Customer, which can be found in the Quick Start guide of the DataCollections API.

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);

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:

You can download the sample 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 documentation.

Ready to Get Started? Download ComponentOne Today!

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