Skip to content

Commit f5571b0

Browse files
993664: Updated the UG content and samples for Blazor Pager Component
1 parent aa54e61 commit f5571b0

File tree

1 file changed

+82
-0
lines changed

1 file changed

+82
-0
lines changed

blazor/pager/behaviour-settings.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
layout: post
3+
title: Behavior Settings in Blazor Pager Component | Syncfusion
4+
description: Learn how to configure core behavior settings page size, numeric item count, total item count, and more in the Syncfusion Blazor Pager component.
5+
platform: Blazor
6+
control: Pager
7+
documentation: ug
8+
---
9+
10+
# Behavior Settings in Pager Component
11+
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component includes properties that control its rendering behavior, such as numeric items and navigation buttons. The total number of pages is determined by the values of the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) and [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) properties.
13+
14+
**Core properties of the pager component**
15+
16+
* [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) – Specifies the number of items displayed per page.
17+
* [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemsCount) – Defines the number of numeric items shown for navigation.
18+
* [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) – Indicates the total number of items in the data collection.
19+
* [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_CurrentPage) – Sets the page to display initially.
20+
* [ShowPagerMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ShowPagerMessage) – Controls the visibility of the pager information message.
21+
22+
## Page size
23+
24+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component provides the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property to define the number of items displayed per page. The default value is **12**.
25+
26+
```csharp
27+
@using Syncfusion.Blazor.Navigations
28+
29+
<SfPager PageSize="5" TotalItemsCount="20">
30+
</SfPager>
31+
32+
```
33+
34+
## Numeric items count
35+
36+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component provides the [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemsCount) property to define how many numeric navigation items are displayed in the pager. The default value is **10**.
37+
38+
```csharp
39+
@using Syncfusion.Blazor.Navigations
40+
41+
<SfPager NumericItemsCount="5" TotalItemsCount="20" PageSize="4">
42+
</SfPager>
43+
44+
```
45+
46+
## Total items count
47+
48+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component provides the [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) property to specify the total number of items in the data collection. This value is used to calculate the total number of pages and render numeric items and navigation buttons.
49+
50+
```csharp
51+
@using Syncfusion.Blazor.Navigations
52+
53+
<SfPager TotalItemsCount="75">
54+
</SfPager>
55+
56+
```
57+
58+
## Current page
59+
60+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component provides the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_CurrentPage) property to specify which page is displayed initially when the pager is rendered. The default value is **1**.
61+
62+
```csharp
63+
@using Syncfusion.Blazor.Navigations
64+
65+
<SfPager CurrentPage="3" TotalItemsCount="20" PageSize="4" NumericItemsCount="5">
66+
</SfPager>
67+
68+
```
69+
70+
## Show pager message
71+
72+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component provides the [ShowPagerMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ShowPagerMessage) property to control the visibility of the pager information message. The default value is **true**. Setting this property to **false** hides the message from the pager container.
73+
74+
```csharp
75+
@using Syncfusion.Blazor.Navigations
76+
77+
<SfPager ShowPagerMessage="true" PageSize="4" NumericItemsCount="5" TotalItemsCount="20">
78+
</SfPager>
79+
80+
```
81+
82+
![Show Blazor Pager Message](./images/blazor-pager-message.png)

0 commit comments

Comments
 (0)