chore(common): fix snippets

ntacheva · ntacheva · commit 13dd718dc923 · 2025-01-06T17:50:06.000+02:00
diff --git a/components/grid/templates/images/row-template.png b/components/grid/templates/images/row-template.png
diff --git a/components/grid/templates/row.md b/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,18 +50,14 @@ 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)
-
 
 ## See Also
 
diff --git a/components/spreadsheet/tools.md b/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;
 
diff --git a/components/stockchart/labels-template-and-format.md b/components/stockchart/labels-template-and-format.md
@@ -24,19 +24,18 @@ You can use the `Format` parameter to apply standard [numeric format strings](ht
 
 >caption Format the labels on the Value and Category Axes
 
-<!-- REPL skipped due to https://github.com/telerik/blazor-repl/issues/323 -->
-<div class="skip-repl"></div>
 ````RAZOR
 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"></StockChartCategoryAxisLabelsRotation>
+            </StockChartCategoryAxisLabels>
         </StockChartCategoryAxis>
     </StockChartCategoryAxes>
 
@@ -48,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>
+            </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>
@@ -146,8 +150,6 @@ In a *value axis* label template, you can use the following fields:
 
 >caption Custom templates in labels
 
-<!-- REPL skipped due to https://github.com/telerik/blazor-repl/issues/323 -->
-<div class="skip-repl"></div>
 ````RAZOR
 Label templates
 
@@ -179,7 +181,9 @@ Label templates
     </StockChartSeriesItems>
 
     <StockChartNavigator>
-        <StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
+        <StockChartNavigatorCategoryAxis>
+            <StockChartNavigatorCategoryAxisLabels Template="#= value.toLocaleDateString('en-US') #"></StockChartNavigatorCategoryAxisLabels>
+        </StockChartNavigatorCategoryAxis>
         <StockChartNavigatorSeriesItems>
             <StockChartNavigatorSeries Type="StockChartSeriesType.Line"
                                         Name="Product 1"
diff --git a/knowledge-base/grid-aggregates-and-datatable.md b/knowledge-base/grid-aggregates-and-datatable.md
@@ -43,6 +43,7 @@ I have a TelerikGrid with a [DataTable binding](https://demos.telerik.com/blazor
 
 Attempting to use built-in aggregates with the templates that need to extract their values will throw an exception for the aggregated field, for example `Salary` in this snippet (it is the first one declared).
 
+<div class="skip-repl"></div>
 ````RAZOR
 @using System.Data
 @using Telerik.DataSource.Extensions
diff --git a/knowledge-base/grid-conditional-cell-background.md b/knowledge-base/grid-conditional-cell-background.md
@@ -135,8 +135,7 @@ You can fully control the row rendering through a [row template]({%slug grid-tem
             // to style the entire row, you can use the same class for all cells, or their style attribute
             // to style individual cells - either use their style attribute, or apply a conditional class only to them
 
-            <td style="@GetConditionalCellStyle(currRowData)" class="@GetConditionalCellClass(currRowData)">
-                <img class="rounded-circle" src="@($"/images/{currRowData.ID}.jpg")" alt="employee photo" />
+            <td style="@GetConditionalCellStyle(currRowData)" class="@GetConditionalCellClass(currRowData)">               
                 <strong>@currRowData.Name</strong>
             </td>
             <td class="@GetConditionalCellClass(currRowData)">
@@ -162,7 +161,7 @@ You can fully control the row rendering through a [row template]({%slug grid-tem
 
     string GetConditionalCellClass(SampleData rowData)
     {
-        if(rowData.ID % 3 == 0)
+        if (rowData.ID % 3 == 0)
         {
             return "yellow-cell-bg";
         }
@@ -177,11 +176,11 @@ You can fully control the row rendering through a [row template]({%slug grid-tem
     }
 
     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)
+        });
 }
 ````
 
diff --git a/knowledge-base/grid-expand-button-tooltip.md b/knowledge-base/grid-expand-button-tooltip.md
@@ -89,6 +89,8 @@ The example below shows one way to do that, and to distinguish a particular grid
         {
             // using try-catch to prevent JSInterop calls at too early stage
             // ensure the hierarchy expand icons have the desired tooltip after the grid re-renderes with new data
+            // ensure the HTML is rendered in the browser
+            await Task.Delay(100);
             await _js.InvokeVoidAsync("setGridExpandButtonTitles", ".titles-on-expand-buttons", "Expand Details");
         }
         catch (InvalidOperationException e) { }

Original file line number	Diff line number	Diff line change
`@@ -89,6 +89,8 @@ The example below shows one way to do that, and to distinguish a particular grid`
`89`	`89`	`{`
`90`	`90`	`// using try-catch to prevent JSInterop calls at too early stage`
`91`	`91`	`// ensure the hierarchy expand icons have the desired tooltip after the grid re-renderes with new data`
	`92`	`+ // ensure the HTML is rendered in the browser`
	`93`	`+ await Task.Delay(100);`
`92`	`94`	`await _js.InvokeVoidAsync("setGridExpandButtonTitles", ".titles-on-expand-buttons", "Expand Details");`
`93`	`95`	`}`
`94`	`96`	`catch (InvalidOperationException e) { }`