Paging in Blazor MultiColumn ComboBox component
29 Nov 202424 minutes to read
Paging provides an option to display data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets.
To enable paging, you need to set the AllowPaging property to true. This property determines whether paging is enabled or disabled for the MultiColumn ComboBox. When paging is enabled, a pager component rendered at the bottom of the MultiColumn ComboBox popup, allowing you to navigate through different pages of data.
Customize the pager options
Customizing the pager options in the Syncfusion® MultiColumn ComboBox allows you to tailor the pagination control according to your specific requirements. You can customize the pager to display the number of pages using the PageCount property and display the number of records in the MultiColumn ComboBox using the PageSize property.
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
The Syncfusion® MultiColumn ComboBox allows you to adjust the number of pages displayed in the pager container. This is useful when you want to manage the number of pages you see while navigating through extensive datasets. The default value of PageCount property is 8.
To change the page count in the Syncfusion® MultiColumn ComboBox, you can utilize the PageCount property, which defines the number of pages displayed in the pager container.
The following example demonstrates how to change the page count of a Grid 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
}
};
}
}