Merge branch 'development' into EJ2-910313-update-ug

Author: DhinaParandhaman

blazor-toc.html

@@ -2804,6 +2804,7 @@
 			<li> <a href="/blazor/file-manager/multiple-file-selection">Multiple File Selection</a></li>
 			<li> <a href="/blazor/file-manager/drag-and-drop">Drag and Drop</a></li>
 			<li> <a href="/blazor/file-manager/virtualization">Virtualization</a></li>
+			<li> <a href="/blazor/file-manager/pagination">Pagination</a></li>
 			<li> <a href="/blazor/file-manager/accessibility">Accessibility</a></li>
 			<li>How To
 				<ul>

blazor/circular-gauge/how-to/place-gauge-inside-other-components.md

@@ -9,24 +9,22 @@ documentation: ug
 
 # Render Circular Gauge component inside other components
 
-The Circular Gauge can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the Circular Gauge component renders before other components, so a boolean variable ((i.e. boolean flag) is used to determine when to begin rendering the Circular Gauge component.
+The Circular Gauge can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the Circular Gauge component renders before other components, so a boolean variable (i.e. boolean flag) is used to determine when to begin rendering the Circular Gauge component.
 
 ## Circular Gauge component inside Dashboard Layout
 
-When the Circular Gauge component renders within a panel of the Dashboard Layout component, its rendering begins concurrently with the Dashboard Layout component's rendering. As a result, the size of the Circular Gauge component will not be proper. To properly render the Circular Gauge component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the Circular Gauge component's rendering. The boolean variable is set to **false** by default, so the Circular Gauge component will not be rendered initially. When the Dashboard Layout component is rendered, its [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Created) event is fired, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to **true** to initiate the render of the Circular Gauge component.
+When the Circular Gauge component renders within a panel of the Dashboard Layout component, its rendering begins concurrently with the Dashboard Layout component's rendering. As a result, the size of the Circular Gauge component will not be proper. To properly render the Circular Gauge component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the Circular Gauge component's rendering. The boolean variable is set to **false** by default, so the Circular Gauge component will not be rendered initially. When the Dashboard Layout component is rendered, its [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Created) event is fired. Within this event, the `Task.Yield()` method should be called, and the boolean variable (i.e. **IsInitialRender**) should be set to **true** to initiate the rendering of the Circular Gauge component. This ensures that the Dashboard Layout component is fully rendered before the Circular Gauge component begins rendering.
 
-When you drag and resize the Dashboard Layout's panel, the Circular Gauge component is not notified, so the Circular Gauge is not properly rendered within the panel. To avoid this scenario, the Circular Gauge component's [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_RefreshAsync) method must be called in the Dashboard Layout's [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Resizing) and [OnResizeStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_OnResizeStop) events. Because the panel size of the Dashboard Layout is determined after a delay, a 100 millisecond delay must be provided before refreshing the Circular Gauge component.
-
-On window resizing, the Circular Gauge component is not notified, so the Circular Gauge is not properly rendered within the panel. To avoid this scenario, the Dashboard Layout component's [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_RefreshAsync) and  the Circular Gauge component's [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_RefreshAsync) method must be called in the Dashboard Layout's [OnWindowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_OnWindowResize) events.
+When you drag and resize the Dashboard Layout panel or resize the window, the Circular Gauge component is not notified and thus may not render properly within the panel. To address this, call the Circular Gauge component's [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_RefreshAsync) method within the Dashboard Layout's [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Resizing) and [OnWindowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_OnWindowResize) events. Additionally, apply a 500-millisecond delay using a timer to refresh the Circular Gauge components after resizing is complete.
 
 ```cshtml
 
 @using Syncfusion.Blazor.CircularGauge
 @using Syncfusion.Blazor.Layouts
 @using Syncfusion.Blazor.Inputs
 
-<SfDashboardLayout ID="DashBoard" @ref="DashboardLayout" AllowResizing="true"  AllowFloating="true" CellSpacing="@CellSpacing" Columns="20">
-<DashboardLayoutEvents Created="Created" OnResizeStop="@ResizingHandler" OnWindowResize="@ResizingWindow" Resizing="ResizingHandler"></DashboardLayoutEvents>
+<SfDashboardLayout ID="DashBoard" AllowResizing="true"  AllowFloating="true" CellSpacing="@CellSpacing" Columns="20">
+<DashboardLayoutEvents Created="Created" OnWindowResize="@ResizingWindow" Resizing="@ResizingWindow"></DashboardLayoutEvents>
     <DashboardLayoutPanels>
         <DashboardLayoutPanel Id="LayoutOne" Row="0" Col="5" SizeX="5" SizeY="7">
             <HeaderTemplate><div> Circular Gauge </div></HeaderTemplate>
@@ -110,7 +108,7 @@ On window resizing, the Circular Gauge component is not notified, so the Circula
                                         </CircularGaugePointer>
                                     </CircularGaugePointers>
                                     <CircularGaugeAnnotations>
-                                        <CircularGaugeAnnotation Radius="0%" Angle="0" ZIndex="1">
+                                        <CircularGaugeAnnotation Radius="30%" Angle="90" ZIndex="1">
                                             <ContentTemplate>
                                                 <div class="annotationText">60/100</div>
                                             </ContentTemplate>
@@ -138,40 +136,39 @@ On window resizing, the Circular Gauge component is not notified, so the Circula
     SfCircularGauge GaugeOne;
     SfCircularGauge GaugeTwo;
     SfCircularGauge GaugeThree;
-    SfDashboardLayout DashboardLayout;
+    private Timer _resizeTimer;
 
     public bool IsInitialRender { get; set; }
     public double[] CellSpacing = { 10, 10 };
 
     public async void Created(Object args)
     {
+        await Task.Yield();
         IsInitialRender = true;
     }
 
     public async Task ResizingWindow(ResizeArgs args)
     {
-        await DashboardLayout.RefreshAsync();
+        if (_resizeTimer != null)
+        {
+            _resizeTimer.Dispose();
+        }
+        _resizeTimer = new Timer(async _ =>
+        {
+            await InvokeAsync(() =>
+            {
+                RefreshComponents();
+            });
+        }, null, 500, Timeout.Infinite);
+    }
+    
+    private async Task RefreshComponents()
+    {
+        await Task.Yield();
         await GaugeOne.RefreshAsync();
         await GaugeTwo.RefreshAsync();
         await GaugeThree.RefreshAsync();
     }
-
-    public async Task ResizingHandler(ResizeArgs args)
-    {
-        if (args.Id == "LayoutOne")
-        {
-            await Task.Delay(100);
-            GaugeOne.RefreshAsync();
-        } else if (args.Id == "LayoutTwo")
-        {
-            await Task.Delay(100);
-            GaugeTwo.RefreshAsync();
-        } else if (args.Id == "LayoutThree")
-        {
-            await Task.Delay(100);
-            GaugeThree.RefreshAsync();
-        }
-    }
 }
 
 ```
@@ -323,7 +320,7 @@ When the Circular Gauge component renders within the Tab component, its renderin
 
 ## Circular Gauge component inside Dialog
 
-When the Circular Gauge component renders within the Dialog component, its rendering begins concurrently with the Dialog component's rendering. As a result, the size of the Circular Gauge component will not be proper. To properly render the Circular Gauge component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the Circular Gauge component's rendering. The boolean variable is set to **false** by default, so the Circular Gauge component will not be rendered initially. When the Dialog component is being opened, its [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOpen) event is fired, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to **true** to initiate the render of the Circular Gauge component. When the Dialog component is closed, its [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Closed) event is fired, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to **false**.
+When the Circular Gauge component renders within the Dialog component, its rendering begins concurrently with the Dialog component's rendering. As a result, the size of the Circular Gauge component will not be proper. To properly render the Circular Gauge component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the Circular Gauge component's rendering. The boolean variable is set to **false** by default, so the Circular Gauge component will not be rendered initially. When the Dialog component is being opened, its [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event is fired, and the boolean variable (i.e. **IsInitialRender**) must be set to **true** to initiate the render of the Circular Gauge component. When the Dialog component is closed, its [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Closed) event is triggered, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to false.
 
 When you drag and resize the Dialog component, the Circular Gauge component is not notified, so the Circular Gauge is not properly rendered within the Dialog. To avoid this scenario, the Circular Gauge component's `RefreshAsync` method must be called in the Dialog's [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Resizing) and [OnResizeStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnResizeStop) events. Because the size of the Dialog is determined after a delay, a 100 millisecond delay must be provided before refreshing the Circular Gauge component.
 
@@ -340,7 +337,7 @@ When you drag and resize the Dialog component, the Circular Gauge component is n
         }
     </div>
     <SfDialog ResizeHandles="@DialogResizeDirections" AllowDragging="true" Height="400px" Width="400px" EnableResize="true" ShowCloseIcon="true" @bind-Visible="Visibility">
-        <DialogEvents OnResizeStop="@OnResizeStopHandler" Resizing="OnResizeStopHandler" OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
+        <DialogEvents OnResizeStop="@OnResizeStopHandler" Resizing="OnResizeStopHandler" Opened="@DialogOpen" Closed="@DialogClose"></DialogEvents>
         <DialogTemplates>
             <Header>Circular Gauge</Header>
             <Content> 
@@ -390,7 +387,7 @@ When you drag and resize the Dialog component, the Circular Gauge component is n
         Gauge.RefreshAsync();
     }
 
-    private void DialogOpen(Object args)
+    public void DialogOpen(Object args)
     {
         this.ShowButton = false;
         IsInitialRender = true;

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

@@ -101,6 +101,29 @@ For example, in the following example, selection is prevented for the **Music**
 
 ```
 
+## Range Selection
+
+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. 
+
+### Enabling Range Selection
+
+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.
+
+````cshtml
+@using Syncfusion.Blazor.FileManager;
+<div class="control-section">
+    <div class="control_wrapper">
+        <SfFileManager @ref="File" TValue="FileManagerDirectoryContent" AllowMultiSelection="true" EnableRangeSelection="true">
+            <FileManagerAjaxSettings Url="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3Fileoperations"
+                                     UploadUrl="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3Upload"
+                                     DownloadUrl="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3Download"
+                                     GetImageUrl="https://amazons3.azurewebsites.net/api/AmazonS3Provider/AmazonS3GetImage">
+            </FileManagerAjaxSettings>
+        </SfFileManager>
+    </div>
+</div>
+````
+
 ## Events
 
 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.