diff --git a/components/fileselect/events.md b/components/fileselect/events.md index d49f3cf1bf..c7647fb501 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 only 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) diff --git a/components/grid/templates/images/row-template.png b/components/grid/templates/images/row-template.png deleted file mode 100644 index 839c8b1be4..0000000000 Binary files a/components/grid/templates/images/row-template.png and /dev/null differ diff --git a/components/grid/templates/row.md b/components/grid/templates/row.md index f01aecc2df..9febaba3de 100644 --- 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 - employee photo + E @employee.ID @employee.Name @@ -50,23 +50,18 @@ Render the entire row with your own code and logic } public IEnumerable 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) - ## Using Components in Grid Row Templates @[template](/_contentTemplates/grid/common-link.md#using-components-in-templates) - ## See Also * [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates) diff --git a/components/map/layers/marker.md b/components/map/layers/marker.md index e41bbd3236..e38882c5fa 100644 --- a/components/map/layers/marker.md +++ b/components/map/layers/marker.md @@ -90,6 +90,9 @@ The following example uses two Marker layers with different templates. One rende >caption Using Map marker template + +
+ ````RAZOR diff --git a/components/spreadsheet/tools.md b/components/spreadsheet/tools.md index ed735fe7c4..8e2f42bb99 100644 --- 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 *@ @@ -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 index e3db3d076d..1cd652de4d 100644 --- a/components/stockchart/labels-template-and-format.md +++ b/components/stockchart/labels-template-and-format.md @@ -28,13 +28,14 @@ You can use the `Format` parameter to apply standard [numeric format strings](ht Standard number format strings and rotate the labels of the Category Axis + Height="450px" + DateField="@nameof(StockDataPoint.Date)"> - - + + + @@ -46,23 +47,28 @@ Standard number format strings and rotate the labels of the Category Axis + 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" + Field="@(nameof(StockDataPoint.High))" + CategoryField="@(nameof(StockDataPoint.Date))"> @@ -175,7 +181,9 @@ Label templates - + + + `(string index)` | gets the corresponding `TItem` of the destination TreeView from the passed [`DestinationIndex`](slug://grid-drag-drop-overview#event-arguments) | +
````RAZOR diff --git a/globalization/rtl-support.md b/globalization/rtl-support.md index 66a0cdee17..493cc693b4 100644 --- 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`. +
````TelerikLayout.razor @Body diff --git a/knowledge-base/animationcontainer-close-on-outside-click.md b/knowledge-base/animationcontainer-close-on-outside-click.md index 5120ab15cb..192931dfe6 100644 --- 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 +
````RAZOR @inject IJSRuntime js @@ -50,7 +53,7 @@ To achieve the desired scenario: @* suppress-error allows script tags in Razor files. Move this script to a separate file *@ - + @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? 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 index 372944203f..45d577f392 100644 --- 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 +
````RAZOR @inherits LayoutComponentBase @@ -53,6 +54,7 @@ Consider the following application layout setup: >caption MainLayout.razor +
````RAZOR @layout TelerikLayout @inherits LayoutComponentBase @@ -78,6 +80,7 @@ To handle this, wrap the `ErrorBoundary` component around the `caption TelerikLayout.razor +
````RAZOR @inherits LayoutComponentBase @@ -92,6 +95,7 @@ If the application is using only one layout file, it should look like this: >caption MainLayout.razor +
````RAZOR @inherits LayoutComponentBase diff --git a/knowledge-base/common-kb-render-fragment-parameter-null.md b/knowledge-base/common-kb-render-fragment-parameter-null.md index e8a7ddf6c9..5770bf3418 100644 --- a/knowledge-base/common-kb-render-fragment-parameter-null.md +++ b/knowledge-base/common-kb-render-fragment-parameter-null.md @@ -51,6 +51,7 @@ The following sample used as a component will cause exceptions: >caption RenderFragment elements used as properties cause exceptions +
````RAZOR typeparam TItem @typeparam TValue @@ -78,6 +79,7 @@ typeparam TItem >caption Simple usage of the problematic component that causes an error +
````RAZOR @@ -155,6 +157,7 @@ The solution is to implement checks in the custom component so that you can rend >caption How to consume that component - like usual +
````RAZOR @selectedValue diff --git a/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md b/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md index c867089f22..29b6295c5f 100644 --- 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
````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 +
+````C# public async Task> GetForecastListAsync(DataSourceRequest gridRequest) { HttpResponseMessage response = await Http.PostAsJsonAsync( @@ -87,7 +89,8 @@ public async Task> 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 +
+````C# [HttpPost] public async Task> Post([FromBody] string gridRequestAsString) { diff --git a/knowledge-base/common-struct-error.md b/knowledge-base/common-struct-error.md index 7f867d6a12..c854fb48fc 100644 --- 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 +
+````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: + +
````RAZOR @@ -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).
- ````CS public class Product { diff --git a/knowledge-base/dropdown-kb-bind-to-enum.md b/knowledge-base/dropdown-kb-bind-to-enum.md index 5ff5b43743..011a16b33e 100644 --- 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 *@ + ShowClearButton="false" AllowCustom="false" Filterable="true"> @code { @@ -104,7 +104,7 @@ You will see blank space above the combobox until you select something.
+ ShowClearButton="false" AllowCustom="false" Filterable="true" Placeholder="Select an option"> @code { diff --git a/knowledge-base/dropdowns-readonly-struct-error.md b/knowledge-base/dropdowns-readonly-struct-error.md index 99b624869c..523af8cc39 100644 --- a/knowledge-base/dropdowns-readonly-struct-error.md +++ b/knowledge-base/dropdowns-readonly-struct-error.md @@ -34,7 +34,7 @@ Telerik.Blazor.Components.TelerikComboBox.b ## Steps to Reproduce -````RAZOR +````RAZOR.skip-repl Selected value: @selectedValue
@@ -70,7 +70,6 @@ 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** ````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 index b802e5ff60..e211cbd495 100644 --- 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 +
````RAZOR @*TxtFormatProvider*@ @using Telerik.Windows.Documents.Flow.FormatProviders.Txt; diff --git a/knowledge-base/grid-aggregates-and-datatable.md b/knowledge-base/grid-aggregates-and-datatable.md index 5992a58c31..d15b7ed852 100644 --- 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). +
````RAZOR @using System.Data @using Telerik.DataSource.Extensions diff --git a/knowledge-base/grid-center-checkbox-column.md b/knowledge-base/grid-center-checkbox-column.md index 78816c536c..e5f6a9dd09 100644 --- 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: - +
````RAZOR ```` * Use CSS, which centers the content of the first Grid/TreeList column, no matter what that column is. +
````RAZOR @@ -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). +
````RAZOR diff --git a/knowledge-base/grid-conditional-cell-background.md b/knowledge-base/grid-conditional-cell-background.md index 1af82b8e23..5a82da6ffb 100644 --- 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 - - employee photo + @currRowData.Name @@ -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 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-csv-export-change-field-delimiter.md b/knowledge-base/grid-csv-export-change-field-delimiter.md index 3ba654c697..3eef68d8ad 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-expand-button-tooltip.md b/knowledge-base/grid-expand-button-tooltip.md index af8b156f94..4cde2a14a0 100644 --- 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) { } diff --git a/knowledge-base/grid-one-expanded-detail-template.md b/knowledge-base/grid-one-expanded-detail-template.md index 8404f556b4..bda1d780b9 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 ex 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 468be4d7c9..4646c55a70 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