chore(common): fix snippets and skip repls

ntacheva · ntacheva · commit 1b7c904df5a0 · 2024-12-13T19:05:13.000+02:00
diff --git a/components/treeview/overview.md b/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" .../>
 
diff --git a/globalization/rtl-support.md b/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
diff --git a/knowledge-base/animationcontainer-close-on-outside-click.md b/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()
diff --git a/knowledge-base/common-catch-all-exceptions-globally.md b/knowledge-base/common-catch-all-exceptions-globally.md
@@ -43,6 +43,7 @@ Consider the following application layout setup:
 
 >caption TelerikLayout.razor
 
+<div class="skip-repl"></div>
 ````RAZOR
 @inherits LayoutComponentBase
 
@@ -53,6 +54,7 @@ Consider the following application layout setup:
 
 >caption MainLayout.razor
 
+<div class="skip-repl"></div>
 ````RAZOR
 @layout TelerikLayout
 @inherits LayoutComponentBase
@@ -78,6 +80,7 @@ To handle this, wrap the `ErrorBoundary` component around the `<TelerikRootCompo
 
 >caption TelerikLayout.razor
 
+<div class="skip-repl"></div>
 ````RAZOR
 @inherits LayoutComponentBase
 
@@ -92,6 +95,7 @@ If the application is using only one layout file, it should look like this:
 
 >caption MainLayout.razor
 
+<div class="skip-repl"></div>
 ````RAZOR
 @inherits LayoutComponentBase
 
diff --git a/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md b/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md
@@ -39,6 +39,7 @@ Now, when I <a href="https://github.com/telerik/blazor-ui/tree/master/grid/datas
 
 Add the Newtonsoft JSON serialization service to your ASP.NET Core backend that also needs to process the Blazor grid requests.
 
+<div class="skip-repl"></div>
 ````RAZOR
 //something like 
 
@@ -75,7 +76,8 @@ Use explicit System.Text.Json serialization when needed:
 
 * to serialize the DataSourceRequest - make it explicit in the WASM app service:
 
-````C#.skip-repl
+<div class="skip-repl"></div>
+````C#
 public async Task<DataEnvelope<WeatherForecast>> GetForecastListAsync(DataSourceRequest gridRequest)
 {
     HttpResponseMessage response = await Http.PostAsJsonAsync(
@@ -87,7 +89,8 @@ public async Task<DataEnvelope<WeatherForecast>> GetForecastListAsync(DataSource
 
 * when deserializing it - don't let the framework deserialize with the registered serialized (Newtonsoft) but take it as a string in the action and deserialize explicitly there with System.Text.Json:
 
-````C#.skip-repl
+<div class="skip-repl"></div>
+````C#
 [HttpPost]
 public async Task<DataEnvelope<WeatherForecast>> Post([FromBody] string gridRequestAsString)
 {
diff --git a/knowledge-base/common-struct-error.md b/knowledge-base/common-struct-error.md
@@ -24,12 +24,15 @@ res_type: kb
 
 When using a data-bound component, the application gets a null exception, and the component does not work. When running the Telerik Blazor application the application gets an error similar to the following:
 
-````C#.skip-repl
+<div class="skip-repl"></div>
+````C#
 ArgumentNullException: Value cannot be null. (Parameter 'source')
 System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
 ````
 
 To reproduce the problem, you can use the following code sample:
+
+<div class="skip-repl"></div>
 ````RAZOR
 <TelerikGrid Data="@GridData">
     <GridColumns>
@@ -83,7 +86,6 @@ The cause for this null exception is the binding of Telerik UI for Blazor compon
 The solution is to always bind the component to a `class` model, not a `struct`. For more information, see [Data Binding Overview]({%slug common-features-data-binding-overview%}#how-to-provide-data).
 
 <div class="skip-repl"></div>
-
 ````CS
 public class Product
 {
diff --git a/knowledge-base/dropdown-kb-bind-to-enum.md b/knowledge-base/dropdown-kb-bind-to-enum.md
@@ -61,7 +61,7 @@ Here are examples of both.
 
 @* for a combo box, make sure that custom values and clearing are not available unless you are explicitly OK with that *@
 <TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue"
-                 ClearButton="false" AllowCustom="false" Filterable="true">
+                 ShowClearButton="false" AllowCustom="false" Filterable="true">
 </TelerikComboBox>
 
 @code {
@@ -104,7 +104,7 @@ You will see blank space above the combobox until you select something.
 <br />
 
 <TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue"
-                 ClearButton="false" AllowCustom="false" Filterable="true" Placeholder="Select an option">
+                 ShowClearButton="false" AllowCustom="false" Filterable="true" Placeholder="Select an option">
 </TelerikComboBox>
 
 @code {
diff --git a/knowledge-base/dropdowns-readonly-struct-error.md b/knowledge-base/dropdowns-readonly-struct-error.md
@@ -34,6 +34,7 @@ Telerik.Blazor.Components.TelerikComboBox<TItem, TValue>.<OnParametersSetAsync>b
 
 ## Steps to Reproduce
 
+<div class="skip-repl"></div>
 ````RAZOR
 Selected value: @selectedValue
 <br />
@@ -70,7 +71,7 @@ There are two approaches to avoiding this error:
 
 * When setting the `Data` of the dropdown, make it a collection of anonymous objects, for example:
 
-    **Razor**
+<div class="skip-repl"></div>
 ````RAZOR.skip-repl
 @* See the Select in the Data parameter *@
 
diff --git a/knowledge-base/editor-convert-to-plain-text.md b/knowledge-base/editor-convert-to-plain-text.md
@@ -45,6 +45,7 @@ To export to another format, use the corresponding namespace and format provider
 
 >caption Obtain the Editor HTML value as plain text
 
+<div class="skip-repl"></div>
 ````RAZOR
 @*TxtFormatProvider*@
 @using Telerik.Windows.Documents.Flow.FormatProviders.Txt;
diff --git a/knowledge-base/grid-center-checkbox-column.md b/knowledge-base/grid-center-checkbox-column.md
@@ -32,13 +32,14 @@ How to center the selection checkboxes in the GridCheckboxColumn?
 There are a few alternative ways to center the checkboxes in the GridCheckboxColumn or the TreeListCheckboxColumn.
 
 * The easiest option is to set a smaller column width:
-
+    <div class="skip-repl"></div>
     ````RAZOR
     <GridCheckboxColumn Width="40px" />
     ````
 
 * Use CSS, which centers the content of the first Grid/TreeList column, no matter what that column is.
 
+    <div class="skip-repl"></div>
     ````RAZOR
     <TelerikGrid Class="center-first-column" />
 
@@ -52,6 +53,7 @@ There are a few alternative ways to center the checkboxes in the GridCheckboxCol
 
 * Use the `OnCellRender` event of the [Grid]({%slug grid-column-events%}) or [TreeList]({%slug treelist-column-events%}) to render a custom CSS class for the checkbox column table cells. Then, apply a `text-align:center` style for this class. You will need [CSS specificity](https://css-tricks.com/specifics-on-css-specificity/), which is higher than **0, 0, 1, 1** (one class and one element).
 
+    <div class="skip-repl"></div>
     ````RAZOR
     <GridCheckboxColumn
         OnCellRender="@( (GridCellRenderEventArgs args) => args.Class = "center-cell" )" />
