chore(common): skip repls and fix samples

Author: ntacheva

knowledge-base/grid-csv-export-change-field-delimiter.md

@@ -48,6 +48,7 @@ To change the field delimiter, do the following:
 
 1. Pass that `MemoryStream` to the `args.Stream` of the `GridAfterCsvExportEventArgs`, so that the modifications can be saved to the actual exported file.
 
+<div class="skip-repl"></div>
 ````RAZOR
 @*Customize the field delimiter of the exported CSV file*@
 

knowledge-base/grid-one-expanded-detail-template.md

@@ -68,7 +68,7 @@ You can use the [grid state]({%slug grid-state%}) to make sure only one item is
         state.ExpandedItems = new List<MainModel> { currItem };
         // Note: SetState() will call OnRead, so you may want to
         // consider raising flags and caching data if you want to reduce requests for remote data
-        await Grid.SetState(state);
+        await Grid.SetStateAsync(state);
     }
 
     async Task OnRowClickHandler(GridRowClickEventArgs args)

knowledge-base/grid-static-group.md

@@ -143,6 +143,7 @@ Examples of both follow below, see the code comments for details.
 
 The key thing is to set `Visible=false`, the other settings are to ensure it cannot be shown, resized, edited, moved or otherwise interacted with. Hiding it from the column chooser will also prevent the user from showing it on their own, the other settings are to showcase you can disable them, and to limit the options in case your other state modifications require that you show it at some point. You can tweak this as necessary.
 
+<div class="skip-repl"></div>
 ````RAZOR
     <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Width="0px" VisibleInColumnChooser="false" Visible="false"
                 Reorderable="false" Resizable="false" Filterable="false" Sortable="false" Groupable="false" Editable="false" Lockable="false">
@@ -151,6 +152,7 @@ The key thing is to set `Visible=false`, the other settings are to ensure it can
 
 >caption Sample CSS rules to hide the group header and/or the [x] buttons on group indicators
 
+<div class="skip-repl"></div>
 ````RAZOR
 <style>
     /* if you add the no-group-header Class to the grid, the following rule 

knowledge-base/grid-virtualization-many-records.md

@@ -92,6 +92,7 @@ The issue with the content overflow is the same - when the element size limit is
 
 >caption Add this code just after the grid closing tag to color the element borders like in the image above to see the issue
 
+<div class="skip-repl"></div>
 ````RAZOR
 </TelerikGrid>
 

knowledge-base/inputs-open-programmatically.md

@@ -56,8 +56,11 @@ Review the `attachFocusHandler` JavaScript function below. It is called in `OnAf
 
 Note that the Date/Time Pickers move focus to their popup once it is opened. This enables keyboard navigation in the popup, but prevents immediate move to another component via tabbing. You need to hit Enter to close the popup and return focus to the DateInput textbox. Then tab.
 
+> Replace the `OnFocusKB` type of the `DotNetObjectReference` in the example below with the type of the component that hosts this code.
+
 >caption Focus Component and Open Dropdown Programmatically
 
+<div class="skip-repl"></div>
 ````RAZOR
 @inject IJSRuntime js
 @* Open dropdown on click or focus *@
@@ -152,6 +155,7 @@ TimePicker:
                    Width="300px" />
 
 @code {
+    //Replace the OnFocusKB type with the type of the component that hosts this code
     private DotNetObjectReference<OnFocusKB>? DotNetRef { get; set; }
 
     private List<Product> ValueCollection { get; set; } = new();
@@ -213,10 +217,10 @@ TimePicker:
         for (int i = 1; i <= 10; i++)
         {
             ValueCollection.Add(new Product()
-            {
-                ID = i,
-                Name = "Product Name " + i.ToString()
-            });
+                {
+                    ID = i,
+                    Name = "Product Name " + i.ToString()
+                });
         }
 
         DotNetRef = DotNetObjectReference.Create(this);
@@ -236,6 +240,7 @@ TimePicker:
 
 [UI for Blazor versions 2.25 - 2.30 have different HTML rendering for the input components]({%slug changes-in-3-0-0%}). Use this `attachFocusHandler` code instead:
 
+<div class="skip-repl"></div>
 ````JS
 function attachFocusHandler(id, componentClass) {
     var element = document.getElementById(id);

knowledge-base/menu-authorize-view.md

@@ -35,6 +35,7 @@ For example, a `.Where()` filter can be used to return only items based on certa
 
 >caption Pseudocode example of showing menu items according to user authorization level
 
+<div class="skip-repl"></div>
 ````RAZOR
 <AuthorizeView>
 	<h1>Hello, @context.User.Identity.Name!</h1>

knowledge-base/pdfviewer-sign-pdfs.md

@@ -34,6 +34,7 @@ The PdfViewer does not currently have the capability to manage digital signature
 
 ## Example
 
+<div class="skip-repl"></div>
 ```csharp
 <TelerikPdfViewer Data="@PdfSource">
     <PdfViewerToolBar>

knowledge-base/treelist-enable-checkbox-selection-only-edit-mode.md

@@ -343,6 +343,7 @@ Below is an example implementation that toggles the visibility of the Checkbox C
 
 Alternatively, if you prefer not to toggle the `CheckboxColumn` visibility but just disable it, you can apply conditional custom CSS based on the flag that you set in the `OnEdit`/`OnAdd` handlers.
 
+<div class="skip-repl"></div>
 ````RAZOR
 @if (!SelectionEnabled)
 {

knowledge-base/typescript-exports-error.md

@@ -35,6 +35,7 @@ To reproduce the basic error, just add a TypeScript file, `export` a function fr
 
 >caption Sample TypeScript file - `wwwroot/js/MyScript.ts`
 
+<div class="skip-repl"></div>
 ````TypeScript
 export function test() {
     alert("test");
@@ -43,6 +44,7 @@ export function test() {
 
 >caption Referencing the resulting JS file in the index file
 
+<div class="skip-repl"></div>
 ````RAZOR
     . . .
     <script src="js/MyScript.js"></script>
@@ -54,6 +56,7 @@ export function test() {
 
 >caption Resulting output in the JS file (generated through the `Microsoft.TypeScript.MSBuild` package Visual Studio offers to install for you to build TS, other compilers often have similar default output)
 
+<div class="skip-repl"></div>
 ````MyScript.js
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -75,6 +78,7 @@ Then, if you add a workaround that is commonly offered on the Internet for that,
 
 >caption Commonly shared workaround for the error above
 
+<div class="skip-repl"></div>
 ````JavaScript
     <script>
         var exports = {}; // defining an empty exports object is that common workaround
@@ -105,6 +109,7 @@ To get scripts running from TypeScript files, you may want to look into using to
 
 >caption Sample `tsconfig.json` to disable generation of exports so you don't get the first error
 
+<div class="skip-repl"></div>
 ````JSON
 {
   "compilerOptions": {
@@ -115,6 +120,7 @@ To get scripts running from TypeScript files, you may want to look into using to
 
 >caption Updated `MyScript.ts` file without exports
 
+<div class="skip-repl"></div>
 ````TypeScript
 function test() {
     alert("test");
@@ -123,6 +129,7 @@ function test() {
 
 >caption Result from the compiled TypeScript
 
+<div class="skip-repl"></div>
 ````JavaScript
 function test() {
     alert("test");

knowledge-base/upload-preview-image.md

@@ -218,6 +218,8 @@ namespace TelerikBlazorUpload.Controllers
 >caption Preview selected images when using the FileSelect component
 
 ````RAZOR
+@using System.IO;
+
 <h2>FileSelect</h2>
 
 <TelerikFileSelect Accept="@string.Join(",", ImageFileExtensions)"