[Solved] TelerikMultiColumnComboBox Virtualization with API Call

[Erik]

I am trying to leverage the TelerikMultiColumnComboBox  to tie into my API calls against a large dataset to return to the user results that match the filterString they are entering. Below is a reduced sample of what I am trying to achieve and what my current implementation is. The issue I am having is that when I hit the bottom, or scroll in the comboBox, the component calls OnRead for page 1 again and doesnt go to page 2, etc. I have validated this by console logging what the parameters are within OnRead but am struggling to figure out why it is not going to the next page. Any help would be appreciated. Thanks in advance!

@page "/Test"

@using Telerik.Blazor.Components
@inject PreAwardJobSetupService preAwardSvr

<TelerikMultiColumnComboBox TItem="Estimate"
                            TValue="Guid?"
                            TextField="Display"
                            ValueField="Id"
                            @bind-Value="SelectedEstimateId"
                            Filterable="true"
                            ScrollMode="DropDownScrollMode.Virtual"
                            PageSize="@PageSize"
                            OnRead="@OnEstimateLookup"
                            Width="100%"
                            ItemHeight="@ItemHeight"
                            ListHeight="@ListHeight">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="Revision" Title="Revision" Width="80px" />
        <MultiColumnComboBoxColumn Field="RevisionName" Title="RevisionName" Width="200px" />
        <MultiColumnComboBoxColumn Field="Opportunity_Title" Title="Opportunity Title" Width="200px" />
        <MultiColumnComboBoxColumn Field="Customer_Name" Title="Customer" Width="200px" />
        <MultiColumnComboBoxColumn Field="ApprovalStatus" Title="Approval Status" Width="100px" />
        <MultiColumnComboBoxColumn Field="OppStatus" Title="Opp Status" Width="100px" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

@code {
    private Guid? SelectedEstimateId { get; set; }
    public string ListHeight { get; set; } = "268px";
    public int ItemHeight { get; set; } = 28;
    public int PageSize { get; set; } = 50;

    private async Task OnEstimateLookup(MultiColumnComboBoxReadEventArgs args)
    {
        string? filter = args.Request?.Filters?.OfType<Telerik.DataSource.FilterDescriptor>().FirstOrDefault()?.Value as string;

        if (string.IsNullOrWhiteSpace(filter))
        {
            args.Data = new List<Estimate>();
            args.Total = 0;
            return;
        }

        int page = args.Request?.Page ?? 1;
        int pageSize = args.Request?.PageSize ?? PageSize;

        var result = await preAwardSvr.GetEstimatesPagedAsync(filter, page, pageSize);

        args.Data = result.Estimates;
        args.Total = result.TotalCount;
    }
}

[Ivan Danchev]

Hello Erik,

The component advances position via args.Request.Skip (number of items scrolled past), not args.Request.Page — that property stays 1 on every scroll event.

With ScrollMode="Virtual" the component doesn't rely on pages, it uses scroll offsets. It always fires OnRead with Page = 1 and only moves Skip forward (0 → 20 → 40 → …).

See this example: https://blazorrepl.telerik.com/wgaIlSPR27X9Pvos08 

Comments are added to the code.

The important change is:

//  before 
int page = args.Request?.Page ?? 1;

// after
int skip = args.Request?.Skip ?? 0;
int take = args.Request?.PageSize ?? PageSize;

The debug bar at the top of the example linked above shows Page, Skip, PageSize, and result counts on every OnRead call. Type "opp" in the box and scroll down to watch Page stay at 1 while Skip advances correctly.

Regards,
Ivan Danchev
Progress Telerik

[Erik]

Ivan,

Thank you for this reply, I have been able to update my code base and this is working as expected now. I had missed the Skip/Take methodology when I saw the Page variable.