|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | 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. |
5 | 5 | platform: Blazor |
6 | 6 | control: Pager |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # Data Binding in Blazor Pager Component |
11 | 11 |
|
12 | | -## Local Data |
| 12 | +The Syncfusion<sup style="font-size:70%">®</sup> Blazor Pager component divides **local** or **remote** data collections into paged views. It provides navigation controls to manage large datasets efficiently. |
13 | 13 |
|
14 | | -The Blazor Pager component has an option to split the collection of data sets (local data) into sectioned pages. |
| 14 | +**When to Use:** |
15 | 15 |
|
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%">®</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. |
17 | 22 |
|
18 | 23 | ```csharp |
19 | 24 | @using Syncfusion.Blazor.Data |
@@ -92,11 +97,9 @@ In the following sample, initially list view items are displayed per page based |
92 | 97 | </style> |
93 | 98 | ``` |
94 | 99 |
|
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 |
98 | 101 |
|
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%">®</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. |
100 | 103 |
|
101 | 104 | ```csharp |
102 | 105 | @using Syncfusion.Blazor.Lists |
|
0 commit comments