docs(common): Fix broken REPL examples

components/fileselect/events.md

@@ -39,102 +39,85 @@ Property | Type | Description
 
 ## OnSelect
 
-The `OnSelect` fires when one or more files have been selected. The selection of files is achieved either through the **Select files** button or by dropping the files anywhere in the component.
+The `OnSelect` fires when one or more files have been selected. The selection of files is achieved either through the **Select Files** button or by dropping the files anywhere in the component.
 
 The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo), which contains a list of `FileInfo` objects that allow the processing of the files.
 
->caption Handling the `OnSelect` event of the FileSelect
+See the [example below](#example).
 
-````RAZOR
-@*Handle the OnSelect event of the FileSelect to access the selected files and upload them*@
+## OnRemove
+
+The `OnRemove` fires when a file has been removed from the list of selected files either by clicking the **x** icon or by pressing the `Del` key.
+
+The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo). As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one).
 
-@using System.IO
-@using Microsoft.AspNetCore.Hosting
+## Example
+
+>caption Handling the `OnSelect` and `OnRemove` events of the FileSelect
+
+````RAZOR
 @using System.Threading
-@using Telerik.Blazor.Components.FileSelect
 
-@inject IWebHostEnvironment HostingEnvironment
+@*This code works only in Blazor Server apps.*@
+@*@using Microsoft.AspNetCore.Hosting*@
+@*@inject IWebHostEnvironment HostingEnvironment*@
 
-<div style="width:300px">
-    <TelerikFileSelect OnSelect=@HandleFiles
-                       AllowedExtensions="@AllowedExtensions">
-    </TelerikFileSelect>
-    <div class="k-form-hint">
-        Expected files: <strong>JPG, PNG, GIF</strong>
-    </div>
+@* Avoid namespace conflict with SvgIcons.File *@
+@using IONS = System.IO
+
+
+<div class="k-form-hint">
+    Expected files: <strong>@string.Join(", ", AllowedExtensions)</strong>
 </div>
 
+<TelerikFileSelect AllowedExtensions="@AllowedExtensions"
+                   OnRemove="@RemoveFiles"
+                   OnSelect="@HandleFiles">
+</TelerikFileSelect>
+
 @code {
-    public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
-    public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();
+    private readonly List<string> AllowedExtensions = new() { ".jpg", ".png", ".gif" };
+
+    private Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new();
 
     private async Task HandleFiles(FileSelectEventArgs args)
     {
         foreach (var file in args.Files)
         {
             if (!file.InvalidExtension)
             {
-                // save to local file system
-                await UploadFile(file);
-                // or read file in-memory
-                //await ReadFile(file);
+                // Read file in-memory.
+                await ReadFile(file);
+
+                // OR
+
+                // Save to local file system.
+                // This works only in server apps and the Upload component may be a better choice.
+                //await UploadFile(file);
             }
         }
     }
 
-    private async Task UploadFile(FileSelectFileInfo file)
-    {
-        // This code will work in Blazor Server apps.
-        // Saving files on the user device is not allowed in WebAssembly apps.
-        Tokens.Add(file.Id, new CancellationTokenSource());
-        var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
-        await using FileStream fs = new FileStream(path, FileMode.Create);
-        await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
-    }
-
     private async Task ReadFile(FileSelectFileInfo file)
     {
         Tokens.Add(file.Id, new CancellationTokenSource());
-        var byteArray = new byte[file.Size];
-        await using MemoryStream ms = new MemoryStream(byteArray);
+        byte[] byteArray = new byte[file.Size];
+        await using IONS.MemoryStream ms = new(byteArray);
         await file.Stream.CopyToAsync(ms, Tokens[file.Id].Token);
     }
-}
-````
 
+    private async Task UploadFile(FileSelectFileInfo file)
+    {
+        // This code works only in Blazor Server apps.
+        // Saving files on the user device is not allowed in WebAssembly apps.
 
-## OnRemove
-
-The `OnRemove` fires when a file has been removed from the list of selected files either by clicking the **x** icon or by pressing the `Del` key.
-
-The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo). As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one).
-
->caption Handling the `OnRemove` event of the FileSelect
-
-````RAZOR
-@*Handle the OnRemove event of the FileSelect to access and delete the uploaded files*@
-
-@using System.IO
-@using Microsoft.AspNetCore.Hosting
-@using System.Threading
-@using Telerik.Blazor.Components.FileSelect
-
-@inject IWebHostEnvironment HostingEnvironment
-
-<div style="width:300px">
-	<TelerikFileSelect OnRemove=@HandleRemoveFiles
-					   AllowedExtensions="@AllowedExtensions">
-	</TelerikFileSelect>
-	<div class="k-form-hint">
-		Expected files: <strong>JPG, PNG, GIF</strong>		
-	</div>
-</div>
-
-@code {
-	public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
-	public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();
+        //Tokens.Add(file.Id, new CancellationTokenSource());
+        //string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
+        //await using FileStream fs = new FileStream(path, FileMode.Create);
+        //await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
+    }
 
-	private async Task HandleRemoveFiles(FileSelectEventArgs args)
+    private async Task RemoveFiles(FileSelectEventArgs args)
     {
         foreach (var file in args.Files)
         {
@@ -144,19 +127,23 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
 
             await Task.Delay(1);
 
-            var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
+            // This code works only in Blazor Server apps.
+            // Saving files on the user device is not allowed in WebAssembly apps.
 
-            // Remove the file from the file system
-            File.Delete(path);
-        }
+            //string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
 
+            //if (IONS.File.Exists(path))
+            //{
+            //    // Remove the file from the file system
+            //    IONS.File.Delete(path);
+            //}
+        }
     }
 }
 ````
 
 @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
 
-
 ## See Also
 
 * [Live Demo: Blazor FileSelect Events](https://demos.telerik.com/blazor-ui/fileselect/events)

components/grid/templates/row.md

@@ -28,7 +28,7 @@ Render the entire row with your own code and logic
 <TelerikGrid Data=@MyData Height="500px">
 	<RowTemplate Context="employee">
 		<td>
-			<img class="rounded-circle" src="@($"/images/{employee.ID}.jpg")" alt="employee photo" />
+			<TelerikAvatar Type="AvatarType.Text">E @employee.ID</TelerikAvatar>
 			<strong>@employee.Name</strong>
 		</td>
 		<td>
@@ -50,23 +50,18 @@ Render the entire row with your own code and logic
 	}
 
 	public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
-	{
-		ID = x,
-		Name = "name " + x,
-		HireDate = DateTime.Now.AddDays(-x)
-	});
+		{
+			ID = x,
+			Name = "name " + x,
+			HireDate = DateTime.Now.AddDays(-x)
+		});
 }
 ````
 
->caption The result from the code snippet above
-
-![Blazor Grid Row Template](images/row-template.png)
-
 ## Using Components in Grid Row Templates
 
 @[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
 
-
 ## See Also
 
  * [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)

components/map/layers/marker.md

@@ -90,6 +90,9 @@ The following example uses two Marker layers with different templates. One rende
 
 >caption Using Map marker template
 
+<!-- REPL skipped due to https://github.com/telerik/blazor-repl/issues/323 -->
+<div class="skip-repl"></div>
+
 ````RAZOR
 <TelerikMap Center="@MapCenter"
             Zoom="3">

components/spreadsheet/tools.md

@@ -98,7 +98,8 @@ The example below shows how to:
 @using Telerik.Blazor.Resources
 @using Telerik.Blazor.Services
 
-@inject ITelerikStringLocalizer Localizer
+@* Needed to find the built-in Home tool by its localized title if the application is using more than one language *@
+@* @inject ITelerikStringLocalizer Localizer *@
 
 <TelerikSpreadsheet Tools="@DefaultToolsWithCustomizations">
 </TelerikSpreadsheet>
@@ -117,10 +118,13 @@ The example below shows how to:
             fileToolSetItem.Title = "Custom File Label";
         }
 
-        // Find the built-in Home tool set item by its localized title.
-        // You can hard-code the title string (for example, "Home") if the application is using just one language.
+        // Find the built-in Home tool set item.
+        // This example uses hard-coded title string ("Home") but you may use the tool's localized title if the application is using more than one language.
+        // SpreadsheetToolSetItem? homeToolSetItem = DefaultToolsWithCustomizations.Items
+        //     .FirstOrDefault(x => x.Title == Localizer[nameof(Messages.Spreadsheet_ToolBar_HomeMenu)]);
+
         SpreadsheetToolSetItem? homeToolSetItem = DefaultToolsWithCustomizations.Items
-            .FirstOrDefault(x => x.Title == Localizer[nameof(Messages.Spreadsheet_ToolBar_HomeMenu)]);
+        .FirstOrDefault(x => x.Title == "Home");
 
         var fontFamilyTool = homeToolSetItem?.Tools.FirstOrDefault(x => x is SpreadsheetFontFamilyTool) as SpreadsheetFontFamilyTool;
 

components/stockchart/labels-template-and-format.md

@@ -28,13 +28,14 @@ You can use the `Format` parameter to apply standard [numeric format strings](ht
 Standard number format strings and rotate the labels of the Category Axis
 
 <TelerikStockChart Width="700px"
-                    Height="450px"
-                    DateField="@nameof(StockDataPoint.Date)">
+                   Height="450px"
+                   DateField="@nameof(StockDataPoint.Date)">
 
     <StockChartCategoryAxes>
         <StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months">
-            <StockChartCategoryAxisLabels Format="{0:D}"></StockChartCategoryAxisLabels>
-            <StockChartCategoryAxisLabelsRotation Angle="30"></StockChartCategoryAxisLabelsRotation>
+            <StockChartCategoryAxisLabels Format="{0:D}">
+                <StockChartCategoryAxisLabelsRotation Angle="30"/>
+            </StockChartCategoryAxisLabels>
         </StockChartCategoryAxis>
     </StockChartCategoryAxes>
 
@@ -46,23 +47,28 @@ Standard number format strings and rotate the labels of the Category Axis
 
     <StockChartSeriesItems>
         <StockChartSeries Type="StockChartSeriesType.Candlestick"
-                            Name="Product 1"
-                            Data="@StockChartProduct1Data"
-                            OpenField="@nameof(StockDataPoint.Open)"
-                            CloseField="@nameof(StockDataPoint.Close)"
-                            HighField="@nameof(StockDataPoint.High)"
-                            LowField="@nameof(StockDataPoint.Low)">
+                          Name="Product 1"
+                          Data="@StockChartProduct1Data"
+                          OpenField="@nameof(StockDataPoint.Open)"
+                          CloseField="@nameof(StockDataPoint.Close)"
+                          HighField="@nameof(StockDataPoint.High)"
+                          LowField="@nameof(StockDataPoint.Low)">
         </StockChartSeries>
     </StockChartSeriesItems>
 
     <StockChartNavigator>
-        <StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
+        <StockChartNavigatorCategoryAxis>
+            <StockChartNavigatorCategoryAxisLabels>
+                <StockChartNavigatorCategoryAxisLabels Format="dd MMM yyyy"/>
+            </StockChartNavigatorCategoryAxisLabels>
+        </StockChartNavigatorCategoryAxis>
+
         <StockChartNavigatorSeriesItems>
             <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
-                                        Name="Product 1"
-                                        Data="@StockChartProduct1Data"
-                                        Field="@(nameof(StockDataPoint.High))"
-                            CategoryField="@(nameof(StockDataPoint.Date))">
+                                       Name="Product 1"
+                                       Data="@StockChartProduct1Data"
+                                       Field="@(nameof(StockDataPoint.High))"
+                                       CategoryField="@(nameof(StockDataPoint.Date))">
             </StockChartNavigatorSeries>
         </StockChartNavigatorSeriesItems>
     </StockChartNavigator>
@@ -175,7 +181,9 @@ Label templates
     </StockChartSeriesItems>
 
     <StockChartNavigator>
-        <StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
+        <StockChartNavigatorCategoryAxis>
+            <StockChartNavigatorCategoryAxisLabels Template="#= value.toLocaleDateString('en-US') #"/>
+        </StockChartNavigatorCategoryAxis>
         <StockChartNavigatorSeriesItems>
             <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                         Name="Product 1"

components/treeview/overview.md

@@ -151,6 +151,7 @@ The table below lists the TreeView methods. Also consult the [TreeView API](/bla
 | `Rebind` | [Refreshes the component data]({%slug treeview-refresh-data%}#rebind-method). |
 | `GetItemFromDropIndex` <br /> `(string index)` | gets the corresponding `TItem` of the destination TreeView from the passed [`DestinationIndex`]({%slug grid-drag-drop-overview%}#event-arguments) |
 
+<div class="skip-repl"></div>
 ````RAZOR
 <TelerikTreeView @ref="@TreeViewRef" .../>
 

globalization/rtl-support.md

@@ -20,6 +20,7 @@ Right-to-left support is configured at the root level so it affects all UI for B
 
 To enable right-to-left direction of the components in your application, set the `EnableRtl` parameter of the [`TelerikRootComponent`]({%slug rootcomponent-overview%})  to `true`.
 
+<div class="skip-repl"></div>
 ````TelerikLayout.razor
 <TelerikRootComponent EnableRtl="true">
     @Body

knowledge-base/animationcontainer-close-on-outside-click.md

@@ -36,8 +36,11 @@ To achieve the desired scenario:
 1. If the target is outside, [call a .NET method from the JavaScript code](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript) that will close the AnimationContainer.
 1. When closing the AnimationContainer from JavaScript, [detach](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) the `click` handler from step 2.
 
+> Replace the `Index` type of the `DotNetObjectReference` in the example below with the type of the component that hosts this code.
+
 >caption Close the AnimationContainer upon an outside click
 
+<div class="skip-repl"></div>
 ````RAZOR
 @inject IJSRuntime js
 
@@ -50,7 +53,8 @@ To achieve the desired scenario:
 </TelerikAnimationContainer>
 
 @* suppress-error allows script tags in Razor files. Move this script to a separate file *@
-<script suppress-error="BL9992">//
+<script suppress-error="BL9992">
+    //
     function attachCloseTAC(dotNetReference) {
         dotNet = dotNetReference;
         document.documentElement.addEventListener("click", checkHideTAC);
@@ -64,13 +68,14 @@ To achieve the desired scenario:
             dotNet.invokeMethodAsync("HideTAC");
         }
     }
-//</script>
+    //</script>
 
 @code {
     private TelerikAnimationContainer TAC { get; set; }
 
     private bool TACOpen { get; set; }
 
+    //Replace the Index type with the type of the component that hosts this code
     private DotNetObjectReference<Index>? DotNetRef;
 
     private async Task ShowTAC()