Merge pull request #4919 from syncfusion-content/BLAZ-910110-GroupingH1

910110: Update the grouping section in Multi column documentation.

Author: PrinceOliver

blazor-toc.html

@@ -3417,6 +3417,7 @@
 			<li>
 				<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
 			</li>
+			<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
 			<li>
 				<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
 			</li>

blazor/multicolumn-combobox/code-snippet/grouping/grouping.razor

@@ -0,0 +1,48 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" Placeholder="Select any product" GroupByField="Category">
+</SfMultiColumnComboBox>
+
+@code {
+
+    public class Product
+    {
+        public string Name { get; set; }
+        public decimal Price { get; set; }
+        public string Availability { get; set; }
+        public string Category { get; set; }
+        public double Rating { get; set; }
+    }
+
+    private string Value { get; set; } = "Smartphone";
+
+    private List<Product> Products = new List<Product>();
+
+    protected override Task OnInitializedAsync()
+    {
+        Products = new List<Product>
+        {
+            new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
+            new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
+            new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
+            new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
+            new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
+            new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
+            new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
+            new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },
+            new Product { Name = "Printer", Price = 89.99m, Availability = "In Stock", Category = "Office Supplies", Rating = 4.2 },
+            new Product { Name = "Camera", Price = 499.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
+            new Product { Name = "Speakers", Price = 149.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.5 },
+            new Product { Name = "Router", Price = 79.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.4 },
+            new Product { Name = "External Hard Drive", Price = 59.99m, Availability = "In Stock", Category = "Storage", Rating = 4.6 },
+            new Product { Name = "USB Flash Drive", Price = 9.99m, Availability = "In Stock", Category = "Storage", Rating = 4.2 },
+            new Product { Name = "Webcam", Price = 29.99m, Availability = "Limited Stock", Category = "Accessories", Rating = 4.1 },
+            new Product { Name = "Smart TV", Price = 799.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.8 },
+            new Product { Name = "Projector", Price = 299.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.5 },
+            new Product { Name = "VR Headset", Price = 349.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
+            new Product { Name = "Drone", Price = 599.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
+            new Product { Name = "Fitness Tracker", Price = 99.99m, Availability = "In Stock", Category = "Wearables", Rating = 4.3 }
+        };
+        return base.OnInitializedAsync();
+    }
+}

blazor/multicolumn-combobox/grouping.md

@@ -0,0 +1,23 @@
+---
+layout: post
+title: Grouping in Syncfusion Blazor MultiColumn ComboBox
+description: Checkout and learn here all about grouping support in Syncfusion Blazor MultiColumn ComboBox component, it's elements and more.
+platform: Blazor
+control: MultiColumn ComboBox
+documentation: ug
+---
+
+# Grouping in Blazor MultiColumn ComboBox Component
+
+The MultiColumn ComboBox supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [GroupByField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GroupByField) field in the data table. 
+
+In the following sample, the product names are grouped according to their category using the [GroupByField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GroupByField) field.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/grouping/grouping.razor %}
+
+{% endhighlight %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrAsLhwUmUFCjYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+