910110: Update the column section in Multi column documentation.

blazor-toc.html

@@ -3417,7 +3417,9 @@
 			<li>
 				<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
 			</li>
+			<li> <a href="/blazor/multicolumn-combobox/column">Columns</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/column/column-checkbox.razor

@@ -0,0 +1,35 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="Name" Width="200px"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Price" Width="200px"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="IsAvailable" Width="200px" DisplayAsCheckBox="true"></MultiColumnComboboxColumn>
+    </MultiColumnComboboxColumns>
+</SfMultiColumnComboBox>
+
+@code {
+    public class Product
+    {
+        public string Name { get; set; }
+        public decimal Price { get; set; }
+        public bool IsAvailable { get; set; }  // Changed to Boolean
+        public string Category { get; set; }
+        public double Rating { get; set; }
+    }
+
+    private List<Product> Products = new List<Product>();
+    private string Value { get; set; } = "Smartphone";
+
+    protected override Task OnInitializedAsync()
+    {
+        Products = new List<Product>
+        {
+            new Product { Name = "Laptop", Price = 999.99m, IsAvailable = true, Category = "Electronics", Rating = 4.5 },
+            new Product { Name = "Smartphone", Price = 599.99m, IsAvailable = false, Category = "Electronics", Rating = 4.3 },
+            new Product { Name = "Tablet", Price = 299.99m, IsAvailable = true, Category = "Electronics", Rating = 4.2 },
+            new Product { Name = "Headphones", Price = 49.99m, IsAvailable = true, Category = "Accessories", Rating = 4.0 }
+        };
+        return base.OnInitializedAsync();
+    }
+}

blazor/multicolumn-combobox/code-snippet/column/column-custom-attributes.razor

@@ -0,0 +1,42 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Price" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Availability" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
+    </MultiColumnComboboxColumns>
+</SfMultiColumnComboBox>
+
+<style>
+    .e-multicolumn-grid .e-rowcell.customcss {
+        background-color: rgb(43, 205, 226);
+        color: black;
+    }
+</style>
+
+@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 List<Product> Products = new List<Product>();
+    private string Value { get; set; } = "Smartphone";
+
+    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 }
+        };
+        return base.OnInitializedAsync();
+    }
+}

blazor/multicolumn-combobox/code-snippet/column/column-header.razor

@@ -0,0 +1,180 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="650px"
+                       @bind-Value="@Value" DataSource="@Employees" ValueField="Name"
+                       TextField="Name" Placeholder="Select an employee" Width="250px">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="EmployeeID" Width="80px">
+            <Template>
+                @{
+                    var EmployeeInfo = (context as Employee);
+                    <div class="image">
+                        <img src="./images/employees/@EmployeeInfo.EmployeeID" alt="@EmployeeInfo.EmployeeID" />
+                    </div>
+                }
+            </Template>
+            <HeaderTemplate>
+                <div>
+                    <span class="e-icon-userlogin e-icons employee"></span> Photo
+                </div>
+            </HeaderTemplate>
+        </MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Name" Width="120px">
+            <Template>
+                @{
+                    var EmployeeInfo = (context as Employee);
+                    <div class="ename"> @EmployeeInfo.Name </div>
+                    <div class="job"> @EmployeeInfo.Role </div>
+                }
+            </Template>
+        </MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Department" Width="80px" />
+        <MultiColumnComboboxColumn Field="Experience" Width="80px" />
+        <MultiColumnComboboxColumn Field="Location" Width="80px" />
+    </MultiColumnComboboxColumns>
+</SfMultiColumnComboBox>
+
+@code {
+    public class Employee
+    {
+        public string Name { get; set; }
+        public string Department { get; set; }
+        public string Role { get; set; }
+        public string Location { get; set; }
+        public int Experience { get; set; }
+        public int EmployeeID { get; set; }
+    }
+
+    private string Value { get; set; } = "Alice Johnson";
+
+    private List<Employee> Employees = new List<Employee>();
+
+    protected override Task OnInitializedAsync()
+    {
+        Employees = new List<Employee>
+        {
+            new Employee
+            {
+                Name = "Alice Johnson",
+                Department = "Engineering",
+                Role = "Software Engineer",
+                Location = "New York",
+                Experience = 5,
+                EmployeeID = 1
+            },
+            new Employee
+            {
+                Name = "Bob Smith",
+                Department = "Marketing",
+                Role = "Marketing Manager",
+                Location = "San Francisco",
+                Experience = 7,
+                EmployeeID = 7
+            },
+            new Employee
+            {
+                Name = "Catherine Lee",
+                Department = "Finance",
+                Role = "Financial Analyst",
+                Location = "Chicago",
+                Experience = 4,
+                EmployeeID = 3
+            },
+            new Employee
+            {
+                Name = "David Kim",
+                Department = "Engineering",
+                Role = "DevOps Engineer",
+                Location = "Austin",
+                Experience = 6,
+                EmployeeID = 8
+            },
+            new Employee
+            {
+                Name = "Eva Brown",
+                Department = "Sales",
+                Role = "Sales Executive",
+                Location = "Boston",
+                Experience = 3,
+                EmployeeID = 5
+            },
+            new Employee
+            {
+                Name = "Frank White",
+                Department = "Human Resources",
+                Role = "HR Manager",
+                Location = "Seattle",
+                Experience = 8,
+                EmployeeID = 9
+            },
+            new Employee
+            {
+                Name = "Grace Green",
+                Department = "Design",
+                Role = "UX Designer",
+                Location = "Los Angeles",
+                Experience = 5,
+                EmployeeID = 2
+            },
+            new Employee
+            {
+                Name = "Hank Wilson",
+                Department = "Engineering",
+                Role = "Product Manager",
+                Location = "Denver",
+                Experience = 24,
+                EmployeeID = 10
+            }
+        };
+
+        return base.OnInitializedAsync();
+    }
+}
+
+<style>
+
+    .control-wrapper {
+        max-width: 250px;
+        padding: 30px 0px 0px;
+        margin: 0 auto;
+    }
+
+    .example-label {
+        font-size: 14px;
+        margin-bottom: 6px;
+    }
+
+    @@font-face {
+        font-family: 'ej2-headertemplate';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    .e-grid .e-icon-userlogin::before, .e-grid .e-icon-calender::before {
+        font-family: 'ej2-headertemplate';
+        width: 15px !important;
+    }
+
+    .e-grid .e-icon-userlogin::before {
+        content: '\e702';
+    }
+
+    .e-grid .e-icon-calender::before {
+        content: '\e960';
+    }
+
+    .e-multicolumn-list .ename {
+        display: block !important;
+        opacity: .87;
+        font-size: 16px;
+        margin-top: 8px;
+    }
+
+    .e-multicolumn-list .job {
+        opacity: .54;
+        font-size: 14px;
+        margin-top: 15px;
+        margin-bottom: 7px;
+    }
+</style>

blazor/multicolumn-combobox/code-snippet/column/column-text-align.razor

@@ -0,0 +1,33 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+    <MultiColumnComboboxColumns>
+        <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+        <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+    </MultiColumnComboboxColumns>
+</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 List<Product> Products = new List<Product>();
+    private string Value { get; set; } = "Smartphone";
+    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 }
+        };
+        return base.OnInitializedAsync();
+    }
+}

blazor/multicolumn-combobox/column.md

@@ -0,0 +1,72 @@
+---
+layout: post
+title: Columns in Syncfusion Blazor MultiColumn ComboBox
+description: Checkout and learn here all about columns in the Syncfusion Blazor MultiColumn ComboBox component and much more details.
+platform: Blazor
+control: MultiColumn ComboBox
+documentation: ug
+---
+
+# Configuring the Columns
+
+## Setting the Text Align
+
+The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Width) for optimal display, and set the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_TextAlign) (left, center, or right) to enhance readability.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/column/column-text-align.razor %}
+
+{% endhighlight %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthptYsEgssKVDPs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with Data Binding](./images/blazor-multicolumncombobox-columns.png)" %}
+
+## Setting the Template
+
+The MultiColumn ComboBox supports [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Template) within the column, allowing you to define a column template that renders a customized element in each cell.
+
+## Header template
+
+The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_HeaderTemplate) of the MultiColumn ComboBox component used to customize the header element of a MultiColumn. With this property, you can render custom HTML elements or Blazor components to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering.
+
+In the following sample, defines how to use `Template` and `HeaderTemplate`.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/column/column-header.razor %}
+
+{% endhighlight %}
+
+## Setting Display As CheckBox 
+
+The MultiColumn ComboBox component allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_DisplayAsCheckBox)  property. This property is useful when you have a boolean column in your MultiColumn ComboBox and you want to display the values as checkboxes instead of the default text representation of **true** or **false**.
+
+To enable the rendering of boolean values as checkboxes, you need to set the `DisplayAsCheckBox` property to **true**.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/column/column-checkbox.razor %}
+
+{% endhighlight %}
+
+## Setting custom attributes
+
+You can customize the appearance of the column headers in MultiColumn ComboBox using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_CustomAttributes) property.
+
+You can set the **CustomAttributes** property of the desired column to an object that contains the CSS class custom css. This CSS class will be applied to the header cell of the specified rows in the Multicolumn.
+
+```cshtml
+<MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
+```
+
+The following example demonstrates how to customize the appearance of the Multicolumn Combobox columns using custom attributes.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/column/column-custom-attributes.razor %}
+
+{% endhighlight %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLqCMNiLfcCJPPZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+

blazor/multicolumn-combobox/value-binding.md

@@ -78,7 +78,7 @@ The following example illustrates the use of `string` as the TValue. Therefore,
 
 The `TItem` property can be modified dynamically by specifying the datasource type of the MultiColumn ComboBox component using the `@typeparam` directive. The sample demonstration below illustrates how to dynamically change the `TItem` with various types of datasources.
 
-### Creating generic combobox component
+### Creating generic MultiColumn Combobox component
 
 First, create a `MultiColumnComboBox.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `<TItem>` and `TValue`.