[4.2] docs(contextmenu): add refresh method (#1398)

* docs(contextmenu): add refresh method

* Update overview.md

---------

Co-authored-by: Desislava Mihaylova <[email protected]>

Author: xristianstefanov

components/contextmenu/overview.md

@@ -1,7 +1,7 @@
 ---
 title: Overview
 page_title: Context Menu Overview
-description: Overview of the Context Menu for Blazor.
+description: Try now the Telerik UI for Blazor Context Menu and learn more about its options for creating the component, binding it to data, changing its navigation views, customizing the component per target, and more.
 slug: contextmenu-overview
 tags: telerik,blazor,context menu,overview
 published: True
@@ -10,23 +10,25 @@ position: 0
 
 # Blazor Context Menu Overview
 
-The <a href="https://www.telerik.com/blazor-ui/context-menu" target="_blank">Blazor Context Menu component </a> displays a contextual popup with data (flat or hierarchical) in a traditional menu-like structure. It lets you invoke commands while preserving screen real estate.
+The <a href="https://www.telerik.com/blazor-ui/context-menu" target="_blank">Blazor Context Menu</a> displays a contextual popup with flat or hierarchical data in a traditional menu-like structure. The component enables you to invoke commands while preserving the screen real estate.
 
-In addition to built-in [navigation capabilities]({%slug contextmenu-navigation%}), you can browse through the items and their children, define [templates]({%slug contextmenu-templates-overview%}) for the individual nodes, render text and icons/images, and respond to [events]({%slug contextmenu-events%}).
+In addition to the built-in [navigation capabilities]({%slug contextmenu-navigation%}), you can browse through the items and their children, define [templates]({%slug contextmenu-templates-overview%}) for the individual nodes, render text and icons or images, and respond to [events]({%slug contextmenu-events%}).
 
-## Creating Context Menu
+## Creating the Blazor Context Menu
 
-1. Add the `TelerikContextMenu` tag and set its `Selector` parameter to a CSS selector that will match the element(s) you want to attach the context menu to.
-1. Provide a collection of models to its `Data` property. The Context Menu will automatically recognize property names like `Id`, `ParentId`, `Text` and a few others. Otherwise, [use bindings to configure custom property names]({%slug contextmenu-data-binding-overview%}#data-bindings).
+To create the Context Menu: 
+
+1. Add the `TelerikContextMenu` tag and set its `Selector` parameter to a CSS selector that will match the elements to which you want to attach the Context Menu.
+1. Provide a collection of models to the `Data` property of the component. The Context Menu will automatically recognize property names like `Id`, `ParentId`, `Text`, and more. Otherwise, [configure custom property names by using bindings]({%slug contextmenu-data-binding-overview%}#data-bindings).
 1. Handle the [`OnClick` event]({%slug contextmenu-events%}#onclick) to respond to user actions.
 
->caption Basic context menu with hierarchical data binding and OnClick event handler
+>caption A basic Context Menu with hierarchical data binding and an `OnClick` event handler
 
 ````CSHTML
-@* Use a context menu to perform actions *@
+@* Use a Context Menu to perform actions *@
 
 <div class="context-menu-target" style="width:200px; height: 100px; background: yellow; margin-bottom: 50px;">
-    Right click (or tap-and-hold on a touch device) for a context menu.
+    Right-click (or tap and hold on a touch device) for a Context Menu.
 </div>
 
 <TelerikContextMenu Selector=".context-menu-target" Data="@MenuItems"                       
@@ -98,53 +100,54 @@ In addition to built-in [navigation capabilities]({%slug contextmenu-navigation%
 
 To show any items, the Blazor Context Menu requires a data source that you can provide through the `Data` property. The Context Menu allows you to display the items both as flat data and hierarchically. [Read more about the Blazor Context Menu data binding...]({%slug contextmenu-data-binding-overview%})
 
-## Customize per Target
+## Per-Target Customization
 
-The same context menu can easily be attached to many targets, or you can use its `ShowAsync(x, y)` method to show it explicitly based on your business logic needs, data and events. Read more in the [Integration]({%slug contextmenu-integration%}) article.
+You can easily attach one and the same Context Menu to many targets or you can use its `ShowAsync(x, y)` method to show the component explicitly based on your business logic needs, data, and events. [Read more about the integration approaches of the Blazor Context Menu...]({%slug contextmenu-integration%}).
 
-## Navigate Views
+## Navigation Views
 
-A menu is often used to list pages, views or sections in an application so the user can navigate through them. To do that with a menu, you have two options:
+A Context Menu is often used to list pages, views, or sections in an application so that users can navigate through them. To achieve the desired scenario, use either of the following options:
 
-* Use the built-in `UrlField` in the [bound data]({%slug contextmenu-data-binding-overview%}) to populate the URLs in the anchors the menu will generate for you if an URL is provided for the given item. An example is available in the beginning of this article.
-* Use a [Template]({%slug contextmenu-templates-overview%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.
+* If a URL is provided for the given item, populate the URLs in the anchors which the Context Menu will generate by using the built-in `UrlField` in the [bound data]({%slug contextmenu-data-binding-overview%}), as demonstrated in the first example of this article.
+* Enable fine-tuning and generate the desired links, such as `NavLink` components, by using a [template]({%slug contextmenu-templates-overview%}).
 
 [Read more about the Blazor Context Menu navigation...]({%slug contextmenu-navigation%})
 
 ## Icons
 
-To illustrate the purpose of each menu item, the Blazor Context Menu allows you to add images, icon classes, or font icons. [Read more about the Blazor Menu icons...]({%slug contextmenu-icons%})
+To illustrate the purpose of each Context Menu item, the Blazor Context Menu allows you to add images, icon classes, or font icons. [Read more about the Blazor Menu icons...]({%slug contextmenu-icons%})
 
 ## Templates
 
-You can use the functionality of the built-in templates and customize what is rendered in the items. [Read more about the Blazor Context Menu templates...]({%slug contextmenu-templates-overview%})
+You can use the functionality of the built-in templates and customize what is rendered in the items. [Read more about the available Blazor Context Menu templates...]({%slug contextmenu-templates-overview%})
 
 ## Events
 
-The Context Menu generates events that you can handle and further customize its behavior. [Read more about the Blazor Context Menu events...]({%slug contextmenu-events%})
+The Context Menu generates events that you can handle and further customize its behavior. [Read more about the supported Blazor Context Menu events...]({%slug contextmenu-events%})
 
 ## Context Menu Parameters
 
-The following table lists Context Menu parameters, which are not related to other features on this page. Check the [Context Menu API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikContextMenu-1) for a full list of properties, methods and events.
+The following table lists Context Menu parameters, which are not related to other features on this page. For the full list of properties, methods, and events, see the [Context Menu API reference documentation](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikContextMenu-1).
 
 | Attribute | Type and Default&nbsp;Value | Description |
 | --- | --- | --- |
-| `Class` | `string` | Renders additional CSS class to the main wrapping element of the component. Use it to apply custom styles or [override the theme]({%slug themes-override%}). |
-| `Selector` | `string` | CSS selector of the target elements where the Context Menu will be shown.|
+| `Class` | `string` | Renders an additional CSS class to the main wrapping element of the component. Use it to apply custom styles or [override the theme]({%slug themes-override%}). |
+| `Selector` | `string` | A CSS selector of the target elements where the Context Menu will be shown.|
 
 ## Context Menu Reference and Methods
 
-Add a reference to the component instance to use the [Context Menu methods](/blazor-ui/api/Telerik.Blazor.Components.TelerikContextMenu-1).
+To use the [Blazor Context Menu methods](/blazor-ui/api/Telerik.Blazor.Components.TelerikContextMenu-1), add a reference to the component instance.
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
 | Method | Description |
 | --- | --- |
-| `ShowAsync` | programmatically shows the ContextMenu 
-| `HideAsync` | programmatically hides the ContextMenu
+| `ShowAsync` | Programmatically shows the Context Menu. |
+| `HideAsync` | Programmatically hides the Context Menu. |
+| `Refresh` | Re-renders the component. |
 
 ````CSHTML
-@* Open and close the ContextMenu programmatically *@
+@* Open, close, and refresh the Context Menu programmatically *@
 
 <div @oncontextmenu:preventDefault="true"
      @oncontextmenu="@( (MouseEventArgs e) => ShowContextMenu(e, false) )"
@@ -164,23 +167,32 @@ Add a reference to the component instance to use the [Context Menu methods](/bla
                 }
             </ul>
         }
-
+        <TelerikTextBox @bind-Value="@TextBoxValue" />
+        <br />
+        <TelerikButton OnClick="@HandleTextBoxReset">Reset textbox</TelerikButton>
         <TelerikButton OnClick="@(async () => await TheContextMenu.HideAsync())">Close</TelerikButton>
     </Template>
 </TelerikContextMenu>
 
 @code {
     public List<ContextMenuItem> MenuItems { get; set; }
+    public string TextBoxValue { get; set; }
 
-    // the context menu is a generic component and its type depends on the model it binds to
+    // The Context Menu is a generic component and its type depends on the model to which it binds.
     TelerikContextMenu<ContextMenuItem> TheContextMenu { get; set; }
 
+    void HandleTextBoxReset()
+    {
+        TextBoxValue = "";
+        TheContextMenu.Refresh();
+    }
+
     async Task ShowContextMenu(MouseEventArgs e, bool IsSpecial)
     {
         await TheContextMenu.ShowAsync(e.ClientX, e.ClientY);
     }
 
-    // generate sample data for the listview and the menu
+    // Generate sample data for the ListView and the Context Menu.
     protected override void OnInitialized()
     {
         MenuItems = new List<ContextMenuItem>()
@@ -218,12 +230,11 @@ Add a reference to the component instance to use the [Context Menu methods](/bla
 
 ## Next Steps
 
-* [Binding the Context Menu to Data]({%slug contextmenu-data-binding-overview%})
-
-* Handle the [`OnClick` event]({%slug contextmenu-events%}#onclick) of the Context Menu to respond to the user action
+* [Binding the Telerik UI for Blazor Context Menu to Data]({%slug contextmenu-data-binding-overview%})
+* [Handling the `OnClick` Context Menu Event and Respond to User Interaction]({%slug contextmenu-events%}#onclick)
 
 ## See Also
 
-  * [Data Binding a Context Menu]({%slug contextmenu-data-binding-overview%})
-  * [Live Demo: Context Menu](https://demos.telerik.com/blazor-ui/contextmenu/overview)
-  * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikContextMenu-1)
+* [Binding the Blazor Context Menu to Data]({%slug contextmenu-data-binding-overview%})
+* [Live Demo: Overview of the Blazor Context Menu](https://demos.telerik.com/blazor-ui/contextmenu/overview)
+* [Context Menu API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikContextMenu-1)