From 424350c883721f196460b1b32e702b0e9b6050e3 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:49:30 +0200 Subject: [PATCH 01/11] docs(common): Fix broken REPL examples --- components/fileselect/events.md | 129 ++++++++++++++------------------ 1 file changed, 58 insertions(+), 71 deletions(-) diff --git a/components/fileselect/events.md b/components/fileselect/events.md index 9f5cb21b08..fb9fc7e0f4 100644 --- a/components/fileselect/events.md +++ b/components/fileselect/events.md @@ -39,34 +39,46 @@ 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*@ -
- - -
- Expected files: JPG, PNG, GIF -
+@* Avoid namespace conflict with SvgIcons.File *@ +@using IONS = System.IO + + +
+ Expected files: @string.Join(", ", AllowedExtensions)
+ + + @code { - public List AllowedExtensions { get; set; } = new List() { ".jpg", ".png", ".gif" }; - public Dictionary Tokens { get; set; } = new Dictionary(); + private readonly List AllowedExtensions = new() { ".jpg", ".png", ".gif" }; + + private Dictionary Tokens { get; set; } = new(); private async Task HandleFiles(FileSelectEventArgs args) { @@ -74,67 +86,38 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo) { 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 ony 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 - -
- - -
- Expected files: JPG, PNG, GIF -
-
- -@code { - public List AllowedExtensions { get; set; } = new List() { ".jpg", ".png", ".gif" }; - public Dictionary Tokens { get; set; } = new Dictionary(); + //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) From b2a199f14427b78ef7db9b8a12b2708b6278d830 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:40:08 +0200 Subject: [PATCH 02/11] docs(map): Deactivate non-running REPL --- components/map/layers/marker.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/map/layers/marker.md b/components/map/layers/marker.md index e41bbd3236..4d20f1aef9 100644 --- a/components/map/layers/marker.md +++ b/components/map/layers/marker.md @@ -90,6 +90,8 @@ The following example uses two Marker layers with different templates. One rende >caption Using Map marker template +
+ ````RAZOR From 8c01a440b85e646d0cbaaf64d2d9cf4bd545e37d Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 13 Dec 2024 17:43:03 +0200 Subject: [PATCH 03/11] chore(common): skip repls and fix samples --- .../grid-csv-export-change-field-delimiter.md | 1 + knowledge-base/grid-one-expanded-detail-template.md | 2 +- knowledge-base/grid-static-group.md | 2 ++ knowledge-base/grid-virtualization-many-records.md | 1 + knowledge-base/inputs-open-programmatically.md | 13 +++++++++---- knowledge-base/menu-authorize-view.md | 1 + knowledge-base/pdfviewer-sign-pdfs.md | 1 + ...list-enable-checkbox-selection-only-edit-mode.md | 1 + knowledge-base/typescript-exports-error.md | 7 +++++++ knowledge-base/upload-preview-image.md | 2 ++ 10 files changed, 26 insertions(+), 5 deletions(-) diff --git a/knowledge-base/grid-csv-export-change-field-delimiter.md b/knowledge-base/grid-csv-export-change-field-delimiter.md index 2fd8c323d8..40816bc464 100644 --- a/knowledge-base/grid-csv-export-change-field-delimiter.md +++ b/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. +
````RAZOR @*Customize the field delimiter of the exported CSV file*@ diff --git a/knowledge-base/grid-one-expanded-detail-template.md b/knowledge-base/grid-one-expanded-detail-template.md index 405788dfa8..a1438bf206 100644 --- a/knowledge-base/grid-one-expanded-detail-template.md +++ b/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 { 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) diff --git a/knowledge-base/grid-static-group.md b/knowledge-base/grid-static-group.md index acc1408c48..92cf535226 100644 --- a/knowledge-base/grid-static-group.md +++ b/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. +
````RAZOR @@ -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 +
````RAZOR