Merge branch 'master' into themes-docs-removal

Author: dimodi

_config.yml

@@ -702,7 +702,7 @@ defaults:
         category: "default"
         product: "blazor"
         editable: true
-        description_suffix: "Read more in Telerik UI for Blazor Documentation."
+        description_suffix: ""
 -
     scope:
         path: "blazor"
@@ -765,7 +765,7 @@ defaults:
         category: "default"
         product: "blazor"
         editable: true
-        description_suffix: "Read more in our Blazor Knowledge Base articles."
+        description_suffix: ""
 -
     scope:
         path: "web.config"

_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

common-features/data-binding/onread.md

@@ -59,6 +59,7 @@ Each component name points to component-specific `OnRead` documentation and exam
 | [DropDownList]({%slug components/dropdownlist/events%}#onread) | - | [DropDownList virtualization]({%slug dropdownlist-virtualization%}) |
 | [Grid]({%slug components/grid/manual-operations%}) | [Grid paging]({%slug components/grid/features/paging%}) | [Grid row virtualization]({%slug components/grid/virtual-scrolling%}) |
 | [ListView]({%slug listview-manual-operations%}) | [ListView paging]({%slug listview-paging%}) | - |
+| [MultiColumnComboBox]({%slug multicolumncombobox-events%}#onread) | - | [MultiColumnComboBox virtualization]({%slug multicolumncombobox-virtualization%}) |
 | [MultiSelect]({%slug multiselect-events%}#onread) | - | [MultiSelect virtualization]({%slug multiselect-virtualization%}) |
 
 Components like the [**TreeList**]({%slug treelist-data-binding-load-on-demand%}) and the [**TreeView**]({%slug components/treeview/data-binding/load-on-demand%}) don't have an `OnRead` event. Instead, they load data on demand via `OnExpand` events.

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;
     }
 }
 ````

components/mediaquery/integration.md

@@ -191,12 +191,142 @@ You can resize the Chart based on the browser size and re-render with the new di
 
 ## Form Integration
 
-You can utilize the Form Columns to fit the contents of the Telerik Form to a smaller browser window. You can find an example in the <a href="https://github.com/telerik/blazor-ui/tree/master/form/responsive-form" target="_blank">Responsive Form</a> demo application.
+You can use the MediaQuery component to set various [layout-related parameters of the Form component]({%slug form-overview%}#form-parameters), such as `Orientation`, `Columns`, `ColumnSpacing`, and `ButtonsLayout`.
+
+>caption Responsive Form with MediaQuery
+
+````CSHTML
+@using System.ComponentModel.DataAnnotations
+
+<ul>
+    <li>
+        <code>IsSmallScreen</code>: <strong>@IsSmallScreen</strong>
+    </li>
+    <li>
+        <code>IsMediumScreen</code>: <strong>@IsMediumScreen</strong>
+    </li>
+    <li>
+        <code>IsLargeScreen</code>: <strong>@IsLargeScreen</strong>
+    </li>
+    <li>
+        <code>IsExtraLargeScreen</code>: <strong>@IsExtraLargeScreen</strong>
+    </li>
+</ul>
+
+<TelerikForm Model="@Employee"
+             ButtonsLayout="@FormButtonsLayout"
+             Orientation="@FormOrientation">
+    <FormValidation>
+        <DataAnnotationsValidator></DataAnnotationsValidator>
+        <TelerikValidationSummary />
+    </FormValidation>
+    <FormItems>
+        <FormGroup LabelText="Personal Information" Columns="@FormGroupColumns" ColumnSpacing="@FormGroupColumnSpacing">
+            <FormItem Field="@nameof(Person.FirstName)" LabelText="First Name"></FormItem>
+            <FormItem Field="@nameof(Person.MiddleName)" LabelText="Middle Name"></FormItem>
+            <FormItem Field="@nameof(Person.LastName)" LabelText="Last Name"></FormItem>
+            <FormItem Field="@nameof(Person.BirthDate)" LabelText="Birth Date"></FormItem>
+            <FormItem Field="@nameof(Person.Address)" EditorType="@FormEditorType.TextArea" ColSpan="@FormGroupColumns"></FormItem>
+        </FormGroup>
+        <FormGroup LabelText="Work Information" Columns="@FormGroupColumns" ColumnSpacing="@FormGroupColumnSpacing">
+            <FormItem Field="@nameof(Person.Id)" LabelText="Corporate ID" Enabled="false"></FormItem>
+            <FormItem Field="@nameof(Person.HireDate)" LabelText="Hire Date"></FormItem>
+            <FormItem Field="@nameof(Person.Team)"></FormItem>
+            <FormItem Field="@nameof(Person.LeaveDate)" LabelText="Leave Date"></FormItem>
+        </FormGroup>
+    </FormItems>
+</TelerikForm>
+
+<TelerikMediaQuery Media="@SmallScreenMediaQuery" OnChange="@( (bool matches) => { IsSmallScreen = matches; ConfigureForm(); } )" />
+<TelerikMediaQuery Media="@MediumScreenMediaQuery" OnChange="@( (bool matches) => { IsMediumScreen = matches; ConfigureForm(); } )" />
+<TelerikMediaQuery Media="@LargeScreenMediaQuery" OnChange="@( (bool matches) => { IsLargeScreen = matches; ConfigureForm(); } )" />
+<TelerikMediaQuery Media="@ExtraLargeScreenMediaQuery" OnChange="@( (bool matches) => { IsExtraLargeScreen = matches; ConfigureForm(); } )" />
+
+@code {
+    private Person Employee { get; set; } = new() { Id = 1234 };
+
+    private FormOrientation FormOrientation { get; set; } = FormOrientation.Vertical;
+    private FormButtonsLayout FormButtonsLayout { get; set; } = FormButtonsLayout.Start;
+    private int FormGroupColumns { get; set; } = 1;
+    private string FormGroupColumnSpacing { get; set; } = string.Empty;
+
+    private string SmallScreenMediaQuery { get; set; } = "(max-width: 430px)";
+    private string MediumScreenMediaQuery { get; set; } = "(min-width: 431px)";
+    private string LargeScreenMediaQuery { get; set; } = "(min-width: 768px)";
+    private string ExtraLargeScreenMediaQuery { get; set; } = "(min-width: 1199px)";
+
+    private bool IsSmallScreen { get; set; }
+    private bool IsMediumScreen { get; set; }
+    private bool IsLargeScreen { get; set; }
+    private bool IsExtraLargeScreen { get; set; }
+
+    private void ConfigureForm()
+    {
+        if (IsMediumScreen)
+        {
+            FormOrientation = FormOrientation.Horizontal;
+            FormButtonsLayout = FormButtonsLayout.Center;
+            FormGroupColumns = 2;
+            FormGroupColumnSpacing = "1em";
+        }
+
+        if (IsSmallScreen)
+        {
+            FormOrientation = FormOrientation.Vertical;
+            FormButtonsLayout = FormButtonsLayout.Stretch;
+            FormGroupColumns = 1;
+            FormGroupColumnSpacing = string.Empty;
+        }
+
+        if (IsLargeScreen)
+        {
+            FormOrientation = FormOrientation.Vertical;
+            FormButtonsLayout = FormButtonsLayout.Start;
+            FormGroupColumns = 3;
+            FormGroupColumnSpacing = "2em";
+        }
+
+        if (IsExtraLargeScreen)
+        {
+            FormOrientation = FormOrientation.Vertical;
+            FormButtonsLayout = FormButtonsLayout.End;
+            FormGroupColumns = 4;
+            FormGroupColumnSpacing = "3em";
+        }
+    }
+
+    public class Person
+    {
+        public int Id { get; set; }
+
+        [Required]
+        public string FirstName { get; set; } = string.Empty;
+
+        [Required]
+        public string MiddleName { get; set; } = string.Empty;
+
+        [Required]
+        public string LastName { get; set; } = string.Empty;
+
+        [Required]
+        public string Address { get; set; } = string.Empty;
+
+        [Required]
+        public DateTime? BirthDate { get; set; }
+
+        [Required]
+        public DateTime HireDate { get; set; } = DateTime.Today;
+
+        [Required]
+        public string? Team { get; set; }
+
+        public DateTime? LeaveDate { get; set; }
+    }
+}
+````
 
 ## See Also
-  
-  * [Live Demo: MediaQuery - Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
-  * [Overview]({%slug mediaquery-overview%})
-  * [Events]({%slug mediaquery-events%})
 
-   
+* [Live Demo: MediaQuery and Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
+* [MediaQuery Overview]({%slug mediaquery-overview%})
+* [MediaQuery Events]({%slug mediaquery-events%})

components/mediaquery/overview.md

@@ -61,17 +61,16 @@ The <a href = "https://www.telerik.com/blazor-ui/mediaquery" target="_blank">Med
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-| Parameter | Type and Default value | Description |
-|-----------|------------------------|-------------|
-| `Media`  | `string` | the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">media query string</a> that will be matched. |
+| Parameter | Type | Description |
+|---|---|---|
+| `Media`  | `string` | The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">media query string</a> that will be matched. |
 
 ## Notes
 
-The MediaQuery component facilitates the usage of CSS media queries in your C# code. There are a few points to keep in mind:
+The MediaQuery component facilitates the usage of CSS media queries in your C# code:
 
-* The MediaQuery component is not a replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.
-
-* The MediaQuery component makes it easy to use C# logic based on the breakpoint that matches - such as changing parameter values, replacing a component with a different component or even not rendering a part of the layout (with CSS alone you can resize parts of the app or hide them visually, but they still render).
+* The MediaQuery component makes it easy to use C# logic based on the matched media query breakpoints. For example, you can change parameter values, replace a component with a different component or even not render parts of the layout. With CSS alone you can resize parts of the app or hide them visually, but they still render.
+* The MediaQuery component is not designed as a full replacement for responsive design, layout and CSS. You should use them to create your responsive application layouts like with any other web application.
 
 ## Next Steps