diff --git a/_contentTemplates/dropdownbutton/notes.md b/_contentTemplates/dropdownbutton/notes.md
index 368d02581c..5f8c5becb4 100644
--- a/_contentTemplates/dropdownbutton/notes.md
+++ b/_contentTemplates/dropdownbutton/notes.md
@@ -1,7 +1,7 @@
#dropdownbutton-splitbutton-comparison
The DropDownButton and SplitButton components are similar. They both consist of a primary button and a dropdown element that holds additional action items. The major difference is the purpose of the primary button.
-* [DropDownButton]({%slug dropdownbutton-overview%}) - The main purpose of the primary button is to open the popup with additional actions. The primary button does expose a separate [`OnClick` event]({%slug dropdownbutton-events%}), so you can handle it to invoke a dedicated action but clicking on it always opens the dropdown.
+* [DropDownButton]({%slug dropdownbutton-overview%})—The main purpose of the primary button is to open the popup with additional actions. The primary button exposes a separate [`OnClick` event]({%slug dropdownbutton-events%}), which can invoke a dedicated action. Clicking on the DropDownButton always opens the dropdown.
-* [SplitButton]({%slug splitbutton-overview%}) - The main element contains a primary button and a separate button for opening the dropdown. The purpose of the primary button is to [invoke a standalone action]({%slug splitbutton-events%}#onclick). Clicking on it does not open the dropdown. To open the popup with the additional actions, the user has to click the dedicated button with `caret-alt-down` icon.
+* [SplitButton]({%slug splitbutton-overview%})—The main element contains a primary button and a separate button for opening the dropdown. The purpose of the primary button is to [invoke a standalone action]({%slug splitbutton-events%}#onclick). Clicking on it does not open the dropdown. To open the popup with the additional actions, the user has to click the dedicated button with `caret-alt-down` icon. It is possible to [switch the primary and dropdown actions programmatically]({%slug splitbutton-kb-change-primary-action-onclick%}).
#end
\ No newline at end of file
diff --git a/components/grid/columns/resize.md b/components/grid/columns/resize.md
index 7971ba88a6..56d0fa363f 100644
--- a/components/grid/columns/resize.md
+++ b/components/grid/columns/resize.md
@@ -66,8 +66,7 @@ The known limitations of the Autofit Columns feature include:
>caption Grid Column Resizing and Autofitting
````CSHTML
-@* Grid column resizing and autofitting *@
-@* Drag the border between column headers to change the column width. The command column is not resizable by the user. *@
+Resize the Grid columns and click the AutoFit buttons. The command column is not resizable by the user.
AutoFit ID Column
AutoFit String Columns
@@ -76,38 +75,43 @@ The known limitations of the Autofit Columns feature include:
+ Pageable="true"
+ Sortable="true"
+ Height="300px">
-
-
-
+
+
+
- Update
- Edit
- Delete
- Cancel
+ Edit
+ Delete
@code {
- public TelerikGrid GridRef { get; set; }
- public List GridData { get; set; }
+ public TelerikGrid? GridRef { get; set; }
+ public List GridData { get; set; } = new();
+
+ // Columns IDs used in the Grid column definitions and in the AutoFit methods.
+ private const string IdColumnId = "id-column";
+ private const string FirstNameColumnId = "first-name-column";
+ private const string LastNameColumnId = "last-name-column";
private async Task AutoFitSingleColumn()
{
- await GridRef.AutoFitColumnAsync("IDColumn");
+ await GridRef!.AutoFitColumnAsync(IdColumnId);
}
private async Task AutoFitMultipleColumns()
{
- var columns = new List() { "NameColumn1", "NameColumn2" };
- await GridRef.AutoFitColumnsAsync(columns);
+ var columnIds = new List() { FirstNameColumnId, LastNameColumnId };
+ await GridRef!.AutoFitColumnsAsync(columnIds);
}
private async Task AutoFitAllColumns()
{
- await GridRef.AutoFitAllColumnsAsync();
+ await GridRef!.AutoFitAllColumnsAsync();
}
protected override void OnInitialized()
@@ -120,7 +124,7 @@ The known limitations of the Autofit Columns feature include:
return Enumerable.Range(1, 50).Select(x => new SampleData
{
Id = x,
- Name = $"name {x}",
+ FirstName = $"Name {x}",
LastName = $"Surname {x}"
}).ToList();
}
@@ -128,8 +132,8 @@ The known limitations of the Autofit Columns feature include:
public class SampleData
{
public int Id { get; set; }
- public string Name { get; set; }
- public string LastName { get; set; }
+ public string FirstName { get; set; } = string.Empty;
+ public string LastName { get; set; } = string.Empty;
}
}
````
diff --git a/components/menu/images/menu-template-distinguish-item.png b/components/menu/images/menu-template-distinguish-item.png
deleted file mode 100644
index 6fcc8455e2..0000000000
Binary files a/components/menu/images/menu-template-distinguish-item.png and /dev/null differ
diff --git a/components/menu/templates.md b/components/menu/templates.md
index 51c8cd93a8..0de113ea03 100644
--- a/components/menu/templates.md
+++ b/components/menu/templates.md
@@ -10,48 +10,66 @@ position: 10
# Menu Templates
-The Menu component allows you to define a custom template for its items. This article explains how you can use it.
+The Menu component allows you to define a custom template for its items. This article explains how to use it.
-The `ItemTemplate` of an item is defined under the `ItemTemplate` tag of the menu.
+## ItemTemplate
-The template receives the model to which the item is bound as its `context`. You can use it to render the desired content. The menu is a generic component, so you can use a named context variable that will be of the model type without additional casting.
+The template of all items is defined in the `ItemTemplate` tag of the Menu.
-You can use the template to render arbitrary content according to your application's data and logic. You can use components in it and thus provide rich content instead of plain text. You can also use it to add DOM event handlers like click, doubleclick, mouseover if you need to respond to them.
+The template receives the respective Menu data item as its `context`. You can use it to render the desired content. You can also set the `Context` parameter of the `ItemTemplate` tag and use a [named context variable. This is useful in nested template scenarios]({%slug nest-renderfragment%}).
->caption Use templates to implement navigation between views without the UrlField feature
+The Menu item template can contain arbitrary content according such as HTML markup and other components. You can also use standard event handlers like `@onclick` or `@onmouseover`.
+
+## Examples
+
+### Use ItemTemplate for Navigation
+
+The following example shows how to render `` tags inside the Menu and use them for navigation instead of the [built-in Menu navigation mechanism]({%slug menu-navigation%}). This approach requires the URL property name to be different from `Url`. [`` also supports the `target="_blank"` attribute](#use-itemtemplate-for-styling-and-target_blank).
+
+>caption Use Menu item template for navigation
````CSHTML
-Use your own NavLink elements for navigation instead of the built-in feature of the menu
+Menu with ItemTemplate
-
+
@{
- var shouldNavigate = !string.IsNullOrEmpty(item.Page);
+ @*
+ k-menu-link-text will make the NavLink similar to built-in Menu items.
+ You also need to reset the underline and text color.
+ Do not render an SvgIcon component if item.Icon is null.
+ *@
+
+ var shouldNavigate = !string.IsNullOrEmpty(item.Href);
+
if (shouldNavigate)
{
- @*k-menu-link-text will expand the NavLink to match default Menu styling*@
-
+
+
}
else
{
- @*k-menu-link-text will expand the span to match default Menu styling*@
-
+
+
}
}
-@code {
- public List