1. Home
  2. Forum
  3. Blazor
  4. need an event to activate virtualization in backend

need an event to activate virtualization in backend

Hello and regards

My table has more than a million records so I enabled virtualization. In the first request I only got 10 records from the database. Now I am looking for an event to get the next 10 records. Unfortunately, in the native events supported section, there is no event related to scroll. What event should I use to do this?

https://blazor.syncfusion.com/documentation/combobox/native-events#list-of-native-events-supported


3 Replies 1 reply marked as answer
UD UdhayaKumar Duraisamy Syncfusion Team December 18, 2024 12:57 PM UTC

If virtualization is enabled using the EnableVirtualization property in the ComboBox component, the component automatically handles the process of fetching data from the server during scrolling. This eliminates the need for you to manually handle events like scroll or manage data queries on the client side.


When virtualization is enabled, the ComboBox sends requests to the server, using the Skip and Take properties to fetch the next set of data based on the user's scroll action. To implement this behavior, you must properly configure server-side logic to handle these requests and return the required data. Below is a complete example for reference:


[Blazor ComboBox Implementation (Client-Side)]
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data

<div style="margin: 150px auto; width: 50%">
    <SfComboBox TValue="int?" TItem="OrderDetails" PopupHeight="130px" EnableVirtualization="true" Placeholder="Select Employee" Query="@RemoteDataQuery">
        <SfDataManager Url="http://localhost:57028/Home/Datasource" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.UrlAdaptor" />
        <ComboBoxFieldSettings Text="EmployeeName" Value="EmployeeID" />
    </SfComboBox>
</div>

@code {
    public Query RemoteDataQuery = new Query();

    public class OrderDetails
    {
        public string EmployeeName { get; set; }
        public string EmployeeID { get; set; }
        public string JoinedDate { get; set; }
    }
}

[Server-Side Implementation]
public ActionResult Datasource(DataManagerRequest dm)
{
    IEnumerable DataSource = orddata.ToList();
    DataOperations operation = new DataOperations();

    if (dm.Search != null && dm.Search.Count > 0)
    {
        DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search
    }
    if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
    {
        DataSource = operation.PerformSorting(DataSource, dm.Sorted);
    }
    if (dm.Where != null && dm.Where.Count > 0) //Filtering
    {
        DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
    }
    int count = DataSource.Cast<OrdersDetails>().Count();
    if (dm.Select != null)
    {
        DataSource = operation.PerformSelect(DataSource, dm.Select);  // Selected the columns value based on the filter request  
        DataSource = DataSource.Cast<dynamic>().Distinct().AsEnumerable(); // Get the distinct values from the selected column  
    }
    if (dm.Skip != 0)
    {
        DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging
    }
    if (dm.Take != 0)
    {
        DataSource = operation.PerformTake(DataSource, dm.Take);
    }
    return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}

public class OrdersDetails
{
    public string EmployeeName { get; set; }
    public string EmployeeID { get; set; }
    public string JoinedDate { get; set; }
}




For additional details, refer to the following documentation:



SA Sam December 21, 2024 10:09 AM UTC

 Hi  UdhayaKumar


I have three SfComboBoxes with Cascading mode between them. And since the number of my parameters is variable and large, I have to use the post method. Now in your example above, if I want to have both Cascading and use the post method, what solution do you suggest?

i dont know how to fill my params and object in Post method and it says null in controller.

razor.JPG

thanks sam


UD UdhayaKumar Duraisamy Syncfusion Team January 3, 2025 04:54 AM UTC

Below is an example demonstrating how you can implement cascading behavior between three Syncfusion® Blazor ComboBox components while utilizing the POST method to handle large, variable parameters.


This implementation addresses your concern about parameters being null in the controller by ensuring that the required parameters are sent via the Query.AddParams method.


@using UrlAdaptor.Data
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<div style="margin: 150px auto; width: 50%">
    <SfComboBox TValue="int?" TItem="EmployeeData" PopupHeight="130px" @bind-Value="@comboVal" EnableVirtualization="true" Placeholder="Select Title" Query="@RemoteDataQuery">
        <SfDataManager Url="/api/Values" Adaptor="Adaptors.UrlAdaptor" CrossDomain="true"></SfDataManager>
        <ComboBoxEvents TValue="int?" TItem="EmployeeData" ValueChange="ChangeCountry"></ComboBoxEvents>
        <ComboBoxFieldSettings Text="Title" Value="Id" />
    </SfComboBox>

    <hr />

    <SfComboBox TValue="int?" TItem="EmployeeData" PopupHeight="130px" Enabled="@Enabled" EnableVirtualization="true" Placeholder="Select a data" Query="@RemoteDataQuery_data">
        <SfDataManager Url="/api/Values" Adaptor="Adaptors.UrlAdaptor" CrossDomain="true"></SfDataManager>
        <ComboBoxFieldSettings Text="Name.FirstName" Value="Id" />
    </SfComboBox>
</div>

@code{
    public int? comboVal { get; set; } = 456;

    public bool Enabled { get; set; } = false;

    public Query RemoteDataQuery { get; set; } = new Query();

    public Query RemoteDataQuery_data { get; set; } = new Query();

    protected override void OnInitialized()
    {
        RemoteDataQuery.AddParams("Id", 457);
        RemoteDataQuery_data.AddParams("Id", 95);
    }

    public void ChangeCountry(ChangeEventArgs<int?,EmployeeData> args)
    {
        Enabled = (args.Value != null) ? true : false;
        RemoteDataQuery_data.Where(new WhereFilter() { Field = "Title", Operator = "equal", value = args.ItemData.Title, IgnoreCase = false, IgnoreAccent = false });
    }
}

Controller Code:
        [HttpPost]
        [Route("api/[controller]")]
        public object Post([FromBody] DataManagerRequest dm)
        {
            if (order.Count == 0)
            {
                BindDataSource();
            }
            IEnumerable DataSource = order.ToList();
            if (dm.Search != null && dm.Search.Count > 0)
            {
                DataSource = DataOperations.PerformSearching(DataSource, dm.Search);  //Search
            }
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
            {
                DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);
            }
            if (dm.Where != null && dm.Where.Count > 0) //Filtering
            {
                DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
            }
            int count = DataSource.Cast<EmployeeData>().Count();
            if (dm.Skip != 0)
            {
                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);   //Paging
            }
            if (dm.Take != 0)
            {
                DataSource = DataOperations.PerformTake(DataSource, dm.Take);
            }
            return new { result = DataSource, count = count };

        }

  • Adding Parameters: Use Query.AddParams to pass parameters from the ComboBox to the server, ensuring they are included in the POST request.
  • Cascading Behavior: Update the Query for the dependent ComboBox in the ValueChange event handler of the parent ComboBox.
  • Controller Handling: Use the DataManagerRequest object to perform operations like searching, sorting, filtering, and paging on the server.
For further details, you can refer to the Cascading in Blazor ComboBox Component documentation.

Attachment: Blazor_URLadaptor_ComboBox_d18a2201.zip

Marked as answer
Loader.
Up arrow icon