Skip to content

Commit ac9bec9

Browse files
910110: Update the column section in Multi column documentation.
1 parent 9a3138e commit ac9bec9

File tree

18 files changed

+364
-1
lines changed

18 files changed

+364
-1
lines changed

blazor-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3417,6 +3417,7 @@
34173417
<li>
34183418
<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
34193419
</li>
3420+
<li> <a href="/blazor/multicolumn-combobox/column">Columns</a></li>
34203421
<li>
34213422
<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
34223423
</li>
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
4+
<MultiColumnComboboxColumns>
5+
<MultiColumnComboboxColumn Field="Name" Width="200px"></MultiColumnComboboxColumn>
6+
<MultiColumnComboboxColumn Field="Price" Width="200px"></MultiColumnComboboxColumn>
7+
<MultiColumnComboboxColumn Field="IsAvailable" Width="200px" DisplayAsCheckBox="true"></MultiColumnComboboxColumn>
8+
</MultiColumnComboboxColumns>
9+
</SfMultiColumnComboBox>
10+
11+
@code {
12+
public class Product
13+
{
14+
public string Name { get; set; }
15+
public decimal Price { get; set; }
16+
public bool IsAvailable { get; set; } // Changed to Boolean
17+
public string Category { get; set; }
18+
public double Rating { get; set; }
19+
}
20+
21+
private List<Product> Products = new List<Product>();
22+
private string Value { get; set; } = "Smartphone";
23+
24+
protected override Task OnInitializedAsync()
25+
{
26+
Products = new List<Product>
27+
{
28+
new Product { Name = "Laptop", Price = 999.99m, IsAvailable = true, Category = "Electronics", Rating = 4.5 },
29+
new Product { Name = "Smartphone", Price = 599.99m, IsAvailable = false, Category = "Electronics", Rating = 4.3 },
30+
new Product { Name = "Tablet", Price = 299.99m, IsAvailable = true, Category = "Electronics", Rating = 4.2 },
31+
new Product { Name = "Headphones", Price = 49.99m, IsAvailable = true, Category = "Accessories", Rating = 4.0 }
32+
};
33+
return base.OnInitializedAsync();
34+
}
35+
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
4+
<MultiColumnComboboxColumns>
5+
<MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
6+
<MultiColumnComboboxColumn Field="Price" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
7+
<MultiColumnComboboxColumn Field="Availability" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
8+
</MultiColumnComboboxColumns>
9+
</SfMultiColumnComboBox>
10+
11+
<style>
12+
.e-multicolumn-grid .e-rowcell.customcss {
13+
background-color: rgb(43, 205, 226);
14+
color: black;
15+
}
16+
</style>
17+
18+
@code {
19+
public class Product
20+
{
21+
public string Name { get; set; }
22+
public decimal Price { get; set; }
23+
public string Availability { get; set; }
24+
public string Category { get; set; }
25+
public double Rating { get; set; }
26+
}
27+
28+
private List<Product> Products = new List<Product>();
29+
private string Value { get; set; } = "Smartphone";
30+
31+
protected override Task OnInitializedAsync()
32+
{
33+
Products = new List<Product>
34+
{
35+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
36+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
37+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
38+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
39+
};
40+
return base.OnInitializedAsync();
41+
}
42+
}
Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox TItem="Employee" TValue="string" AllowFiltering="true" PopupWidth="650px"
4+
@bind-Value="@Value" DataSource="@Employees" ValueField="Name"
5+
TextField="Name" Placeholder="Select an employee" Width="250px">
6+
<MultiColumnComboboxColumns>
7+
<MultiColumnComboboxColumn Field="EmployeeID" Width="80px">
8+
<Template>
9+
@{
10+
var EmployeeInfo = (context as Employee);
11+
<div class="image">
12+
<img src="./images/employees/@EmployeeInfo.EmployeeID" alt="@EmployeeInfo.EmployeeID" />
13+
</div>
14+
}
15+
</Template>
16+
<HeaderTemplate>
17+
<div>
18+
<span class="e-icon-userlogin e-icons employee"></span> Photo
19+
</div>
20+
</HeaderTemplate>
21+
</MultiColumnComboboxColumn>
22+
<MultiColumnComboboxColumn Field="Name" Width="120px">
23+
<Template>
24+
@{
25+
var EmployeeInfo = (context as Employee);
26+
<div class="ename"> @EmployeeInfo.Name </div>
27+
<div class="job"> @EmployeeInfo.Role </div>
28+
}
29+
</Template>
30+
</MultiColumnComboboxColumn>
31+
<MultiColumnComboboxColumn Field="Department" Width="80px" />
32+
<MultiColumnComboboxColumn Field="Experience" Width="80px" />
33+
<MultiColumnComboboxColumn Field="Location" Width="80px" />
34+
</MultiColumnComboboxColumns>
35+
</SfMultiColumnComboBox>
36+
37+
@code {
38+
public class Employee
39+
{
40+
public string Name { get; set; }
41+
public string Department { get; set; }
42+
public string Role { get; set; }
43+
public string Location { get; set; }
44+
public int Experience { get; set; }
45+
public int EmployeeID { get; set; }
46+
}
47+
48+
private string Value { get; set; } = "Alice Johnson";
49+
50+
private List<Employee> Employees = new List<Employee>();
51+
52+
protected override Task OnInitializedAsync()
53+
{
54+
Employees = new List<Employee>
55+
{
56+
new Employee
57+
{
58+
Name = "Alice Johnson",
59+
Department = "Engineering",
60+
Role = "Software Engineer",
61+
Location = "New York",
62+
Experience = 5,
63+
EmployeeID = 1
64+
},
65+
new Employee
66+
{
67+
Name = "Bob Smith",
68+
Department = "Marketing",
69+
Role = "Marketing Manager",
70+
Location = "San Francisco",
71+
Experience = 7,
72+
EmployeeID = 7
73+
},
74+
new Employee
75+
{
76+
Name = "Catherine Lee",
77+
Department = "Finance",
78+
Role = "Financial Analyst",
79+
Location = "Chicago",
80+
Experience = 4,
81+
EmployeeID = 3
82+
},
83+
new Employee
84+
{
85+
Name = "David Kim",
86+
Department = "Engineering",
87+
Role = "DevOps Engineer",
88+
Location = "Austin",
89+
Experience = 6,
90+
EmployeeID = 8
91+
},
92+
new Employee
93+
{
94+
Name = "Eva Brown",
95+
Department = "Sales",
96+
Role = "Sales Executive",
97+
Location = "Boston",
98+
Experience = 3,
99+
EmployeeID = 5
100+
},
101+
new Employee
102+
{
103+
Name = "Frank White",
104+
Department = "Human Resources",
105+
Role = "HR Manager",
106+
Location = "Seattle",
107+
Experience = 8,
108+
EmployeeID = 9
109+
},
110+
new Employee
111+
{
112+
Name = "Grace Green",
113+
Department = "Design",
114+
Role = "UX Designer",
115+
Location = "Los Angeles",
116+
Experience = 5,
117+
EmployeeID = 2
118+
},
119+
new Employee
120+
{
121+
Name = "Hank Wilson",
122+
Department = "Engineering",
123+
Role = "Product Manager",
124+
Location = "Denver",
125+
Experience = 24,
126+
EmployeeID = 10
127+
}
128+
};
129+
130+
return base.OnInitializedAsync();
131+
}
132+
}
133+
134+
<style>
135+
136+
.control-wrapper {
137+
max-width: 250px;
138+
padding: 30px 0px 0px;
139+
margin: 0 auto;
140+
}
141+
142+
.example-label {
143+
font-size: 14px;
144+
margin-bottom: 6px;
145+
}
146+
147+
@@font-face {
148+
font-family: 'ej2-headertemplate';
149+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
150+
font-weight: normal;
151+
font-style: normal;
152+
}
153+
154+
.e-grid .e-icon-userlogin::before, .e-grid .e-icon-calender::before {
155+
font-family: 'ej2-headertemplate';
156+
width: 15px !important;
157+
}
158+
159+
.e-grid .e-icon-userlogin::before {
160+
content: '\e702';
161+
}
162+
163+
.e-grid .e-icon-calender::before {
164+
content: '\e960';
165+
}
166+
167+
.e-multicolumn-list .ename {
168+
display: block !important;
169+
opacity: .87;
170+
font-size: 16px;
171+
margin-top: 8px;
172+
}
173+
174+
.e-multicolumn-list .job {
175+
opacity: .54;
176+
font-size: 14px;
177+
margin-top: 15px;
178+
margin-bottom: 7px;
179+
}
180+
</style>
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
4+
<MultiColumnComboboxColumns>
5+
<MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
6+
<MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
7+
<MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
8+
</MultiColumnComboboxColumns>
9+
</SfMultiColumnComboBox>
10+
11+
@code {
12+
public class Product
13+
{
14+
public string Name { get; set; }
15+
public decimal Price { get; set; }
16+
public string Availability { get; set; }
17+
public string Category { get; set; }
18+
public double Rating { get; set; }
19+
}
20+
private List<Product> Products = new List<Product>();
21+
private string Value { get; set; } = "Smartphone";
22+
protected override Task OnInitializedAsync()
23+
{
24+
Products = new List<Product>
25+
{
26+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
27+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
28+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
29+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
30+
};
31+
return base.OnInitializedAsync();
32+
}
33+
}
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
layout: post
3+
title: Columns in Syncfusion Blazor MultiColumn ComboBox
4+
description: Checkout and learn here all about columns in the Syncfusion Blazor MultiColumn ComboBox component and much more details.
5+
platform: Blazor
6+
control: MultiColumn ComboBox
7+
documentation: ug
8+
---
9+
10+
# Configuring the Columns
11+
12+
## Setting the Text Align
13+
14+
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.
15+
16+
{% highlight cshtml %}
17+
18+
{% include_relative code-snippet/column/column-text-align.razor %}
19+
20+
{% endhighlight %}
21+
22+
{% 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)" %}
23+
24+
## Setting the Template
25+
26+
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.
27+
28+
## Header template
29+
30+
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.
31+
32+
In the following sample, defines how to use `Template` and `HeaderTemplate`.
33+
34+
{% highlight cshtml %}
35+
36+
{% include_relative code-snippet/column/column-header.razor %}
37+
38+
{% endhighlight %}
39+
40+
## Setting Display As CheckBox
41+
42+
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**.
43+
44+
To enable the rendering of boolean values as checkboxes, you need to set the `DisplayAsCheckBox` property to **true**.
45+
46+
{% highlight cshtml %}
47+
48+
{% include_relative code-snippet/column/column-checkbox.razor %}
49+
50+
{% endhighlight %}
51+
52+
## Setting custom attributes
53+
54+
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.
55+
56+
You can set the **CustomAttributes** property of the desired column to an object that contains the CSS class **customcss**. This CSS class will be applied to the header cell of the specified rows in the Multicolumn.
57+
58+
```cshtml
59+
<MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
60+
```
61+
62+
The following example demonstrates how to customize the appearance of the Multicolumn Combobox columns using custom attributes.
63+
64+
{% highlight cshtml %}
65+
66+
{% include_relative code-snippet/column/column-custom-attributes.razor %}
67+
68+
{% endhighlight %}
69+
70+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLqCMNiLfcCJPPZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
71+
72+
7.48 KB
Loading
7 KB
Loading
7.11 KB
Loading
7.51 KB
Loading

0 commit comments

Comments
 (0)