Skip to content

Commit 5e92262

Browse files
Abirami23SSAbirami23SS
committed
993664: Updated the UG content and samples for Blazor Pager Component
1 parent 36bf3c5 commit 5e92262

File tree

4 files changed

+81
-7
lines changed

4 files changed

+81
-7
lines changed

‎blazor/pager/behaviour-settings.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: post
3+
title: Behaviour Settings in Blazor Pager Component | Syncfusion
4+
description: Checkout here and learn about all the basic functionalities of rendering the Syncfusion Blazor Pager component and much more.
5+
platform: Blazor
6+
control: Pager
7+
documentation: ug
8+
---
9+
10+
# Behaviour Settings in Pager Component
11+
12+
This section briefly explains how the Pager API's are helped to render the elements (numeric items and navigation buttons) of the Pager component. The total pages of the Pager component is calculated based on the defined [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) property.
13+
14+
## Page size
15+
16+
The Pager component provides an option to define the number of items to be displayed per page. This can be achieved by using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property. The default value of the `PageSize` property is "12."
17+
18+
```csharp
19+
@using Syncfusion.Blazor.Navigations
20+
21+
<SfPager PageSize="5" TotalItemsCount="20">
22+
</SfPager>
23+
24+
```
25+
26+
## Numeric items count
27+
28+
The Pager component provides an option to define the number of numeric items to be displayed in the Pager for navigation. This can be achieved by using the [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemsCount) property. The default value of the `NumericItemsCount` property is "10."
29+
30+
```csharp
31+
@using Syncfusion.Blazor.Navigations
32+
33+
<SfPager NumericItemsCount="5" TotalItemsCount="20" PageSize="4">
34+
</SfPager>
35+
36+
```
37+
38+
## Total items count
39+
40+
The Pager component provides an option to define the total number of items available in the assigned data collection, which is used to render the elements(numeric items, navigation buttons) of Pager component. This can be achieved by using the [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount) property of the Pager.
41+
42+
```csharp
43+
@using Syncfusion.Blazor.Navigations
44+
45+
<SfPager TotalItemsCount="75">
46+
</SfPager>
47+
48+
```
49+
50+
## Current page
51+
52+
Blazor Pager component support to define which page to be displayed currently in the Pager using the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_CurrentPage) property. The default value of the `CurrentPage` property is "1".
53+
54+
```csharp
55+
@using Syncfusion.Blazor.Navigations
56+
57+
<SfPager CurrentPage="3" TotalItemsCount="20" PageSize="4" NumericItemsCount="5">
58+
</SfPager>
59+
60+
```
61+
62+
## Show pager message
63+
64+
The Pager component provides an option to show or hide the Pager information in the Pager container. This can be achieved by using the [ShowPagerMessage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ShowPagerMessage) property. The default value of the `ShowPagerMessage` is **true**. Setting `ShowPagerMessage` to **false** hides the Pager information.
65+
66+
```csharp
67+
@using Syncfusion.Blazor.Navigations
68+
69+
<SfPager ShowPagerMessage="true" PageSize="4" NumericItemsCount="5" TotalItemsCount="20">
70+
</SfPager>
71+
72+
```
73+
74+
![Show Blazor Pager Message](./images/blazor-pager-message.png)

‎blazor/pager/data-binding.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component can
9999

100100
## Remote Data Binding
101101

102-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component supports paging for data retrieved from remote services. The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component manages remote operations such as **querying**, **filtering**, and **paging**. The [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property specifies the number of items displayed per page. The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event updates query parameters to fetch the correct subset of data.
102+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component supports paging for data retrieved from remote services. The [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component manages remote operations such as **querying**, **filtering**, and **paging**. The [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property specifies the number of items displayed per page. The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event updates query parameters to fetch the correct subset of data.
103103
104104
```csharp
105105
@using Syncfusion.Blazor.Lists

‎blazor/pager/getting-started-webapp.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting started with Blazor Pager Component in Blazor Web App
1111

12-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component enables navigation through large collections by dividing content into multiple pages. This guide details the integration of the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in a **Blazor Web App** using [Visual Studio](https://visualstudio.microsoft.com/vs/) or **Visual Studio Code**.
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component enables navigation through large collections by dividing content into multiple pages. This guide details the integration of the [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in a **Blazor Web App** using [Visual Studio](https://visualstudio.microsoft.com/vs/) or **Visual Studio Code**.
1313

1414
{% tabcontents %}
1515

@@ -307,7 +307,7 @@ Add the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-
307307

308308
**3. Add Pager component**
309309

310-
Add the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in the same file (**Pages/Index.razor**) below the **ListView**. Configure the essential properties:
310+
Add the [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in the same file (**Pages/Index.razor**) below the **ListView**. Configure the essential properties:
311311

312312
* [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) – defines the number of items displayed per page.
313313
* [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemsCount) – specifies the count of numeric pager buttons.
@@ -324,7 +324,7 @@ Add the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Naviga
324324
{% endhighlight %}
325325
{% endtabs %}
326326

327-
> For additional properties of SfPager, refer to the API Reference.
327+
> For additional properties of [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html), refer to the API Reference.
328328
329329
**4. Integrate ListView with Pager**
330330

‎blazor/pager/getting-started.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting Started with Blazor Pager Component
1111

12-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component enables navigation through large collections by dividing content into multiple pages. This guide explains how to integrate the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in a **Blazor WebAssembly** application using [Visual Studio](https://visualstudio.microsoft.com/vs/) or **Visual Studio Code**.
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component enables navigation through large collections by dividing content into multiple pages. This guide explains how to integrate the [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in a **Blazor WebAssembly** application using [Visual Studio](https://visualstudio.microsoft.com/vs/) or **Visual Studio Code**.
1313

1414
{% youtube
1515
"youtube:https://www.youtube.com/watch?v=Nfg8b_bbIfI" %}
@@ -239,7 +239,7 @@ Add the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-
239239

240240
**2. Add Pager component**
241241

242-
Add the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component in the same file (**Pages/Index.razor**) below the **ListView**. Configure the essential properties:
242+
Add the `Pager` component in the same file (**Pages/Index.razor**) below the **ListView**. Configure the essential properties:
243243

244244
* [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) – defines the number of items displayed per page.
245245
* [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_NumericItemsCount) – specifies the count of numeric pager buttons.
@@ -252,7 +252,7 @@ Add the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Naviga
252252
</SfPager>
253253
```
254254

255-
> For additional properties of [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html), refer to the API Reference.
255+
> For additional properties of [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html), refer to the API Reference.
256256
257257
**3. Integrate Pager with ListView**
258258

0 commit comments

Comments
 (0)