Skip to content

Commit 0e07e95

Browse files
993664: Updated the Data Binding UG content and samples in Blazor Pager Component
1 parent ee375c0 commit 0e07e95

File tree

1 file changed

+11
-8
lines changed

1 file changed

+11
-8
lines changed

blazor/pager/data-binding.md

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
---
22
layout: post
33
title: Data Binding in Blazor Pager Component | Syncfusion
4-
description: Checkout and learn here all about working Syncfusion Blazor Pager component with both local or remote data collection and how it splits into sectioned pages.
4+
description: Learn how the Syncfusion Blazor Pager component segments local or remote data collections into paged views.
55
platform: Blazor
66
control: Pager
77
documentation: ug
88
---
99

1010
# Data Binding in Blazor Pager Component
1111

12-
## Local Data
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component divides **local** or **remote** data collections into paged views. It provides navigation controls to manage large datasets efficiently.
1313

14-
The Blazor Pager component has an option to split the collection of data sets (local data) into sectioned pages.
14+
**When to Use:**
1515

16-
In the following sample, initially list view items are displayed per page based on the Pager's PageSize property. While navigating the numeric items in the Pager, the `ItemClick` event will be triggered. In the `ItemClick` event of the Pager, we have calculated the number of items displayed per page in the ListView component. Here, items in the ListView component are loaded from local data collection.
16+
- Use **Local Data** for **small**, **static** collections that can be loaded in memory.
17+
- Use **Remote Data** for **large** or **dynamic** datasets that require server-side operations.
18+
19+
## Local Data Binding
20+
21+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pager component can segment an in-memory data collection into multiple pages. The [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property defines 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 the displayed subset when navigating between pages.
1722

1823
```csharp
1924
@using Syncfusion.Blazor.Data
@@ -92,11 +97,9 @@ In the following sample, initially list view items are displayed per page based
9297
</style>
9398
```
9499

95-
## Remote Data
96-
97-
The Blazor Pager component has an option to split the collection of data sets (remote data) into sectioned pages.
100+
## Remote Data Binding
98101

99-
In the following sample, initially list view items are displayed per page based on the Pager's PageSize property. While navigating the numeric items in the Pager, the `ItemClick` event will be triggered. In the `ItemClick` event of the Pager, we have calculated the number of items displayed per page in the ListView component. Here, items in the ListView component are loaded from the remote data services.
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.
100103
101104
```csharp
102105
@using Syncfusion.Blazor.Lists

0 commit comments

Comments
 (0)