Class MultiColumnComboboxColumn
Represents a single column within a MultiColumnCombobox component. Defines the properties and behavior of a column, such as its header text, data field, and display format.
Inheritance
Namespace: Syncfusion.Blazor.MultiColumnComboBox
Assembly: Syncfusion.Blazor.dll
Syntax
public class MultiColumnComboboxColumn : OwningComponentBase
Examples
A simple MultiColumnCombobox with customized columns.
<SfMultiColumnComboBox TValue="string" TItem="Employee"
DataSource="@employees"
TextField="Name"
ValueField="ID">
<MultiColumnComboboxColumns>
<MultiColumnComboboxColumn Field="ID" Header="Employee ID" Width="100px" TextAlign="TextAlign.Center">
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Name" Header="Employee Name" Width="150px">
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Department" Header="Department" Width="120px">
</MultiColumnComboboxColumn>
</MultiColumnComboboxColumns>
</SfMultiColumnComboBox>
Constructors
MultiColumnComboboxColumn()
Declaration
public MultiColumnComboboxColumn()
Properties
CustomAttributes
Allows customization of the CSS styles and attributes of the content cells for this column.
Declaration
public IDictionary<string, object> CustomAttributes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IDictionary<System.String, System.Object> | An System.Collections.Generic.IDictionary<, > of |
Remarks
This property accepts a dictionary of attribute names and their corresponding values, allowing you to apply custom CSS classes, styles, or other HTML attributes to the column cells.
Examples
Applying custom attributes to column cells.
<MultiColumnComboboxColumn Field="Name" Header="Name" CustomAttributes="@(new Dictionary<string, object> { {"class", "custom-cell"}, {"style", "font-weight: bold;"} })">
</MultiColumnComboboxColumn>
DisplayAsCheckBox
Gets or sets a value indicating whether the column value should be displayed as a checkbox.
Declaration
public bool DisplayAsCheckBox { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | A |
Remarks
When set to true
, the column value is rendered as a checkbox instead of a boolean value. This is typically used for boolean data fields.
Examples
Displaying a boolean column as a checkbox.
<MultiColumnComboboxColumn Field="IsActive" Header="Active" DisplayAsCheckBox="true">
</MultiColumnComboboxColumn>
Field
Defines the field name of the column, which is mapped to the corresponding field in the DataSource.
Declaration
public string Field { get; set; }
Property Value
Type | Description |
---|---|
System.String | A |
Remarks
The bound columns can be used for various operations such as sorting, filtering, and grouping. If the field name contains a dot (.), it is considered complex binding, which is typically used for accessing nested properties.
Examples
Setting the Field property for a column.
<MultiColumnComboboxColumn Field="Employee.Name" Header="Employee Name">
</MultiColumnComboboxColumn>
Format
Defines the format of the column's displayed value without affecting the original data.
Declaration
public string Format { get; set; }
Property Value
Type | Description |
---|---|
System.String | A |
Remarks
The format can be a standard or custom format string. This is particularly useful for formatting dates, numbers, or currency values.
Examples
Formatting date and currency columns.
<MultiColumnComboboxColumn Field="HireDate" Header="Hire Date" Format="MM/dd/yyyy">
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Salary" Header="Salary" Format="C2">
</MultiColumnComboboxColumn>
Header
Defines the header text of the column, which is displayed in the column header.
Declaration
public string Header { get; set; }
Property Value
Type | Description |
---|---|
System.String | A |
Remarks
If the header text is not defined, the value of the Field property will be used as the header text.
Examples
Setting a custom header text for a column.
<MultiColumnComboboxColumn Field="EmpName" Header="Employee Name">
</MultiColumnComboboxColumn>
HeaderTemplate
Defines the header template that renders a customized element in the header cell of the column.
Declaration
public RenderFragment<object> HeaderTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | A Microsoft.AspNetCore.Components.RenderFragment<> of type |
Remarks
This template allows you to customize the content of the column header, such as adding icons, sorting indicators, or other visual elements.
Examples
Using a custom header template with an icon.
<MultiColumnComboboxColumn Field="Name" Header="Employee Name">
<HeaderTemplate>
<div>
<i class="fas fa-user"></i>
Employee Name
</div>
</HeaderTemplate>
</MultiColumnComboboxColumn>
Parent
Specifies the base parent of the component.
Declaration
protected MultiColumnComboboxColumns Parent { get; set; }
Property Value
Type |
---|
MultiColumnComboboxColumns |
Template
Defines the column template that renders a customized element in each cell of the column.
Declaration
public RenderFragment<object> Template { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | A Microsoft.AspNetCore.Components.RenderFragment<> of type |
Remarks
The parameters passed to the templates can be accessed using the implicit parameter named context
.
The context is of type object
and contains the data item for the current row.
Examples
Using a custom template to display data.
<MultiColumnComboboxColumn Field="Status" Header="Status">
<Template>
@{
var employee = context as Employee;
}
<span style="color: @(employee.Status == "Active" ? "green" : "red")">
@employee.Status
</span>
</Template>
</MultiColumnComboboxColumn>
TextAlign
Defines the alignment of the text in both the header and content cells of the column.
Declaration
public TextAlign TextAlign { get; set; }
Property Value
Type | Description |
---|---|
TextAlign | A TextAlign enumeration value that specifies the text alignment. The default value is |
Remarks
The possible values are:
- LeftText is aligned to the left.
- RightText is aligned to the right.
- CenterText is centered.
- JustifyText is justified.
Examples
Setting text alignment for different columns.
<MultiColumnComboboxColumn Field="ID" Header="ID" TextAlign="TextAlign.Center">
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Amount" Header="Amount" TextAlign="TextAlign.Right">
</MultiColumnComboboxColumn>
TextOverflowMode
Gets or sets a value that defines how the text content is clipped when it overflows in the MultiColumnComboBox column.
Declaration
public TextOverflowMode TextOverflowMode { get; set; }
Property Value
Type | Description |
---|---|
TextOverflowMode | A TextOverflowMode value that specifies the clipping behavior. The default value is |
Remarks
The TextOverflowMode property controls how text is truncated when it overflows the available space. The following options are available:
Examples
Setting text overflow behavior for a column.
<MultiColumnComboboxColumn Field="Description" Header="Description" TextOverflowMode="TextOverflowMode.EllipsisWithTooltip">
</MultiColumnComboboxColumn>
Width
Defines the width of the column in pixels or as a percentage.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | A |
Remarks
You can specify the width in pixels (e.g., "100px") or as a percentage (e.g., "25%"). If not specified, the column will automatically adjust its width based on the content.
Examples
Setting column width in pixels and percentage.
<MultiColumnComboboxColumn Field="ID" Header="ID" Width="80px">
</MultiColumnComboboxColumn>
<MultiColumnComboboxColumn Field="Name" Header="Name" Width="30%">
</MultiColumnComboboxColumn>