docs(DropDownButton|SplitButton): Docs feedback improvements

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

knowledge-base/splitbutton-dynamic-primary-change-onclick.md

@@ -44,15 +44,17 @@ This KB article answers the following questions:
 ````CSHTML
 @* Change SplitButton primary action on click *@
 
+<p>Last click action: @SplitButtonLog</p>
+
 <TelerikSplitButton Icon="@PrimaryButton.Icon"
                     OnClick="@( () => OnSplitButtonClick(PrimaryButton) )">
     <SplitButtonContent>@PrimaryButton.Text</SplitButtonContent>
     <SplitButtonItems>
         @{
-            var secondaryButtons = AllSplitButtons.Where(x => x.Id != PrimaryButton.Id);
-            foreach (var button in secondaryButtons)
+            foreach (var button in SecondaryButtons)
             {
-                <SplitButtonItem Icon="@button.Icon"
+                <SplitButtonItem @key="@button"
+                                 Icon="@button.Icon"
                                  OnClick="@( () => OnSplitButtonClick(button) )">
                     @button.Text
                 </SplitButtonItem>
@@ -61,15 +63,15 @@ This KB article answers the following questions:
     </SplitButtonItems>
 </TelerikSplitButton>
 
-Last click action: @SplitButtonLog
-
 @code {
     private List<SplitButtonModel> AllSplitButtons { get; set; } = new List<SplitButtonModel>() {
         new SplitButtonModel() { Id = 1, Text = "Paste", Icon = SvgIcon.Clipboard },
         new SplitButtonModel() { Id = 2, Text = "Paste as Plain Text", Icon = SvgIcon.ClipboardText },
         new SplitButtonModel() { Id = 3, Text = "Paste as HTML", Icon = SvgIcon.ClipboardHtml },
     };
 
+    private List<SplitButtonModel> SecondaryButtons => AllSplitButtons.Where(x => x.Id != PrimaryButton.Id).ToList();
+
     private SplitButtonModel PrimaryButton { get; set; } = null!;
 
     private string SplitButtonLog { get; set; } = string.Empty;