telerik · dimodi · Aug 14, 2025 · Aug 13, 2025
@@ -13,7 +13,7 @@ position: 20
 
 Telerik UI for Blazor provides a large set of built-in icons. There are two ways to consume and render them: as font icons or as SVG icons. It is also possible to use custom Blazor icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components.
 
-The Telerik Blazor components generate the same type of icons (font icons or SVG icons), [depending on the `TelerikRootComponent` configuration](#set-global-icon-type). However, Telerik UI for Blazor includes standalone [`FontIcon`](#fonticon-component) and [`SvgIcon`](#svgicon-component) components, which can be used at the same time.
+The Telerik Blazor components generate the same type of icons (font icons or SVG icons), [depending on the `TelerikRootComponent` configuration](#set-global-blazor-icon-type). However, Telerik UI for Blazor includes standalone [`FontIcon`](#fonticon-component) and [`SvgIcon`](#svgicon-component) components, which can be used at the same time.
 
 In general, font icons produce a smaller HTML footprint and the glyph can be overridden with CSS. SVG icons provide better accessibility and can use multiple colors in a single icon.
 

@@ -19,8 +19,6 @@ There are two key ways to bind data:
 * [Strings and Value Types](#strings-and-value-types)
 * [Model](#bind-to-a-model)
 
-There are also some [considerations](#considerations) to keep in mind.
-
 @[template](/_contentTemplates/common/get-model-from-dropdowns.md#get-model-from-dropdowns)
 
 ## Strings and Value Types

@@ -55,7 +55,7 @@ The Blazor Barcode provides various parameters that allow you to configure the c
 | `QRCodeEncoding` | `enum` | The encoding mode used to encode the value. |
 | `QRCodeErrorCorrection` | `enum` | The error correction level used to encode the value. |
 | `Value` | `string` | Defines the initial value of the QRCode. |
-| `Size` | `string` | Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. To set an optimal `Size`, consider the expected scanning distance and data capacity. |
+| `Size` | `string` | Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](slug:common-features/dimensions). Setting both `Size` and `Width` or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. To set an optimal `Size`, consider the expected scanning distance and data capacity. |
 | `Width` | `string` | Sets the width of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Width` should be set to `Height`. |
 | `Height` | `string` | Sets the height of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Height` should be set to `Width`. |
 | `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the QRCode component. |

@@ -36,14 +36,14 @@ The way multiple axes are declared depends on the [chart series type](slug:compo
 
 ### Categorical Charts
 
-1. Define the extra axis in the corresponding `ChartCategoryAxes` and/or `ChartValueAxes` tags.
+1. Define the extra axis in the corresponding `ChartCategoryAxes` or `ChartValueAxes` tags.
 2. Set its `Name` property as desired. By default, a series uses the first axis.
 3. Provide the `Name` value to the series you want to use it through its `Axis` and `CategoryAxis` for the `Y` and `X` axis respectively.
 
 
 ### Numerical Charts
 
-1. Define the extra axis in the corresponding `ChartXAxes` and/or `ChartYAxes` tags.
+1. Define the extra axis in the corresponding `ChartXAxes` or `ChartYAxes` tags.
 2. Set its `Name` property as desired. By default, a series uses the first axis.
 3. Provide the `Name` value to the series you want to use it through its `yAxis` and `xAxis` properties.
 

@@ -265,7 +265,7 @@ In this example, the context menu is used to select/deselect items, put an item
             // such as put a row in edit mode or select it
             switch (item.CommandName)
             {
-                case "BeginEdit": // read more at https://docs.telerik.com/blazor-ui/components/grid/state#initiate-editing-or-inserting-of-an-item
+                case "BeginEdit": // read more at https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-add-edit-state
                     var currState = GridRef.GetState();
                     currState.InsertedItem = null;
                     SampleData itemToEdit = SampleData.GetClonedInstance(GridData.Where(itm => itm.ID == SelectedPerson.ID).FirstOrDefault());

@@ -261,7 +261,7 @@ As a rule of thumb, the Diagram markup follows these naming conventions:
 
 The [Blazor Diagram component exposes methods](slug:Telerik.Blazor.Components.TelerikDiagram#methods) for programmatic operation. To use them, define a reference to the component instance with the `@ref` directive attribute. Blazor populates component references in `OnAfterRenderAsync`, so they are not available earier.
 
-See a full example in section [Create Diagram from JSON](#create-diagram-from-json) above.
+See a full example in section [Create Diagram from JSON](#define-shapes-and-connections-in-json) above.
 
 >caption Using the Diagram reference
 

@@ -336,7 +336,7 @@ The following list of resources provides details and examples for data binding a
 
 * Using hierarchical data source with item collections nested in each item - [Bind FileManager to Hierarchical Data](slug:filemanager-data-binding-hierarchical-data).
 
-* Handling the `OnRead` event to provide only the current folder data - [FileManager `OnRead`](slug:filemanager-events#read-event).
+* Handling the `OnRead` event to provide only the current folder data - [FileManager `OnRead`](slug:filemanager-events#onread).
 
 ## Views
 

@@ -102,19 +102,12 @@ The following information is present in the Gantt state:
 
 You can find the following examples in this section:
 
-- [Gantt State](#gantt-state)
-  - [Basics](#basics)
-    - [Events](#events)
-    - [Methods](#methods)
-  - [Information in the Gantt State](#information-in-the-gantt-state)
-  - [Examples](#examples)
-    - [Set Default (Initial) State](#set-default-initial-state)
-    - [Save and Load Gantt State from Browser LocalStorage](#save-and-load-gantt-state-from-browser-localstorage)
-    - [Set Gantt Options Through State](#set-gantt-options-through-state)
-    - [Get and Override User Action That Changes The Gantt](#get-and-override-user-action-that-changes-the-gantt)
-    - [Initiate Editing or Inserting of an Item](#initiate-editing-or-inserting-of-an-item)
-    - [Get Current Columns Visibility, Order, Field](#get-current-columns-visibility-order-field)
-  - [See Also](#see-also)
+- [Set Default (Initial) State](#set-default-initial-state)
+- [Save and Load Gantt State from Browser LocalStorage](#save-and-load-gantt-state-from-browser-localstorage)
+- [Set Gantt Options Through State](#set-gantt-options-through-state)
+- [Get and Override User Action That Changes The Gantt](#get-and-override-user-action-that-changes-the-gantt)
+- [Initiate Editing or Inserting of an Item](#initiate-editing-or-inserting-of-an-item)
+- [Get Current Columns Visibility, Order, Field](#get-current-columns-visibility-order-field)
 
 ### Set Default (Initial) State
 

@@ -54,7 +54,7 @@ The Grid column width settings can vary and result in the following behaviors:
     </tr>
 </table>
 
-To allow the users to adjust or auto-fit the column widths to the content, enable [Grid column resizing](slug:components/grid/columns/resize). You can also [resize columns through the Grid state](slug:grid-state#setstateasync) or [auto-fit columns programmatically](slug:components/grid/columns/resize#autofit-columns).
+To allow the users to adjust or auto-fit the column widths to the content, enable [Grid column resizing](slug:components/grid/columns/resize). You can also [resize columns through the Grid state](slug:grid-state#methods) or [auto-fit columns programmatically](slug:components/grid/columns/resize#autofit-columns).
 
 > Single table rendering and automatic table layout are not supported.
 

@@ -150,7 +150,7 @@ All events in the [Events table](#events), except `OnModelInit`, provide a [`Gri
 | Property&nbsp;Name | Type | Description |
 | --- | --- | --- |
 | `Field` | `string` | The [column `Field` name](slug:components/grid/columns/bound#data-binding). Applicable only for [in-cell edit mode](slug:grid-editing-incell). |
-| `IsCancelled` | `bool` | Defines if the user action should be prevented. See the [Comparison table](#comparison) below for details. |
+| `IsCancelled` | `bool` | Defines if the user action should be prevented. See the [Events table](#events) for details. |
 | `IsNew` | `bool` | Defines if `Item` is a newly added row or an existing row. |
 | `Item` | `object` | The data item, which the user is adding, deleting, or editing. Cast it to the Grid model type. |
 | `Value` | `object` | The data item value, which the user is editing. You can cast it to the correct type, based on the `Field`. Applicable only for [in-cell edit mode](slug:grid-editing-incell). |

@@ -60,7 +60,7 @@ The `GridPopupEditFormSettings` nested tag exposes the following parameters to a
 
 @[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
 
->important These settings are not applicable if you are using a `<FormTemplate>` with a custom Form component. See more details in [Form Template - Specifics](slug:grid-templates-popup-form#specifics).
+>important These settings are not applicable if you are using a [`<FormTemplate>` with a standalone Form component](slug:grid-templates-popup-form).
 
 ### Form Template
 

@@ -26,7 +26,7 @@ In this article:
 
 To enable load-on-demand for the groups, set `LoadGroupsOnDemand="true"` for the Grid. In this mode, the Grid behaves as usual when there is no grouping, and you can use this together with [Virtual Scrolling for the rows](slug:components/grid/virtual-scrolling).
 
-Once grouping is applied (either manually by the user, or through the Grid [state](slug:grid-state#setstateasync-examples)), the groups will now show up collapsed by default. When the user expands a group, all its rows will be requested from the data source. If you provide all the `Data` to the Grid, the component will perform the operations for you. For details about server operations, see below.
+Once grouping is applied (either manually by the user, or [through the Grid state](slug:grid-state#setstateasync-examples)), the groups will now show up collapsed by default. When the user expands a group, all its rows will be requested from the data source. If you provide all the `Data` to the Grid, the component will perform the operations for you. For details about server operations, see below.
 
 Each group header, each group footer and the Grid footer will count as rows for the purposes of paging. Until you expand a group, its child items are not counted and shown in the `Total` count for the purposes of paging.
 

@@ -365,7 +365,7 @@ The reason for such behavior is that the `Data` collection of the grid is a sepa
 
 This means that you need to ensure that the view-model will be updated as well, so that the `Data` parameter of the grid changes too. There are, generally, two ways to do this:
 
-* Use the [`OnRead` event to perform the grid data operations](slug:components/grid/manual-operations) - the grid will call it after the [CUD events like `OnUpdate`, `OnDelete`, `OnCreate`](slug:grid-editing-overview#notes) and it will let you query the database that was already update (which will also bring in other updates that other uses may have made).
+* Use the [`OnRead` event to perform the Grid data operations](slug:components/grid/manual-operations). The Grid [fires `OnRead` automatically after edit operations](slug:grid-editing-overview#onread-event) and this allows the app to query the database for the already updated data (which will also bring in other updates that other uses may have made).
 
 * Update the local view-model data yourself with the information the grid event gives you (e.g., insert the new item in it, or remove a deleted item, or update the fields of an edited item). You can find similar code used in the [Grid - Inline Editing Live Demo](https://demos.telerik.com/blazor-ui/grid/editing-inline).
 

@@ -36,7 +36,7 @@ The Grid state is a generic [class `GridState<TItem>`](slug:Telerik.Blazor.Compo
 | `ExpandedItems` | `ICollection<TItem>` | The expanded data items, when [using `<DetailTemplate>` (hierarchy)](slug:components/grid/features/hierarchy). |
 | `FilterDescriptors` | `ICollection<IFilterDescriptor>` | A collection of [`CompositeFilterDescriptor`](slug:common-features-descriptors#filtering), except the ones that relate to the [`GridSearchBox`](slug:grid-searchbox). |
 | `GroupDescriptors` | `ICollection<GroupDescriptor>` | Information about currently applied [grouping](slug:components/grid/features/grouping). |
-| `InsertedItem` | `TItem`* | The data item that is being added in `Inline` or `Popup` edit mode. [Not applicable for `Incell` editing](slug:grid-editing-incell#event-sequence). |
+| `InsertedItem` | `TItem`* | The data item that is being added in `Inline` or `Popup` edit mode. [Not applicable for `Incell` editing](slug:grid-editing-incell#events). |
 | `OriginalEditItem` | `TItem`* | The original copy of the data item that is currently in edit mode. This `GridState` property holds the unmodified data item values. |
 | `Page` | `int?` | The current [page index](slug:components/grid/features/paging). Some user actions reset the page index to 1, such as filtering or changing the page size. |
 | `SearchFilter` | `IFilterDescriptor` | The [`CompositeFilterDescriptor`](slug:common-features-descriptors#filtering) that holds the filter descriptors for the [`GridSearchBox`](slug:grid-searchbox). |
@@ -166,7 +166,7 @@ The example below shows how to apply initial sorting, filtering and grouping.
 Here is some additional information about certain `PropertyName` values:
 
 * `EditItem` is used when the user starts editing an existing item.
-* `InsertedItem` signifies the user adding a new item in inline or popup edit mode. It's [not applicable for `Incell` editing](slug:grid-editing-incell#event-sequence).
+* `InsertedItem` signifies the user adding a new item in inline or popup edit mode. It's [not applicable for `Incell` editing](slug:grid-editing-incell#events).
 * `OriginalEditItem` is used when the user exits edit or insert mode via save or cancel.
 * `ColumnStates` is used for several column actions such as hiding, showing, locking, reordering and resizing.
 

@@ -14,12 +14,10 @@ The column's `EditorTemplate` defines the inline template or component that will
 
 You can data bind components in the editor template to the current `context`. This is the data item instance, which is bound to the currently edited Grid row. Cast `context` to the data item type and store it in a global or local variable. Then, use this variable for one-way or two-way binding in the `EditorTemplate`.
 
-The template receives a copy of the original data item. This allows users to cancel their edits and restore the original property value. The [CRUD Events section](slug:grid-editing-overview#events) provides more information about this programmatic item creation.
+The template receives a [copy of the original data item](slug:grid-editing-overview#item-instances). This allows users to cancel their edits and restore the original property value. The [CRUD Events section](slug:grid-editing-overview#events) provides more information about this programmatic item creation.
 
 If you need more complex logic inside the editor template, compared to simple data binding, use the `change` event of the custom editor component. You can also use a [custom Grid edit form](slug:grid-kb-custom-edit-form).
 
->tip The Editor Template works in all edit modes (Inline, Popup, InCell). Before using it with InCell mode, review the [pertinent notes](slug:grid-editing-incell#editor-template).
-
 When an input receives an `EditContext` (usually as a cascading parameter), the framework also requires a `ValueExpression`. If you use two-way binding (the `@bind-Value` syntax), the `ValueExpression` is deducted from there. However, if you use only the `Value` parameter, you have to pass the `ValueExpression` explicitly. This is a lambda expression that tells the framework what property of the model to use for validation. The following sample demonstrates how to achieve that. You can also check the [Requires a value for ValueExpression](slug:common-kb-requires-valueexpression) knowledge base article for more details.
 
 <div class="skip-repl"></div>

@@ -17,7 +17,7 @@ The `TelerikRootComponent` is a special component in Telerik UI for Blazor. Its
 
 The `TelerikRootComponent` is responsible for the following tasks:
 
-* It provides settings to all its child Telerik components, for example, for the [icon type](slug:common-features-icons#set-global-icon-type) or [right-to-left (RTL) support](slug:rtl-support).
+* It provides settings to all its child Telerik components, for example, for the [icon type](slug:common-features-icons#set-global-blazor-icon-type) or [right-to-left (RTL) support](slug:rtl-support).
 * It renders all Telerik popups, which has the following benefits:
     * It's more reliable that the popups will display on top of the other page content.
     * There is no risk for the popups to be trapped by scrollable containers, or clipped by containers with an `overflow:hidden` style.

@@ -21,7 +21,7 @@ Each Splitter pane is configured individually and offers the following parameter
 
 | Attribute | Type and Default&nbsp;Value | Description |
 | --- | --- | --- |
-| `Class` | `string` | The custom CSS class that renders on the pane element (`<div class="k-pane">`). Use it to [apply custom styling](slug:themes-override) or [enable scrolling](#pane-scrolling). |
+| `Class` | `string` | The custom CSS class that renders on the pane element (`<div class="k-pane">`). Use it to [apply custom styling](slug:themes-override). |
 | `Collapsed` | `bool` | Defines if the pane content renders or not. Supports two-way binding. Collapsed panes still show their splitbar and available actions, for example, expand icon or resize handle. Compare with the `Visible` parameter. |
 | `Collapsible` | `bool` | Whether the user can collapse (hide) the pane to provide more room for other panes. When enabled, the adjacent splitbar (the drag handle between the panes) will offer a collapse button for the pane. |
 | `Max` | `string` | The maximum size the pane can have in pixels or percentages. When it is reached, the user cannot expand its size further. |
@@ -39,7 +39,7 @@ Each Splitter pane is configured individually and offers the following parameter
 
         <SplitterPane Collapsible="true" @bind-Size="@PaneSize1" Min="100px" Max="300px">
             <h4>Left Pane</h4>
-            <div>Collapsible and scrollable pane with initial size in px. It can be resized between 100px and 300px.</div>
+            <div>Collapsible pane with initial size in px. It can be resized between 100px and 300px.</div>
         </SplitterPane>
 
         <SplitterPane Collapsible="true" @bind-Size="@PaneSize2">
@@ -138,7 +138,7 @@ Splitter Orientation:
                       Resizable="@FirstPaneResizable"
                       Size="@FirstPaneSize"
                       SizeChanged="@FirstPaneSizeChanged"
-                      Class="k-scrollable">
+                      Scrollable="true">
             <h2>First pane</h2>
             <ul style="list-style-type: disc;">
                 <li>
@@ -173,7 +173,7 @@ Splitter Orientation:
                       Resizable="@LastPaneResizable"
                       Size="@LastPaneSize"
                       SizeChanged="@LastPaneSizeChanged"
-                      Class="k-scrollable">
+                      Scrollable="true">
             <h3>Last pane</h3>
             <ul style="list-style-type: disc;">
                 <li>