Skip to content

Commit aa54e61

Browse files
SadhanaBaskaranSadhanaBaskaran
committed
993664: Updated the UG content and samples in Blazor Pager Component
1 parent 0e07e95 commit aa54e61

File tree

3 files changed

+195
-15
lines changed

3 files changed

+195
-15
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3745,7 +3745,7 @@
37453745
<a href="/blazor/pager/data-binding">Data Binding</a>
37463746
</li>
37473747
<li>
3748-
<a href="/blazor/pager/behaviour-settings">Behaviour Settings</a>
3748+
<a href="/blazor/pager/behavior-settings">Behavior Settings</a>
37493749
</li>
37503750
<li>
37513751
<a href="/blazor/pager/pager-with-drop-down">Pager with Dropdown</a>

blazor/pager/behaviour-settings.md renamed to blazor/pager/behavior-settings.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
layout: post
33
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.
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.
55
platform: Blazor
66
control: Pager
77
documentation: ug
88
---
99

10-
# Behaviour Settings in Pager Component
10+
# Behavior Settings in Pager Component
1111

1212
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.
1313

‎blazor/pager/navigation.md‎

Lines changed: 192 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,195 @@ documentation: ug
99

1010
# Navigation in Pager Component
1111

12-
The following methods are available in the Pager component for performing Pager actions externally.
13-
14-
| Method | Description |
15-
|----------------------| -----------------------------------------|
16-
| GoToPageAsync | This method navigates the target page by the given number in the argument.|
17-
| GoToLastPageAsync | This method navigates to the last page of the pager component. |
18-
| GoToFirstPageAsync | This method navigates to the first page of the pager component. |
19-
| GoToNextPageAsync | This method navigates to the next page of the pager component. |
20-
| GoToPreviousPageAsync | This method navigates to the previous page of the pager component. |
21-
| UpdatePageSizeAsync | This method updates the page size of the Pager. |
22-
| UpdateNumericItemsCountAsync | This method updates the numeric item count of the Pager. |
23-
| RefreshAsync | This method applies all the property changes and renders the component again. |
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component provides built-in methods for programmatically controlling navigation and updating pager settings. These methods allow external actions such as navigating to specific pages, moving to the first or last page, updating page size, and refreshing the component. Each method can be invoked asynchronously to ensure smooth interaction within Blazor applications.
13+
14+
## Navigate to a Specific Page
15+
16+
The [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_GoToPageAsync_System_Int32_) method navigates to the specified page number.
17+
18+
| Parameter | Type | Description |
19+
|------------|------|---------------------------------|
20+
| pageNo | int | Indicates the page number to navigate.|
21+
22+
23+
```cshtml
24+
@using Syncfusion.Blazor.Navigations
25+
@using Syncfusion.Blazor.Buttons
26+
27+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
28+
<SfButton @onclick="NavigateToPage">Go to Page 5</SfButton>
29+
30+
@code
31+
{
32+
private SfPager? pager;
33+
34+
private async Task NavigateToPage()
35+
{
36+
await pager?.GoToPageAsync(5);
37+
}
38+
}
39+
```
40+
41+
## Navigate to the Last Page
42+
43+
The [GoToLastPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_GoToLastPageAsync) method navigates to the last page of the Pager component.
44+
45+
```cshtml
46+
@using Syncfusion.Blazor.Navigations
47+
@using Syncfusion.Blazor.Buttons
48+
49+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
50+
<SfButton @onclick="NavigateToLastPage">Go to Last Page</SfButton>
51+
52+
@code
53+
{
54+
55+
private SfPager? pager;
56+
57+
private async Task NavigateToLastPage()
58+
{
59+
await pager?.GoToLastPageAsync();
60+
}
61+
}
62+
```
63+
64+
## Navigate to the First Page
65+
66+
The [GoToFirstPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_GoToFirstPageAsync) method navigates to the first page of the Pager component.
67+
68+
```cshtml
69+
@using Syncfusion.Blazor.Navigations
70+
@using Syncfusion.Blazor.Buttons
71+
72+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
73+
<SfButton @onclick="NavigateToFirstPage">Go to First Page</SfButton>
74+
75+
@code
76+
{
77+
78+
private SfPager? pager;
79+
80+
private async Task NavigateToFirstPage()
81+
{
82+
await pager?.GoToFirstPageAsync();
83+
}
84+
}
85+
```
86+
87+
## Navigate to the Next Page
88+
89+
The [GoToNextPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_GoToNextPageAsync) method navigates to the next page of the Pager component.
90+
91+
```cshtml
92+
@using Syncfusion.Blazor.Navigations
93+
@using Syncfusion.Blazor.Buttons
94+
95+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
96+
<SfButton @onclick="NavigateToNextPage">Go to Next Page</SfButton>
97+
98+
@code
99+
{
100+
private SfPager? pager;
101+
102+
private async Task NavigateToNextPage()
103+
{
104+
await pager?.GoToNextPageAsync();
105+
}
106+
}
107+
```
108+
109+
## Navigate to the Previous Page
110+
111+
The [GoToPreviousPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_GoToPreviousPageAsync) method navigates to the previous page of the Pager component.
112+
113+
```cshtml
114+
@using Syncfusion.Blazor.Navigations
115+
@using Syncfusion.Blazor.Buttons
116+
117+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
118+
<SfButton @onclick="NavigateToPreviousPage">Go to Previous Page</SfButton>
119+
120+
@code
121+
{
122+
private SfPager? pager;
123+
124+
private async Task NavigateToPreviousPage()
125+
{
126+
await pager?.GoToPreviousPageAsync();
127+
}
128+
}
129+
```
130+
131+
## Update Page Size
132+
133+
The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_UpdatePageSizeAsync_System_Int32_) method updates the page size of the Pager component.
134+
135+
| Parameter | Type | Description |
136+
|-----------|------|------------------------------|
137+
| pageSize | int | The number of items to be shown on a page. |
138+
139+
```cshtml
140+
@using Syncfusion.Blazor.Navigations
141+
@using Syncfusion.Blazor.Buttons
142+
143+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
144+
<SfButton @onclick="UpdatePageSize">Set Page Size to 20</SfButton>
145+
146+
@code
147+
{
148+
private SfPager? pager;
149+
150+
private async Task UpdatePageSize()
151+
{
152+
await pager?.UpdatePageSizeAsync(20);
153+
}
154+
}
155+
```
156+
157+
## Update Numeric Items Count
158+
159+
The [UpdateNumericItemsCountAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_UpdateNumericItemsCountAsync_System_Int32_) method updates the numeric item count displayed in the Pager.
160+
161+
| Parameter | Type | Description |
162+
|-------------------|------|--------------------------------------------|
163+
| numericItemsCount | int | The number of numeric items to display. |
164+
165+
```cshtml
166+
@using Syncfusion.Blazor.Navigations
167+
@using Syncfusion.Blazor.Buttons
168+
169+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
170+
<SfButton @onclick="UpdateNumericItemsCount">Set Numeric Items to 5</SfButton>
171+
172+
@code
173+
{
174+
private SfPager? pager;
175+
176+
private async Task UpdateNumericItemsCount()
177+
{
178+
await pager?.UpdateNumericItemsCountAsync(5);
179+
}
180+
}
181+
```
182+
183+
## Refresh Pager
184+
185+
The [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_RefreshAsync) method applies all property changes and re-renders the Pager component.
186+
187+
```cshtml
188+
@using Syncfusion.Blazor.Navigations
189+
@using Syncfusion.Blazor.Buttons
190+
191+
<SfPager @ref="pager" PageSize="10" TotalItemsCount="100"></SfPager>
192+
<SfButton @onclick="RefreshPager">Refresh Pager</SfButton>
193+
194+
@code
195+
{
196+
private SfPager? pager;
197+
198+
private async Task RefreshPager()
199+
{
200+
await pager?.RefreshAsync();
201+
}
202+
}
203+
```

0 commit comments

Comments
 (0)