Virtualization in DropDown List
29 Nov 20226 minutes to read
The DropDownList has been provided with virtualization to improve the UI performance for a large amount of data when the EnableVirtualization is true.
This feature doesn’t render out the entire data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining number of items will be loaded on each scrolling action in the popup. It can work with both local and remote data.
Specify the count of the items to be appended in the popup element using ItemsCount property when the EnableVirtualization
is enabled.
In the following sample, if the scroll action takes place, it will append 20 more items to the popup element.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true" ItemsCount=10>
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Record" OnClose="((e) => e.Cancel = true)"></DropDownListEvents>
</SfDropDownList>
@code{
public Query LocalDataQuery = new Query().Take(5);
public class Record
{
public string ID { get; set; }
public string Text { get; set; }
}
public List<Record> Records { get; set; }
protected override void OnInitialized()
{
this.Records = Enumerable.Range(1, 150).Select(i => new Record()
{
ID = i.ToString(),
Text = "Item " + i,
}).ToList();
}
}
Local data
In the following code, 150 local data items bound to the component but only 6 items will be loaded to the popup when you open the popup. Remaining number of items will be loaded on each scrolling action in the popup.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true">
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>
@code{
public Query LocalDataQuery = new Query().Take(6);
public class Record
{
public string ID { get; set; }
public string Text { get; set; }
}
public List<Record> Records { get; set; }
protected override void OnInitialized()
{
this.Records = Enumerable.Range(1, 150).Select(i => new Record()
{
ID = i.ToString(),
Text = "Item " + i,
}).ToList();
}
}
Remote data
In the following code, the remote data bound to the DropDownList component, but only 10 items will be loaded to the popup when you open the popup. Remaining number of items will be loaded on each scrolling action in the popup.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="OrderDetails" Width="300px" EnableVirtualization=true Placeholder="Select a name" Query="@RemoteDataQuery">
<SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"/>
<DropDownListFieldSettings Text="CustomerID" Value="CustomerID"/>
</SfDropDownList>
@code{
public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(10).RequiresCount();
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}
Limitation of virtualization
- Virtualization is not supported in the grouping feature.
Properties
EnableVirtualization
The Virtual Scrolling feature is used to display a large amount of data that you require without buffering the entire load of a huge database records in the DropDowns, that is, when scrolling, the datamanager request is sent to fetch some amount of data from the server dynamically. To achieve this scenario with DropDowns, set the EnableVirtualization to true
.
Click to refer the code for EnableVirtualization
ItemsCount
The data can be fetched in popup based on ItemsCount, when enabled the EnableVirtualization. ItemsCount is applicable only when EnableVirtualization
is used as true. ItemsCount is depends on EnableVirtualization
Default value of ItemsCount
is 5
.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="Record" Placeholder="Select an item" DataSource="@Records" Query="@LocalDataQuery" PopupHeight="130px" EnableVirtualization="true" ItemsCount=10>
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Record" OnClose="((e) => e.Cancel = true)"></DropDownListEvents>
</SfDropDownList>
@code{
public Query LocalDataQuery = new Query().Take(5);
public class Record
{
public string ID { get; set; }
public string Text { get; set; }
}
public List<Record> Records { get; set; }
protected override void OnInitialized()
{
this.Records = Enumerable.Range(1, 150).Select(i => new Record()
{
ID = i.ToString(),
Text = "Item " + i,
}).ToList();
}
}