Skip to content

Commit 13b603d

Browse files
keerthanaRajendrankeerthanaRajendran
authored
Merge pull request #4833 from syncfusion-content/908289-UG-FM-Pagination
908289: Added UG document for Pagination and Range selection feature of Blazor File Manager
2 parents 080e7e4 + 2c9eff7 commit 13b603d

9 files changed

+217
-0
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2804,6 +2804,7 @@
28042804
<li> <a href="/blazor/file-manager/multiple-file-selection">Multiple File Selection</a></li>
28052805
<li> <a href="/blazor/file-manager/drag-and-drop">Drag and Drop</a></li>
28062806
<li> <a href="/blazor/file-manager/virtualization">Virtualization</a></li>
2807+
<li> <a href="/blazor/file-manager/pagination">Pagination</a></li>
28072808
<li> <a href="/blazor/file-manager/accessibility">Accessibility</a></li>
28082809
<li>How To
28092810
<ul>

‎blazor/file-manager/images/blazor-filemanager-currentpage.png‎

29.2 KB
Loading

‎blazor/file-manager/images/blazor-filemanager-numericitemcount.png‎

33.4 KB
Loading

‎blazor/file-manager/images/blazor-filemanager-page-template.png‎

32.6 KB
Loading

‎blazor/file-manager/images/blazor-filemanager-pagesize-dropdown.png‎

35.8 KB
Loading

‎blazor/file-manager/images/blazor-filemanager-pagesize.png‎

32.3 KB
Loading

‎blazor/file-manager/images/blazor-filemanager-pagination.png‎

39.5 KB
Loading

‎blazor/file-manager/multiple-file-selection.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,29 @@ For example, in the following example, selection is prevented for the **Music**
101101
102102
```
103103

104+
## Range Selection
105+
106+
The File Manager supports for selecting files and folders in specific ranges through mouse drag as like File Explorer. This is particularly useful in scenarios where users need to select a large group of files quickly without manually clicking each one.
107+
108+
### Enabling Range Selection
109+
110+
To enable range selection, you need to set the [EnableRangeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableRangeSelection) property to `true` and ensure that multi-selection is allowed using the [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property.
111+
112+
````cshtml
113+
@using Syncfusion.Blazor.FileManager;
114+
<div class="control-section">
115+
<div class="control_wrapper">
116+
<SfFileManager @ref="File" TValue="FileManagerDirectoryContent" AllowMultiSelection="true" EnableRangeSelection="true">
117+
<FileManagerAjaxSettings Url="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3Fileoperations"
118+
UploadUrl="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3Upload"
119+
DownloadUrl="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3Download"
120+
GetImageUrl="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3GetImage">
121+
</FileManagerAjaxSettings>
122+
</SfFileManager>
123+
</div>
124+
</div>
125+
````
126+
104127
## Events
105128

106129
The Blazor FileManager component includes FileSelection and FileSelected events which are triggered during file selection and after a file has been selected, respectively. These events can be bound to the FileManager using the **FileManagerEvents**, which requires the **TValue** to be provided.

‎blazor/file-manager/pagination.md‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
---
2+
layout: post
3+
title: Pagination in Blazor File Manager Component | Syncfusion
4+
description: Checkout and learn here all about Pagination in the Syncfusion Blazor File Manager component and more.
5+
platform: Blazor
6+
control: File Manager
7+
documentation: ug
8+
---
9+
10+
# Pagination in Blazor File Manager Component
11+
12+
Pagination provides an option to display files and folders in segmented pages, making it easier to navigate through large directories. This feature is particularly useful when dealing with extensive file systems in the File Manager component.
13+
14+
To enable pagination, you need to set the [allowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the File Manager. When `allowPaging` is enabled, a pager control rendered at the bottom of the File Manager, allowing you to navigate through different pages.
15+
16+
## Customize the pagination options
17+
18+
Customizing the pagination options in the Syncfusion File Manager allows you to tailor the File Manager pager according to your specific requirements. You can customize the pagination to display the number of pages using the `NumericItemCount` property, change the current page using `currentPage` property, display the number of records in the File Manager using the `pageSize` property, and even adjust the page sizes in a dropdown using the `pageSizes` property.
19+
20+
### Change the page size
21+
22+
The Syncfusion File Manager allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the [pageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPagesSettings.html#Syncfusion_Blazor_FileManager_FileManagerPagesSettings_PageSizes) property. This property is used to specify the initial number of records to display on each page.
23+
24+
The following example demonstrates how to change the page size of a File Manager using the `PageSize` property.
25+
26+
````cshtml
27+
@using Syncfusion.Blazor.FileManager;
28+
@using Syncfusion.Blazor.Navigations;
29+
30+
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
31+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
32+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
33+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
34+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
35+
</FileManagerAjaxSettings>
36+
<FileManagerPageSettings PageSize="3"></FileManagerPageSettings>
37+
</SfFileManager>
38+
````
39+
Below is a screenshot illustrating the `PageSize` property in the File Manager component.
40+
41+
![Pagination in Blazor File Manager](images/blazor-filemanager-pagesize.png)
42+
43+
### Change the page count
44+
45+
The [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPagesSettings.html#Syncfusion_Blazor_FileManager_FileManagerPagesSettings_NumericItemsCount) property is used to control the number of numeric buttons displayed in the pager when pagination is enabled.
46+
47+
````cshtml
48+
@using Syncfusion.Blazor.FileManager;
49+
@using Syncfusion.Blazor.Navigations;
50+
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true" >
51+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
52+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
53+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
54+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
55+
</FileManagerAjaxSettings>
56+
<FileManagerEvents TValue="FileManagerDirectoryContent" PageChanging="OnChanging" PageChanged="OnChanged"></FileManagerEvents>
57+
<FileManagerPageSettings NumericItemsCount="5"></FileManagerPageSettings>
58+
</SfFileManager>
59+
````
60+
61+
Below is a screenshot illustrating the `NumericItemCount` property in the File Manager component.
62+
63+
![Pagination in Blazor File Manager](images/blazor-filemanager-numericitemcount.png)
64+
65+
### Change the current page
66+
67+
The Syncfusion File Manager allows you to change the currently displayed page, which can be particularly useful when you need to navigate through different pages of data either upon the initial rendering of the File Manager or update the displayed page based on interactions or specific conditions. The default value of **CurrentPage** property is 1.
68+
69+
To change the current page in the Syncfusion File Manager, you can utilize the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPagesSettings.html#Syncfusion_Blazor_FileManager_FileManagerPagesSettings_CurrentPage) property in [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) component, which defines the current page number of the pager.
70+
71+
The following example demonstrates how to implement the `CurrentPage` property.
72+
73+
````cshtml
74+
@using Syncfusion.Blazor.FileManager;
75+
@using Syncfusion.Blazor.Navigations;
76+
77+
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
78+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
79+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
80+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
81+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
82+
</FileManagerAjaxSettings>
83+
<FileManagerPageSettings PageSize="3" CurrentPage="2">
84+
85+
</FileManagerPageSettings>
86+
</SfFileManager>
87+
````
88+
Below is a screenshot illustrating the `CurrentPage` property in the File Manager component.
89+
90+
![Pagination in Blazor File Manager](images/blazor-filemanager-currentpage.png)
91+
92+
93+
## Pager Template in Blazor File Manager
94+
95+
The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_Template) property in the [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) allows you to insert custom UI elements, such as buttons or any HTML elements into the File Manager page settings. This offers greater flexibility and customization for the paging interface.
96+
97+
### How to navigate to particular page
98+
99+
By invoking the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GoToPageAsync) method within the pager template for the Blazor File Manager component, you can navigate to a specific page by passing the page number to the method.
100+
101+
Below is an example on how to customize pagination in the Syncfusion File Manager by adding a custom button and using the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GoToPageAsync) method in the pager template for specific page navigation.
102+
103+
````cshtml
104+
@using Syncfusion.Blazor.FileManager;
105+
@using Syncfusion.Blazor.Navigations;
106+
<SfFileManager @ref="fileManager" TValue="FileManagerDirectoryContent" AllowPaging="true">
107+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
108+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
109+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
110+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
111+
</FileManagerAjaxSettings>
112+
<FileManagerPageSettings PageSize="3">
113+
<Template>
114+
<button @onclick="NavigateToPage">Go To Page 2</button>
115+
</Template>
116+
</FileManagerPageSettings>
117+
</SfFileManager>
118+
@code {
119+
SfFileManager<FileManagerDirectoryContent> fileManager;
120+
121+
private async Task NavigateToPage()
122+
{
123+
await fileManager.GoToPageAsync(2);
124+
}
125+
}
126+
127+
````
128+
129+
The screenshot below shows the Blazor File Manager component with a custom pagination button.
130+
131+
![Pager Template in Blazor File Manager](images/blazor-filemanager-page-template.png)
132+
133+
### Pager with Page Sizes dropdown
134+
135+
The [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) component's [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPagesSettings.html#Syncfusion_Blazor_FileManager_FileManagerPagesSettings_PageSizes) property enables a dropdown in pager that allows you to dynamically change the number of records displayed in the current page. [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPagesSettings.html#Syncfusion_Blazor_FileManager_FileManagerPagesSettings_PageSizes) property allows number of items to be loaded in a single page.
136+
137+
Here is a sample demonstrating how `PageSizes` property is used when Pagination enabled in the File Manager.
138+
139+
```cshtml
140+
141+
@using Syncfusion.Blazor.FileManager
142+
143+
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true" Path="/Text Documents/" SortComparer="new NaturalSortComparer()">
144+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
145+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
146+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
147+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
148+
</FileManagerAjaxSettings>
149+
<FileManagerPageSettings PageSizes="@(new List<int>(){10,25,50})"></FileManagerPageSettings>
150+
</SfFileManager>
151+
152+
```
153+
154+
The screenshot below shows the Pages Sizes dropdown in the File Manager.
155+
156+
![Pagination in Blazor File Manager](images/blazor-filemanager-pagesize-dropdown.png)
157+
158+
## Events in Pagination
159+
160+
You can add events to handle actions during pagination in the File Manager.
161+
162+
The [PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_PageChanging) event triggers before the page is changed, allowing you to handle actions before navigation.
163+
164+
The [PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_PageChanged) event occurs after the page has been switched, allows you to perform actions like loading new data after the page has changed.
165+
166+
````cshtml
167+
@using Syncfusion.Blazor.FileManager;
168+
@using Syncfusion.Blazor.Navigations;
169+
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
170+
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations"
171+
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload"
172+
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download"
173+
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage">
174+
</FileManagerAjaxSettings>
175+
<FileManagerEvents TValue="FileManagerDirectoryContent" PageChanging="OnChanging" PageChanged="OnChanged"></FileManagerEvents>
176+
</SfFileManager>
177+
@code {
178+
179+
public void OnChanging(PageChangingEventArgs args)
180+
{
181+
//Add the required code here
182+
}
183+
public void OnChanged(PageChangedEventArgs args)
184+
{
185+
//Add the required code here
186+
}
187+
}
188+
189+
````
190+
191+
## See also
192+
193+
* [How to Enable Virtualization in Blazor File Manager Component](https://blazor.syncfusion.com/documentation/file-manager/virtualization)

0 commit comments

Comments
 (0)