Skip to content

Commit 29b6d9b

Browse files
ntachevadimodiTsvetomir-Hr
authored
docs(common): Fix broken REPL examples (#2641) (#2690)
* docs(common): Fix broken REPL examples (#2641) * docs(common): Fix broken REPL examples * docs(map): Deactivate non-running REPL * chore(common): skip repls and fix samples * chore(common): fix snippets and skip repls * chore(common): skip repls * chore(common): fix snippets * Update components/fileselect/events.md Co-authored-by: Tsvetomir Hristov <[email protected]> * Update components/fileselect/events.md Co-authored-by: Tsvetomir Hristov <[email protected]> * Update components/stockchart/labels-template-and-format.md Co-authored-by: Tsvetomir Hristov <[email protected]> * Update components/stockchart/labels-template-and-format.md Co-authored-by: Tsvetomir Hristov <[email protected]> * Update components/stockchart/labels-template-and-format.md Co-authored-by: Tsvetomir Hristov <[email protected]> --------- Co-authored-by: Nadezhda Tacheva <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]> Co-authored-by: Tsvetomir Hristov <[email protected]> * Update pdfviewer-sign-pdfs.md * Update knowledge-base/animationcontainer-close-on-outside-click.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/animationcontainer-close-on-outside-click.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/typescript-exports-error.md Co-authored-by: Dimo Dimov <[email protected]> * chore(common): address feedback --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Tsvetomir Hristov <[email protected]>
1 parent 17a78ae commit 29b6d9b

31 files changed

+180
-132
lines changed

‎components/fileselect/events.md‎

Lines changed: 58 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -39,102 +39,85 @@ Property | Type | Description
3939
4040
## OnSelect
4141

42-
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.
42+
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.
4343

4444
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo), which contains a list of `FileInfo` objects that allow the processing of the files.
4545

46-
>caption Handling the `OnSelect` event of the FileSelect
46+
See the [example below](#example).
4747

48-
````RAZOR
49-
@*Handle the OnSelect event of the FileSelect to access the selected files and upload them*@
48+
## OnRemove
49+
50+
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.
51+
52+
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).
5053

51-
@using System.IO
52-
@using Microsoft.AspNetCore.Hosting
54+
## Example
55+
56+
>caption Handling the `OnSelect` and `OnRemove` events of the FileSelect
57+
58+
````RAZOR
5359
@using System.Threading
54-
@using Telerik.Blazor.Components.FileSelect
5560
56-
@inject IWebHostEnvironment HostingEnvironment
61+
@*This code works only in Blazor Server apps.*@
62+
@*@using Microsoft.AspNetCore.Hosting*@
63+
@*@inject IWebHostEnvironment HostingEnvironment*@
5764
58-
<div style="width:300px">
59-
<TelerikFileSelect OnSelect=@HandleFiles
60-
AllowedExtensions="@AllowedExtensions">
61-
</TelerikFileSelect>
62-
<div class="k-form-hint">
63-
Expected files: <strong>JPG, PNG, GIF</strong>
64-
</div>
65+
@* Avoid namespace conflict with SvgIcons.File *@
66+
@using IONS = System.IO
67+
68+
69+
<div class="k-form-hint">
70+
Expected files: <strong>@string.Join(", ", AllowedExtensions)</strong>
6571
</div>
6672
73+
<TelerikFileSelect AllowedExtensions="@AllowedExtensions"
74+
OnRemove="@RemoveFiles"
75+
OnSelect="@HandleFiles">
76+
</TelerikFileSelect>
77+
6778
@code {
68-
public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
69-
public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();
79+
private readonly List<string> AllowedExtensions = new() { ".jpg", ".png", ".gif" };
80+
81+
private Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new();
7082
7183
private async Task HandleFiles(FileSelectEventArgs args)
7284
{
7385
foreach (var file in args.Files)
7486
{
7587
if (!file.InvalidExtension)
7688
{
77-
// save to local file system
78-
await UploadFile(file);
79-
// or read file in-memory
80-
//await ReadFile(file);
89+
// Read file in-memory.
90+
await ReadFile(file);
91+
92+
// OR
93+
94+
// Save to local file system.
95+
// This works only in server apps and the Upload component may be a better choice.
96+
//await UploadFile(file);
8197
}
8298
}
8399
}
84100
85-
private async Task UploadFile(FileSelectFileInfo file)
86-
{
87-
// This code will work in Blazor Server apps.
88-
// Saving files on the user device is not allowed in WebAssembly apps.
89-
Tokens.Add(file.Id, new CancellationTokenSource());
90-
var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
91-
await using FileStream fs = new FileStream(path, FileMode.Create);
92-
await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
93-
}
94-
95101
private async Task ReadFile(FileSelectFileInfo file)
96102
{
97103
Tokens.Add(file.Id, new CancellationTokenSource());
98-
var byteArray = new byte[file.Size];
99-
await using MemoryStream ms = new MemoryStream(byteArray);
104+
byte[] byteArray = new byte[file.Size];
105+
await using IONS.MemoryStream ms = new(byteArray);
100106
await file.Stream.CopyToAsync(ms, Tokens[file.Id].Token);
101107
}
102-
}
103-
````
104108
109+
private async Task UploadFile(FileSelectFileInfo file)
110+
{
111+
// This code works only in Blazor Server apps.
112+
// Saving files on the user device is not allowed in WebAssembly apps.
105113
106-
## OnRemove
107-
108-
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.
109-
110-
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).
111-
112-
>caption Handling the `OnRemove` event of the FileSelect
113-
114-
````RAZOR
115-
@*Handle the OnRemove event of the FileSelect to access and delete the uploaded files*@
116-
117-
@using System.IO
118-
@using Microsoft.AspNetCore.Hosting
119-
@using System.Threading
120-
@using Telerik.Blazor.Components.FileSelect
121-
122-
@inject IWebHostEnvironment HostingEnvironment
123-
124-
<div style="width:300px">
125-
<TelerikFileSelect OnRemove=@HandleRemoveFiles
126-
AllowedExtensions="@AllowedExtensions">
127-
</TelerikFileSelect>
128-
<div class="k-form-hint">
129-
Expected files: <strong>JPG, PNG, GIF</strong>
130-
</div>
131-
</div>
132-
133-
@code {
134-
public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
135-
public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();
114+
//Tokens.Add(file.Id, new CancellationTokenSource());
115+
//string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
116+
//await using FileStream fs = new FileStream(path, FileMode.Create);
117+
//await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
118+
}
136119
137-
private async Task HandleRemoveFiles(FileSelectEventArgs args)
120+
private async Task RemoveFiles(FileSelectEventArgs args)
138121
{
139122
foreach (var file in args.Files)
140123
{
@@ -144,19 +127,23 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
144127
145128
await Task.Delay(1);
146129
147-
var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
130+
// This code works only in Blazor Server apps.
131+
// Saving files on the user device is not allowed in WebAssembly apps.
148132
149-
// Remove the file from the file system
150-
File.Delete(path);
151-
}
133+
//string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
152134
135+
//if (IONS.File.Exists(path))
136+
//{
137+
// // Remove the file from the file system
138+
// IONS.File.Delete(path);
139+
//}
140+
}
153141
}
154142
}
155143
````
156144

157145
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
158146

159-
160147
## See Also
161148

162149
* [Live Demo: Blazor FileSelect Events](https://demos.telerik.com/blazor-ui/fileselect/events)

‎components/grid/templates/images/row-template.png‎

-29.2 KB
Binary file not shown.

‎components/grid/templates/row.md‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Render the entire row with your own code and logic
2828
<TelerikGrid Data=@MyData Height="500px">
2929
<RowTemplate Context="employee">
3030
<td>
31-
<img class="rounded-circle" src="@($"/images/{employee.ID}.jpg")" alt="employee photo" />
31+
<TelerikAvatar Type="AvatarType.Text">E @employee.ID</TelerikAvatar>
3232
<strong>@employee.Name</strong>
3333
</td>
3434
<td>
@@ -50,23 +50,18 @@ Render the entire row with your own code and logic
5050
}
5151
5252
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
53-
{
54-
ID = x,
55-
Name = "name " + x,
56-
HireDate = DateTime.Now.AddDays(-x)
57-
});
53+
{
54+
ID = x,
55+
Name = "name " + x,
56+
HireDate = DateTime.Now.AddDays(-x)
57+
});
5858
}
5959
````
6060

61-
>caption The result from the code snippet above
62-
63-
![Blazor Grid Row Template](images/row-template.png)
64-
6561
## Using Components in Grid Row Templates
6662

6763
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
6864

69-
7065
## See Also
7166

7267
* [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)

‎components/map/layers/marker.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,9 @@ The following example uses two Marker layers with different templates. One rende
9090

9191
>caption Using Map marker template
9292
93+
<!-- REPL skipped due to https://github.com/telerik/blazor-repl/issues/323 -->
94+
<div class="skip-repl"></div>
95+
9396
````RAZOR
9497
<TelerikMap Center="@MapCenter"
9598
Zoom="3">

‎components/spreadsheet/tools.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ The example below shows how to:
9898
@using Telerik.Blazor.Resources
9999
@using Telerik.Blazor.Services
100100
101-
@inject ITelerikStringLocalizer Localizer
101+
@* Needed to find the built-in Home tool by its localized title if the application is using more than one language *@
102+
@* @inject ITelerikStringLocalizer Localizer *@
102103
103104
<TelerikSpreadsheet Tools="@DefaultToolsWithCustomizations">
104105
</TelerikSpreadsheet>
@@ -117,10 +118,13 @@ The example below shows how to:
117118
fileToolSetItem.Title = "Custom File Label";
118119
}
119120
120-
// Find the built-in Home tool set item by its localized title.
121-
// You can hard-code the title string (for example, "Home") if the application is using just one language.
121+
// Find the built-in Home tool set item.
122+
// 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.
123+
// SpreadsheetToolSetItem? homeToolSetItem = DefaultToolsWithCustomizations.Items
124+
// .FirstOrDefault(x => x.Title == Localizer[nameof(Messages.Spreadsheet_ToolBar_HomeMenu)]);
125+
122126
SpreadsheetToolSetItem? homeToolSetItem = DefaultToolsWithCustomizations.Items
123-
.FirstOrDefault(x => x.Title == Localizer[nameof(Messages.Spreadsheet_ToolBar_HomeMenu)]);
127+
.FirstOrDefault(x => x.Title == "Home");
124128
125129
var fontFamilyTool = homeToolSetItem?.Tools.FirstOrDefault(x => x is SpreadsheetFontFamilyTool) as SpreadsheetFontFamilyTool;
126130

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

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,14 @@ You can use the `Format` parameter to apply standard [numeric format strings](ht
2828
Standard number format strings and rotate the labels of the Category Axis
2929
3030
<TelerikStockChart Width="700px"
31-
Height="450px"
32-
DateField="@nameof(StockDataPoint.Date)">
31+
Height="450px"
32+
DateField="@nameof(StockDataPoint.Date)">
3333
3434
<StockChartCategoryAxes>
3535
<StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months">
36-
<StockChartCategoryAxisLabels Format="{0:D}"></StockChartCategoryAxisLabels>
37-
<StockChartCategoryAxisLabelsRotation Angle="30"></StockChartCategoryAxisLabelsRotation>
36+
<StockChartCategoryAxisLabels Format="{0:D}">
37+
<StockChartCategoryAxisLabelsRotation Angle="30"/>
38+
</StockChartCategoryAxisLabels>
3839
</StockChartCategoryAxis>
3940
</StockChartCategoryAxes>
4041
@@ -46,23 +47,28 @@ Standard number format strings and rotate the labels of the Category Axis
4647
4748
<StockChartSeriesItems>
4849
<StockChartSeries Type="StockChartSeriesType.Candlestick"
49-
Name="Product 1"
50-
Data="@StockChartProduct1Data"
51-
OpenField="@nameof(StockDataPoint.Open)"
52-
CloseField="@nameof(StockDataPoint.Close)"
53-
HighField="@nameof(StockDataPoint.High)"
54-
LowField="@nameof(StockDataPoint.Low)">
50+
Name="Product 1"
51+
Data="@StockChartProduct1Data"
52+
OpenField="@nameof(StockDataPoint.Open)"
53+
CloseField="@nameof(StockDataPoint.Close)"
54+
HighField="@nameof(StockDataPoint.High)"
55+
LowField="@nameof(StockDataPoint.Low)">
5556
</StockChartSeries>
5657
</StockChartSeriesItems>
5758
5859
<StockChartNavigator>
59-
<StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
60+
<StockChartNavigatorCategoryAxis>
61+
<StockChartNavigatorCategoryAxisLabels>
62+
<StockChartNavigatorCategoryAxisLabels Format="dd MMM yyyy"/>
63+
</StockChartNavigatorCategoryAxisLabels>
64+
</StockChartNavigatorCategoryAxis>
65+
6066
<StockChartNavigatorSeriesItems>
6167
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
62-
Name="Product 1"
63-
Data="@StockChartProduct1Data"
64-
Field="@(nameof(StockDataPoint.High))"
65-
CategoryField="@(nameof(StockDataPoint.Date))">
68+
Name="Product 1"
69+
Data="@StockChartProduct1Data"
70+
Field="@(nameof(StockDataPoint.High))"
71+
CategoryField="@(nameof(StockDataPoint.Date))">
6672
</StockChartNavigatorSeries>
6773
</StockChartNavigatorSeriesItems>
6874
</StockChartNavigator>
@@ -175,7 +181,9 @@ Label templates
175181
</StockChartSeriesItems>
176182
177183
<StockChartNavigator>
178-
<StockChartNavigatorCategoryAxisLabels Format="" Template=""></StockChartNavigatorCategoryAxisLabels>
184+
<StockChartNavigatorCategoryAxis>
185+
<StockChartNavigatorCategoryAxisLabels Template="#= value.toLocaleDateString('en-US') #"/>
186+
</StockChartNavigatorCategoryAxis>
179187
<StockChartNavigatorSeriesItems>
180188
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
181189
Name="Product 1"

‎components/treeview/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ The table below lists the TreeView methods. Also consult the [TreeView API](/bla
151151
| `Rebind` | [Refreshes the component data](slug://treeview-refresh-data#rebind-method). |
152152
| `GetItemFromDropIndex` <br /> `(string index)` | gets the corresponding `TItem` of the destination TreeView from the passed [`DestinationIndex`](slug://grid-drag-drop-overview#event-arguments) |
153153

154+
<div class="skip-repl"></div>
154155
````RAZOR
155156
<TelerikTreeView @ref="@TreeViewRef" .../>
156157

‎globalization/rtl-support.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Right-to-left support is configured at the root level so it affects all UI for B
2020

2121
To enable right-to-left direction of the components in your application, set the `EnableRtl` parameter of the [`TelerikRootComponent`](slug://rootcomponent-overview) to `true`.
2222

23+
<div class="skip-repl"></div>
2324
````TelerikLayout.razor
2425
<TelerikRootComponent EnableRtl="true">
2526
@Body

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,11 @@ To achieve the desired scenario:
3636
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.
3737
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.
3838

39+
> Replace the `Index` type of the `DotNetObjectReference` in the example below with the type of the component that hosts this code.
40+
3941
>caption Close the AnimationContainer upon an outside click
4042
43+
<div class="skip-repl"></div>
4144
````RAZOR
4245
@inject IJSRuntime js
4346
@@ -50,7 +53,7 @@ To achieve the desired scenario:
5053
</TelerikAnimationContainer>
5154
5255
@* suppress-error allows script tags in Razor files. Move this script to a separate file *@
53-
<script suppress-error="BL9992">//
56+
<script suppress-error="BL9992">
5457
function attachCloseTAC(dotNetReference) {
5558
dotNet = dotNetReference;
5659
document.documentElement.addEventListener("click", checkHideTAC);
@@ -64,13 +67,14 @@ To achieve the desired scenario:
6467
dotNet.invokeMethodAsync("HideTAC");
6568
}
6669
}
67-
//</script>
70+
</script>
6871
6972
@code {
7073
private TelerikAnimationContainer TAC { get; set; }
7174
7275
private bool TACOpen { get; set; }
7376
77+
//Replace the Index type with the type of the component that hosts this code
7478
private DotNetObjectReference<Index>? DotNetRef;
7579
7680
private async Task ShowTAC()

0 commit comments

Comments
 (0)