Blazor | ComponentOne
Controls / ListView / Data Operations
In This Topic
    Data Operations
    In This Topic

    ListView supports the basic data operations, such as filtering, grouping, paging and sorting, through DataCollection. DataCollection provides various classes and methods, such as C1VirtualDataCollection, IDataCollectionEx and C1PagedDataCollection class, FilterAsync, SortAsync and GroupAsync methods, which allow you to perform various operations on the list views and other similar controls.

    Filtering data

    DataCollection implements the IDataCollection interface to support filtering, which enables you to filter data using the FilterAsync method of the IDataCollectionEx class. This method calls the filtering operation in the collection view and refines data according to the user requirements without including other data that can be repetitive or irrelevant.

    The following code implements filtering in the ListView control using the FilterAsync method. It uses the Customer class created in the Virtualization section. In this example, a customer list is displayed in the ListView control by accessing the underlying collection in the ListView using DataCollection property of the C1ListView class.

    Razor
    Copy Code 
    @using C1.Blazor.Core
@using C1.Blazor.Input
@using C1.Blazor.ListView
@using C1.DataCollection

<C1TextBox TextChanged="OnTextChanged" Placeholder="Type here to filter" 
           Style="@("width:500px;margin:8px 0")" />
<C1ListView @ref="list" ItemsSource="products" T="Customer" DisplayMemberPath="Name" 
            Style="@("max-height:50vh")" />

@code
{
    string currentFilterValue;
    C1ListView<Customer> list;
    IEnumerable<Customer> products;
    System.Threading.SemaphoreSlim filterSemaphore;

    protected override void OnInitialized()
    {
        filterSemaphore = new System.Threading.SemaphoreSlim(1);
        products = Customer.GetCustomerList(100);
    }

    private async Task OnTextChanged(string value)
    {
        Console.WriteLine($"OnTextChanged({value})");
        try
        {
            var filter = value;
            currentFilterValue = filter;
            await Task.Delay(400);
            await filterSemaphore.WaitAsync();
            if (currentFilterValue == filter)
            {
                Console.WriteLine("FilterAsync");
                await list.DataCollection.FilterAsync("Name", FilterOperation.Contains, filter);
            }
        }
        finally
        {
            filterSemaphore.Release();
        }
    }
}

    Group data

    When grouping is applied in list view, it automatically sorts the data and splits it into groups. Similarly, the IDataCollectionEx interface supports grouping for data controls, such as list view. It implements the GroupAsync method so that you can call the grouping operation in the collection view without having to cast to the specific interface. The GroupAsync method groups the collection view according to the specified group fields, group path, or group descriptions.

    The following code implements grouping in the ListView control using the GroupAsync method. This example uses the Customer class created in the Virtualization section.

    Razor
    Copy Code 
    @using C1.Blazor.ListView
@using C1.DataCollection

<C1ListView ItemsSource="@collection" T="Customer" DisplayMemberPath="Name" 
            GroupBackgroundColor="@("#F1F1F1")" Style="@("max-height:50vh")" />

@code
{
    C1DataCollection<Customer> collection;

    protected override async Task OnInitializedAsync()
    {
        var cv = new C1DataCollection<Customer>(Customer.GetCustomerList(100));
        await cv.GroupAsync("Country");
        collection = cv;
    }
}

    Paging

    With paging, large data can be loaded in the ListView control in chunks or pages. DataCollection provides C1PagedDataCollection<T> class, which supports paging in the ListView control. The C1PagedDataCollection<T> class works as a collection that wraps another collection to be shown in pages.

    The following code implements paging in the ListView control with the help of the C1DataPager control. This example uses the Customer class created in the Virtualization section.

    Razor
    Copy Code 
    @using C1.Blazor.ListView
@using C1.DataCollection
@using C1.Blazor.DataPager

<C1ListView ItemsSource="customers" T="Customer" DisplayMemberPath="Name" />
<C1DataPager Source="customers" CurrentButtonStyle=
       "@("background-color:gray;color:white;border-radius:4px;box-shadow:0px 6px 13px rgba(0,0,0,0.2)")" />

@code
{
    C1PagedDataCollection<Customer> customers;

    protected override void OnInitialized()
    {
        customers = new C1PagedDataCollection<Customer>(new
        VirtualModeDataCollection() { PageSize = 10 });
    }
}

    Sort data

    When sorting is applied to a list view, the data is sorted in ascending or descending order. The IDataCollection interface supports ascending and descending sorting for data controls, such as grids. It implements the SortAsync method to allow you to call the sorting operation in the collection view without having to cast to the specific interface. The SortAsync method sorts the collection view according to the specified sort parameters, descriptions, or path and direction.

    The following code implements sorting in the ListView control using the SortAsync method. This example uses the Customer class created in the Virtualization section.

    Razor
    Copy Code 
    @using C1.Blazor.ListView
@using C1.DataCollection

<C1ListView @ref="listView" ItemsSource="@customers" T="Customer" DisplayMemberPath="Name" 
            Style="@("max-height:50vh")" />
@code
{
    SortDirection? sortDirection;
    string sortButtonMessage;
    C1ListView<Customer> listView;
    IEnumerable<Customer> customers;

    protected override void OnInitialized()
    {
        UpdateSortMessage();
        customers = Customer.GetCustomerList(100);
    }

    private async void SortClicked()
    {
        sortDirection = sortDirection != 
                SortDirection.Ascending ? SortDirection.Ascending : SortDirection.Descending;
        UpdateSortMessage();
        await listView.ChangeViewAsync(0);
        await listView.DataCollection.SortAsync("Name", sortDirection.Value);
    }

    private void UpdateSortMessage()
    {
        sortButtonMessage = sortDirection != 
                SortDirection.Ascending ? "Sort ascendingly" : "Sort descendingly";
    }
}