Paging in Blazor MultiColumn ComboBox component
1 Dec 202524 minutes to read
Paging provides an option to display data in segmented pages, making it easier to navigate large datasets. To enable paging, set the AllowPaging property to true (default is false). When paging is enabled, a pager component is rendered at the bottom of the MultiColumn ComboBox popup to navigate between pages. If the total records fit on a single page, the pager is hidden. Paging works with both local and remote data sources; when used with remote data, queries can be shaped to request only the current page of data.
Customize the pager options
Customize the pager to meet specific requirements using the following properties:
-
PageCount: Number of page links displayed in the pager (default is
8). -
PageSize: Number of records displayed per page (default is
12).
Change the page size
The Syncfusion® MultiColumn ComboBox allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the PageSize property. This property is used to specify the initial number of records to display on each page. The default value of pageSize property is 12.
The following example demonstrates how to change the page size of a MultiColumn ComboBox using an external button click based on NumericTextBox input.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs
<div class="col-lg-12">
<label class="example-label">Select a service</label>
<SfMultiColumnComboBox TItem="Service" TValue="string" Placeholder="e.g. Web Development" PopupWidth="600px" AllowFiltering="true" PageSize="@PageSize" DataSource="GridData" AllowPaging="true" TextField="Name" ValueField="Name">
</SfMultiColumnComboBox>
<div class="col-lg-4">
<label class="example-label">Specify the PageSize</label>
<SfNumericTextBox TValue="int" @bind-Value="PageSize" Min="1"></SfNumericTextBox>
</div>
</div>
@code {
public int PageSize = 4;
public class Service
{
public string Name { get; set; }
public string Icon { get; set; }
public string Description { get; set; }
public string Price { get; set; }
public double Rating { get; set; }
}
private IEnumerable<Service> GridData { get; set; }
protected override async Task OnInitializedAsync()
{
GridData = new List<Service>
{
new Service
{
Name = "Cloud Hosting",
Icon = "cloud_icon.png",
Description = "Scalable cloud hosting solutions.",
Price = "$50/month",
Rating = 4.6
},
new Service
{
Name = "Data Analysis",
Icon = "data_icon.png",
Description = "Advanced data analysis services.",
Price = "$150/hour",
Rating = 4.7
},
new Service
{
Name = "SEO Optimization",
Icon = "seo_icon.png",
Description = "Boost your website's SEO.",
Price = "$200/project",
Rating = 4.5
},
new Service
{
Name = "Digital Marketing",
Icon = "marketing_icon.png",
Description = "Comprehensive digital marketing.",
Price = "$100/hour",
Rating = 4.8
},
new Service
{
Name = "Cybersecurity",
Icon = "security_icon.png",
Description = "Protect your digital assets.",
Price = "$300/hour",
Rating = 4.9
},
new Service
{
Name = "Web Development",
Icon = "web_icon.png",
Description = "Full-stack web development services.",
Price = "$100/hour",
Rating = 4.5
},
new Service
{
Name = "Mobile App Development",
Icon = "app_icon.png",
Description = "iOS and Android app development.",
Price = "$120/hour",
Rating = 4.6
},
new Service
{
Name = "IT Support",
Icon = "it_icon.png",
Description = "24/7 IT support services.",
Price = "$75/hour",
Rating = 4.4
},
new Service
{
Name = "E-commerce Solutions",
Icon = "ecommerce_icon.png",
Description = "Complete e-commerce solutions.",
Price = "$2000/project",
Rating = 4.7
},
new Service
{
Name = "Graphic Design",
Icon = "design_icon.png",
Description = "Professional graphic design services.",
Price = "$80/hour",
Rating = 4.8
},
new Service
{
Name = "Video Production",
Icon = "video_icon.png",
Description = "High-quality video production.",
Price = "$250/hour",
Rating = 4.9
},
new Service
{
Name = "Content Creation",
Icon = "content_icon.png",
Description = "Content writing and creation.",
Price = "$50/hour",
Rating = 4.6
},
new Service
{
Name = "Social Media Management",
Icon = "social_icon.png",
Description = "Manage your social media presence.",
Price = "$150/hour",
Rating = 4.7
},
new Service
{
Name = "Email Marketing",
Icon = "email_icon.png",
Description = "Effective email marketing campaigns.",
Price = "$100/hour",
Rating = 4.5
},
new Service
{
Name = "Branding",
Icon = "branding_icon.png",
Description = "Build and enhance your brand.",
Price = "$500/project",
Rating = 4.8
},
new Service
{
Name = "Public Relations",
Icon = "pr_icon.png",
Description = "Professional PR services.",
Price = "$200/hour",
Rating = 4.9
},
new Service
{
Name = "Photography",
Icon = "photo_icon.png",
Description = "Professional photography services.",
Price = "$150/hour",
Rating = 4.7
},
new Service
{
Name = "Event Planning",
Icon = "event_icon.png",
Description = "Comprehensive event planning.",
Price = "$1000/event",
Rating = 4.6
},
new Service
{
Name = "Consulting",
Icon = "consulting_icon.png",
Description = "Business and IT consulting services.",
Price = "$200/hour",
Rating = 4.8
},
new Service
{
Name = "Translation Services",
Icon = "translation_icon.png",
Description = "Professional translation services.",
Price = "$50/hour",
Rating = 4.5
}
};
}
}
Change the page count
Adjust how many page links are visible in the pager using the PageCount property (default is 8). Increasing the page count shows more page links at once; decreasing it shows fewer links and may require more navigation.
To change the page count in the Blazor MultiColumn ComboBox, use the PageCount property.
The following example demonstrates how to change the page count of a MultiColumn ComboBox using an external button click based on NumericTextBox input.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs
<div class="col-lg-12">
<label class="example-label">Select a service</label>
<SfMultiColumnComboBox TItem="Service" TValue="string" Placeholder="e.g. Web Development" PopupWidth="600px" AllowFiltering="true" PageCount="@PageCount" PageSize="3" DataSource="GridData" AllowPaging="true" TextField="Name" ValueField="Name">
</SfMultiColumnComboBox>
<div class="col-lg-4">
<label class="example-label">Specify the PageCount</label>
<SfNumericTextBox TValue="int" @bind-Value="PageCount" Min="1"></SfNumericTextBox>
</div>
</div>
@code {
public int PageCount = 6;
public class Service
{
public string Name { get; set; }
public string Icon { get; set; }
public string Description { get; set; }
public string Price { get; set; }
public double Rating { get; set; }
}
private IEnumerable<Service> GridData { get; set; }
protected override async Task OnInitializedAsync()
{
GridData = new List<Service>
{
new Service
{
Name = "Cloud Hosting",
Icon = "cloud_icon.png",
Description = "Scalable cloud hosting solutions.",
Price = "$50/month",
Rating = 4.6
},
new Service
{
Name = "Data Analysis",
Icon = "data_icon.png",
Description = "Advanced data analysis services.",
Price = "$150/hour",
Rating = 4.7
},
new Service
{
Name = "SEO Optimization",
Icon = "seo_icon.png",
Description = "Boost your website's SEO.",
Price = "$200/project",
Rating = 4.5
},
new Service
{
Name = "Digital Marketing",
Icon = "marketing_icon.png",
Description = "Comprehensive digital marketing.",
Price = "$100/hour",
Rating = 4.8
},
new Service
{
Name = "Cybersecurity",
Icon = "security_icon.png",
Description = "Protect your digital assets.",
Price = "$300/hour",
Rating = 4.9
},
new Service
{
Name = "Web Development",
Icon = "web_icon.png",
Description = "Full-stack web development services.",
Price = "$100/hour",
Rating = 4.5
},
new Service
{
Name = "Mobile App Development",
Icon = "app_icon.png",
Description = "iOS and Android app development.",
Price = "$120/hour",
Rating = 4.6
},
new Service
{
Name = "IT Support",
Icon = "it_icon.png",
Description = "24/7 IT support services.",
Price = "$75/hour",
Rating = 4.4
},
new Service
{
Name = "E-commerce Solutions",
Icon = "ecommerce_icon.png",
Description = "Complete e-commerce solutions.",
Price = "$2000/project",
Rating = 4.7
},
new Service
{
Name = "Graphic Design",
Icon = "design_icon.png",
Description = "Professional graphic design services.",
Price = "$80/hour",
Rating = 4.8
},
new Service
{
Name = "Video Production",
Icon = "video_icon.png",
Description = "High-quality video production.",
Price = "$250/hour",
Rating = 4.9
},
new Service
{
Name = "Content Creation",
Icon = "content_icon.png",
Description = "Content writing and creation.",
Price = "$50/hour",
Rating = 4.6
},
new Service
{
Name = "Social Media Management",
Icon = "social_icon.png",
Description = "Manage your social media presence.",
Price = "$150/hour",
Rating = 4.7
},
new Service
{
Name = "Email Marketing",
Icon = "email_icon.png",
Description = "Effective email marketing campaigns.",
Price = "$100/hour",
Rating = 4.5
},
new Service
{
Name = "Branding",
Icon = "branding_icon.png",
Description = "Build and enhance your brand.",
Price = "$500/project",
Rating = 4.8
},
new Service
{
Name = "Public Relations",
Icon = "pr_icon.png",
Description = "Professional PR services.",
Price = "$200/hour",
Rating = 4.9
},
new Service
{
Name = "Photography",
Icon = "photo_icon.png",
Description = "Professional photography services.",
Price = "$150/hour",
Rating = 4.7
},
new Service
{
Name = "Event Planning",
Icon = "event_icon.png",
Description = "Comprehensive event planning.",
Price = "$1000/event",
Rating = 4.6
},
new Service
{
Name = "Consulting",
Icon = "consulting_icon.png",
Description = "Business and IT consulting services.",
Price = "$200/hour",
Rating = 4.8
},
new Service
{
Name = "Translation Services",
Icon = "translation_icon.png",
Description = "Professional translation services.",
Price = "$50/hour",
Rating = 4.5
}
};
}
}