Revamped Overview Articles

components/chart/overview.md

@@ -12,11 +12,9 @@ position: 0
 
 The <a href="https://www.telerik.com/blazor-ui/chart" target="_blank">Blazor Chart component</a> allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates.
 
-## Basics
+## Creating Blazor Chart
 
-To add a Telerik Chart for Blazor:
-
-1. Use the `<TelerikChart>` tag.
+1. Add the `<TelerikChart>` tag to your razor page.
 1. Define [Chart series](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.ChartSeries) and [bind them to data]({%slug components/chart/databind%}).
 1. Configure the [category axis](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.ChartCategoryAxis) (X axis). Either set a `CategoryField` for each `<ChartSeries>`, or provide all `Categories` in bulk in a `<ChartCategoryAxis>` tag.
 1. Set a `<ChartTitle>` and the `Position` of the [`<ChartLegend>`](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.ChartLegend). To make the legend appear, define a `Name` for each `<ChartSeries>`.
@@ -54,7 +52,6 @@ Basic chart and common settings/elements
 {
 public int SecondSeriesValue { get; set; }
 public string ExtraData { get; set; }
-
 }
 
 public List<MyDataModel> modelData = new List<MyDataModel>()
@@ -131,21 +128,54 @@ You can make a responsive chart
 }
 ````
 
-## Component Namespace and Reference
+## Chart Parameters
+
+The following table lists Chart parameters, which are not discussed elsewhere in the component documentation.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default value | Description |
+|-----------|------------------------|-------------|
+| `Width` | `string` | Controls the width of the StockChart. |
+| `Height` | `string` | Controls the height of the StockChart. |
+| `Class` | `string` | Renders a custom CSS class on the `<div class="k-chart">` element. |
+| `Transitions` | `bool?` | Controls if the Chart renders animations. |
+
+## Chart Reference and Methods
+
+To execute Chart methods, obtain reference to the component instance via `@ref`.
+
+ @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Method | Description |
+|---------|-------------|
+| Refresh | Use the method to programmatically re-render the Chart. |
 
 ````CSHTML
 @using Telerik.Blazor.Components
 
+<TelerikButton OnClick="@RefreshTheChart">Refresh the Chart</TelerikButton>
+
 <TelerikChart @ref="myChartRef">
 </TelerikChart>
 
 @code {
-Telerik.Blazor.Components.TelerikChart myChartRef;
+public TelerikChart myChartRef;
+
+private void RefreshTheChart()
+{
+ myChartRef.Refresh();
+}
 }
 ````
 
+## Next Steps
+
+* [Data bind the Chart]({%slug components/chart/databind%})
+* [Explore the Chart events]({%slug chart-events%})
+* [Learn more about Chart Tooltips](%slug chart-tooltip-overview%)
+
 ## See Also
 
- * [Data Binding]({%slug components/chart/databind%})
  * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index)
  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart)

components/chunkprogressbar/overview.md

@@ -13,14 +13,11 @@ position: 0
 The <a href = "https://www.telerik.com/blazor-ui/chunkprogressbar" target = "_blank">Blazor ChunkProgressBar component</a> tracks the execution of operations and displays what portion of it is completed in predefined number of sections (chunks). For very long tasks, you can also make it [indeterminate]({%slug chunkprogressbar-indeterminate-state%}) while waiting for an update.
 
 
-## Basic ChunkProgressBar
+## Creating Blazor ChunkProgressBar
 
-To use the Telerik ChunkProgressBar in your Blazor application:
-* add the `<TelerikChunkProgressBar>` tag.
-* set its `Value` and `Max` parameters to denote how much is completed.
- * You can read more about the relationship between them in the [Chunk Count, Value and MaxValue](#chunk-count-value-and-maxvalue) section.
+1. Add the `<TelerikChunkProgressBar>` tag.
 
-![chunkprogress-bar basic configuration example](images/chunkprogressbar-basic-config-example.png)
+1. Set its `Value` and `Max` parameters to denote the completed progress. Read more about the relationship between them in the [Chunk Count, Value and MaxValue](#chunk-count-value-and-maxvalue) section.
 
 ````CSHTML
 @*Basic configuration of the ChunkProgressBar*@
@@ -33,48 +30,11 @@ To use the Telerik ChunkProgressBar in your Blazor application:
 }
 ````
 
-
->caption Component namespace and reference
-
-````CSHTML
-<TelerikChunkProgressBar Value="@ChunkProgressBarValue" Max="@MaxValue" @ref="@MyChunkProgressBar" />
-
-@code {
- Telerik.Blazor.Components.TelerikChunkProgressBar MyChunkProgressBar { get; set; }
-
- public double MaxValue { get; set; } = 10;
- public double ChunkProgressBarValue { get; set; } = 3;
-}
-````
-
-## Features
-
-The ChunkProgressBar provides the following features:
-
-* `Class` - the CSS class that will be rendered on the main wrapping element. You can use it to cascade styles more easily.
-* `Max` - `double`, defaults to `100` - the maximum value of the ChunkProgressBar. It must be greater than `0`.
-* `Value` - `double` - the value of the ChunkProgressBar. This value indicates the progress of the tracked process and is distributed in the chunks (sections) of the ChunkProgressBar. It is a fraction of the `Max`. Read mode in the [Chunk Count, Value and MaxValue](#chunk-count-value-and-maxvalue) section.
-* `ChunkCount` - `unsigned int`, defaults to `5` - the number of chunks the ChunkProgressBar will be separated into.
-* `Orientation` - you can control the orientation of the Progress Bar, through the `ProgressBarOrientation` enum, with members:
- * `Horizontal` - this is the default value
- * `Vertical`
-* `Indeterminate` - `bool`, defaults to `false` - see the [Indeterminate]({%slug chunkprogressbar-indeterminate-state%}) article for more information.
-
 ## Chunk Count, Value and MaxValue
 
-The following examples explain how the three parameters of the component tie together to determine how many chunks are filled in.
+This section explains the connection between the [ChunkCount, Value, and MaxValue parameters](#chunkprogressbar-parameters). In the [Matching Values](#matching-values) and the [Non-matching Values](#non-matching-values) sub-sections you can see how the ChunkProgressBar will render its chunks in these scenarios. 
 
-- [ChunkProgressBar Overview](#chunkprogressbar-overview)
- - [Basic ChunkProgressBar](#basic-chunkprogressbar)
- - [Features](#features)
- - [Chunk Count, Value and MaxValue](#chunk-count-value-and-maxvalue)
- - [Matching Values for the Max and ChunkCount Parameters](#matching-values-for-the-max-and-chunkcount-parameters)
- - [Non-matching Value for the Max and ChunkCount Parameters](#non-matching-value-for-the-max-and-chunkcount-parameters)
- - [Examples](#examples)
- - [Responsive ProgressBar](#responsive-progressbar)
- - [See Also](#see-also)
-
-### Matching Values for the Max and ChunkCount Parameters
+### Matching Values
 
 When the `Max` and `ChunkCount` parameters match in value, the `Value` parameter represents the number of chunks that are hightlighted.
 
@@ -89,7 +49,7 @@ When the `Max` and `ChunkCount` parameters match in value, the `Value` parameter
 
 ![Blazor Chunkprogressbar Matching Values Example](images/chunkprogressbar-matching-values-example.png)
 
-### Non-matching Value for the Max and ChunkCount Parameters
+### Non-matching Value
 
 Each chunk (section) represents an equal part of the maximum value (`Max/ChunkCount`). So, when the `Max` and `ChunkCount` parameters do not match in value, the `Value` parameter highlights the number of chunks that is less than or equal (`<=`) to the full fractions that it represents.
 
@@ -106,6 +66,19 @@ In the example below each chunk is "worth" `10 / 4 = 2.5`. The `Value` is `3` so
 
 ![non-matching values example screenshot](images/non-matching-value-example.png)
 
+## ChunkProgressBar Parameters
+
+ @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default Value | Description |
+| --- | --- | --- |
+| `Class` | `string` | Renders a custom CSS class to the `<div class="k-progressbar">` element. |
+| `Max` | `double` <br /> (`100`) | The maximum value of the ChunkProgressBar. It must be greater than `0`. |
+| `Value` | `double` | The value of the ChunkProgressBar. This value indicates the progress of the tracked process and is distributed in the chunks (sections) of the ChunkProgressBar. It is a fraction of the `Max`. Read mode in the [Chunk Count, Value and MaxValue](#chunk-count-value-and-maxvalue) section. |
+| `ChunkCount` | `unsigned int` <br /> (`5`) | The number of chunks the ChunkProgressBar will be separated into. |
+| `Orientation` | `ProgressBarOrientation` <br /> (`Horizontal`) | Controls the orientation of the Chunk Progress Bar. |
+| `Indeterminate` | `bool` <br /> (`true`) | Controls if the Chunk Progress Bar is in indeterminate state. Read the [Indeterminate]({%slug chunkprogressbar-indeterminate-state%}) article for more information. |
+
 ## Examples
 
 ### Responsive ProgressBar
@@ -125,9 +98,12 @@ In the example below each chunk is "worth" `10 / 4 = 2.5`. The `Value` is `3` so
 </div>
 ````
 
+## Next Steps
+
+* [Learn more about the Indeterminate state]({%slug chunkprogressbar-indeterminate-state%})
+
 ## See Also
 
  * [Live Demo: ChunkProgressBar](https://demos.telerik.com/blazor-ui/chunkprogressbar/overview)
- * [Indeterminate state]({%slug chunkprogressbar-indeterminate-state%})
  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChunkProgressBar)
 

components/editor/overview.md

@@ -12,9 +12,9 @@ position: 0
 
 The <a href = "https://www.telerik.com/blazor-ui/editor" target="_blank">Blazor HTML Editor component</a> enables your users to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface and delivers a set of tools for creating, editing, and formatting text, paragraphs, lists, and other HTML elements.
 
-#### To use the Telerik Editor for Blazor:
+## Creating Editor
 
-1. Add the `<TelerikEditor>` tag.
+1. Use the `TelerikEditor` tag to add the component to your razor page.
 1. Bind its `Value` to the `string` field you want to get the HTML content in.
 
 ````CSHTML
@@ -50,54 +50,17 @@ The <a href = "https://www.telerik.com/blazor-ui/editor" target="_blank">Blazor
 }
 ````
 
->caption The result from the code snippet above
-
-![Editor first look](images/editor-overview.png)
-
-
-## Component Reference
-
-You can use the component reference to call its [Methods](#methods), especially when creating [custom tools]({%slug editor-custom-tools%}). This snippet shows how to obtain a reference and its namespace.
-
-
-````CSHTML
-@using Telerik.Blazor.Components 
-
-<TelerikEditor @ref="@TheEditorReference"></TelerikEditor>
-
-@code{
- TelerikEditor TheEditorReference { get; set; }
-}
-````
-
-
-
-## Dependencies
-
-Authoring HTML content happens in the browser and relies on the browser HTML editing engine (see the [contenteditable](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) attribute). Thus, an HTML Editor component must rely on that and use JavaScript.
-
-The Telerik UI for Blazor Editor uses the ProseMirror engine and it depends on it. You do not need to add any extra assets or references yourself, though, we have taken care of everything internally.
-
-<!-- the Editor registers them for you when it initializes, and it takes points them to the static assets of the Telerik UI for Blazor package. This approach improves the initial load time of your app and removes the dependency management task from you.
-
--->
-
 ## Get/Set Content
 
-The Blazor HTML Editor interacts with its content (value) like all standard components - through its `Value` parameter. You can use it to get and set the HTML string the editor will work with. You can read more about value binding and data binding [here]({%slug get-started-value-vs-data-binding%}).
-
-You can use the following features to get or set the editor content:
+The Blazor HTML Editor interacts with its content (value) like all standard components - through its `Value` parameter. You can use it to get and set the HTML string the editor will work with. [Read more about value binding and data binding...]({%slug get-started-value-vs-data-binding%})
 
-* `@bind-Value` - the recommended approach of using two-way binding to get and set the content of the editor. It lets your view-model provide the initial value, and it will update the view-model as the user alters the HTML.
-
-* `DebounceDelay` - the time in milliseconds that passes between updates on the `Value`. The default is `100ms` and if that causes performance issues with many repaints on your view, you can increase it. Since the editor is expected to handle longer editing sessions and larger content than regular inputs, we added this parameter to debounce the view-model updates and events.
-
-* [Validation]({%slug common-features/input-validation%}#editor) - the standard Data Annotation attributes are supported for validation, but for the performance reasons listed above, validation happens with the `DebounceDelay` delay, not immediately on every keystroke, like simpler inputs.
+>important @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
 
-* The `ValueChanged` [event]({%slug editor-events%}) lets you receive the value and act on it. If you use the `ValueChanged` event (no two-way binding), you can effectively cancel the user's input by not updating the view-model, or you can even alter it with something else.
+## Validation
 
->important @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
+You can use the standard Data Annotation attributes to validate the content of the Editor. For the performance reasons listed above, validation happens with the `DebounceDelay` delay, not immediately on every keystroke, like simpler inputs. [See the Validation article for an example on how to validate the content of the Editor...]({%slug common-features/input-validation%}#editor)
 
+## Large Content Support 
 
 @[template](/_contentTemplates/editor/general.md#content-size-signalr)
 
@@ -113,9 +76,29 @@ Tables, their columns, and rows in the content area of Editor are resizable. To
 
 Images in the content area of the Editor are resizable. To grab the resize handles, hover on the borders of the image.
 
-## Methods
+## Dependencies
+
+The Telerik UI for Blazor Editor uses the ProseMirror engine and it depends on it. You do not need to add any extra assets or references yourself, though, we have taken care of everything internally.
+
+## Editor Parameters
+
+The following table lists Editor parameters, which are not discussed elsewhere in the component documentation. 
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default value | Description |
+|-----------|------------------------|-------------|
+| `Value` | `string` | The value of the component. It supports two-way binding or alternatively, use it with the [`ValueChanged` event]({%slug editor-events%}#valuechanged). |
+| `DebounceDelay` | `int` <br /> (`100`) | The time in milliseconds that passes between updates on the `Value`. The default is `100ms` and if that causes performance issues with many repaints on your view, you can increase it. Since the editor is expected to handle longer editing sessions and larger content than regular inputs, we added this parameter to debounce the view-model updates and events. |
+| `Adaptive` | `bool` | Defines if the [toolbar]({%slug editor-toolbars%}) should adapt to changes in the width of the component and automatically hide and show the overflowing items in a popup. |
+| `Width` | `string` | Defines the width of the Editor. The default width is `null` but the themes apply `100%`. |
+| `Height` | `string` <br /> (`250px`) | Defines the height of the Editor. |
+| `AriaLabelledBy` | `string` | Maps to the `area-labelledby` attribute. Use this parameter to reference another element to define its accessible name. |
+| `AriaDescribedBy` | `string` | Maps to the `area-describedby` attribute. Use this parameter to establish a relationship between widgets or groups and the text that describes them. |
+
+## Editor Reference and Methods
 
-The editor [reference](#component-reference) exposes the `ExecuteAsync` method which lets you call programmatically the tools and commands of the editor (such as the Bold too, or a Back Color tool, or inserting HTML).
+You can use the component reference to call its `ExecuteAsync` method, especially when creating [custom tools]({%slug editor-custom-tool%}). This method allows you to call programmatically the tools and commands of the editor (such as the Bold too, or a Back Color tool, or inserting HTML).
 
 You can find the reference for the available commands and their respective arguments in the [Built-in Tools list]({%slug editor-built-in-tools%}) section of the documentation.
 
@@ -142,20 +125,17 @@ You can replace that string with any other content you can generate/obtain accor
  }
 }
 ````
-<!--
 
-## Features
+## Next Steps
 
-consider - maybe link toolbars, import/export, custom commands, events, validation. There isn't much left so this may drop out.
--->
+* [Explore the Built-in Tools and Commands]({%slug editor-built-in-tools%})
+* [Create Custom Tools]({%slug editor-custom-tool%})
+* [Explore the Editor Edit Modes](editor-edit-modes-overview)
+* [Import and Export Data]({%slug editor-import-export%})
+* [Learn more about the Editor Events]({%slug editor-events%})
 
 ## See Also
 
- * [Toolbar]({%slug editor-toolbars%})
- * [Built-in Tools and Commands]({%slug editor-built-in-tools%})
- * [Custom Tools]({%slug editor-custom-tools%})
- * [Import and Export]({%slug editor-import-export%})
- * [Events]({%slug editor-events%})
  * [Live Demo: Editor](https://demos.telerik.com/blazor-ui/editor/overview)
  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikEditor)