Updates based on customer feedback (#2392)

* docs(grid): Improve auto-fit example

* docs(DropDownButton|SplitButton): Docs feedback improvements

* Polish Menu Templates article

* Explanation polishing

* fix slugs

Author: dimodi

_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

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. *@
+<p>Resize the Grid columns and click the AutoFit buttons. The command column is not resizable by the user.</p>
 
 <TelerikButton OnClick="@AutoFitSingleColumn">AutoFit ID Column</TelerikButton>
 <TelerikButton OnClick="@AutoFitMultipleColumns">AutoFit String Columns</TelerikButton>
@@ -76,38 +75,43 @@ The known limitations of the Autofit Columns feature include:
 <TelerikGrid @ref="@GridRef"
              Data="@GridData"
              Resizable="true"
-             Pageable="true" PageSize="10" Sortable="true" Height="300px">
+             Pageable="true"
+             Sortable="true"
+             Height="300px">
     <GridColumns>
-        <GridColumn Field=@nameof(SampleData.Id) Title="ID" Id="IDColumn" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" Id="NameColumn1" />
-        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" Id="NameColumn2" />
+        <GridColumn Field=@nameof(SampleData.Id) Title="ID" Id="@IdColumnId" />
+        <GridColumn Field=@nameof(SampleData.FirstName) Title="First Name" Id="@FirstNameColumnId" />
+        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" Id="@LastNameColumnId" />
         <GridCommandColumn Width="100px" Resizable="false">
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+            <GridCommandButton Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
+            <GridCommandButton Icon="@SvgIcon.Trash">Delete</GridCommandButton>
         </GridCommandColumn>
     </GridColumns>
 </TelerikGrid>
 
 @code {
-    public TelerikGrid<SampleData> GridRef { get; set; }
-    public List<SampleData> GridData { get; set; }
+    public TelerikGrid<SampleData>? GridRef { get; set; }
+    public List<SampleData> 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<string>() { "NameColumn1", "NameColumn2" };
-        await GridRef.AutoFitColumnsAsync(columns);
+        var columnIds = new List<string>() { FirstNameColumnId, LastNameColumnId };
+        await GridRef!.AutoFitColumnsAsync(columnIds);
     }
 
     private async Task AutoFitAllColumns()
     {
-        await GridRef.AutoFitAllColumnsAsync();
+        await GridRef!.AutoFitAllColumnsAsync();
     }
 
     protected override void OnInitialized()
@@ -120,16 +124,16 @@ 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();
     }
 
     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;
     }
 }
 ````