diff --git a/blazor-toc.html b/blazor-toc.html index 13a110f769..aec4a42904 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3417,7 +3417,9 @@
  • Data Binding
    • +
  • Columns
  • Grouping
    • +
  • Placeholder and Floatlabel
    • diff --git a/blazor/multicolumn-combobox/code-snippet/column/column-checkbox.razor b/blazor/multicolumn-combobox/code-snippet/column/column-checkbox.razor new file mode 100644 index 0000000000..c9c2d64fe7 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/column/column-checkbox.razor @@ -0,0 +1,35 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + + + + + + + + +@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 Products = new List(); + private string Value { get; set; } = "Smartphone"; + + protected override Task OnInitializedAsync() + { + Products = new List + { + 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(); + } +} diff --git a/blazor/multicolumn-combobox/code-snippet/column/column-custom-attributes.razor b/blazor/multicolumn-combobox/code-snippet/column/column-custom-attributes.razor new file mode 100644 index 0000000000..cd2289d74c --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/column/column-custom-attributes.razor @@ -0,0 +1,42 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + + + + + + + + + + +@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 Products = new List(); + private string Value { get; set; } = "Smartphone"; + + protected override Task OnInitializedAsync() + { + Products = new List + { + 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(); + } +} diff --git a/blazor/multicolumn-combobox/code-snippet/column/column-header.razor b/blazor/multicolumn-combobox/code-snippet/column/column-header.razor new file mode 100644 index 0000000000..2dafd18783 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/column/column-header.razor @@ -0,0 +1,180 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + + + + + +
    + Photo +
    +     +     + + + + + + +     +     + +@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 Employees = new List(); + + protected override Task OnInitializedAsync() + { + Employees = new List + { + 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(); + } +} + + \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/column/column-text-align.razor b/blazor/multicolumn-combobox/code-snippet/column/column-text-align.razor new file mode 100644 index 0000000000..23146e15d6 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/column/column-text-align.razor @@ -0,0 +1,33 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + + + + + + + + +@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 Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + 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(); + } +} diff --git a/blazor/multicolumn-combobox/column.md b/blazor/multicolumn-combobox/column.md new file mode 100644 index 0000000000..710a47f522 --- /dev/null +++ b/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 + +``` + +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" %} + + diff --git a/blazor/multicolumn-combobox/images/employees/1.png b/blazor/multicolumn-combobox/images/employees/1.png new file mode 100644 index 0000000000..fc09717727 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/1.png differ diff --git a/blazor/multicolumn-combobox/images/employees/10.png b/blazor/multicolumn-combobox/images/employees/10.png new file mode 100644 index 0000000000..f916ad5112 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/10.png differ diff --git a/blazor/multicolumn-combobox/images/employees/2.png b/blazor/multicolumn-combobox/images/employees/2.png new file mode 100644 index 0000000000..1f80224481 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/2.png differ diff --git a/blazor/multicolumn-combobox/images/employees/3.png b/blazor/multicolumn-combobox/images/employees/3.png new file mode 100644 index 0000000000..2b3742864b Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/3.png differ diff --git a/blazor/multicolumn-combobox/images/employees/4.png b/blazor/multicolumn-combobox/images/employees/4.png new file mode 100644 index 0000000000..3c34d5d82a Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/4.png differ diff --git a/blazor/multicolumn-combobox/images/employees/5.png b/blazor/multicolumn-combobox/images/employees/5.png new file mode 100644 index 0000000000..7b501e961a Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/5.png differ diff --git a/blazor/multicolumn-combobox/images/employees/6.png b/blazor/multicolumn-combobox/images/employees/6.png new file mode 100644 index 0000000000..3bff83e86a Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/6.png differ diff --git a/blazor/multicolumn-combobox/images/employees/7.png b/blazor/multicolumn-combobox/images/employees/7.png new file mode 100644 index 0000000000..6519f17b06 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/7.png differ diff --git a/blazor/multicolumn-combobox/images/employees/8.png b/blazor/multicolumn-combobox/images/employees/8.png new file mode 100644 index 0000000000..0c44939617 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/8.png differ diff --git a/blazor/multicolumn-combobox/images/employees/9.png b/blazor/multicolumn-combobox/images/employees/9.png new file mode 100644 index 0000000000..108cd57ca6 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/9.png differ diff --git a/blazor/multicolumn-combobox/images/employees/dp.png b/blazor/multicolumn-combobox/images/employees/dp.png new file mode 100644 index 0000000000..362cf31596 Binary files /dev/null and b/blazor/multicolumn-combobox/images/employees/dp.png differ diff --git a/blazor/multicolumn-combobox/value-binding.md b/blazor/multicolumn-combobox/value-binding.md index 9e339f9db9..df0914b09b 100644 --- a/blazor/multicolumn-combobox/value-binding.md +++ b/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 `` and `TValue`.