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

System.Object

MultiColumnComboboxColumn

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 `string` keys and `object` values representing custom attributes. The default value is `null`.

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 `bool` value indicating whether to display the column as a checkbox. The default value is `false`.

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 `string` representing the field name from the data source. The default value is `null`.

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 `string` representing the format pattern. The default value is `null`.

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 `string` representing the header text. The default value is `null`.

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 `object` that represents the custom template for the column header. The default value is `null`.

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 `object` that represents the custom template for the column cells. The default value is `null`.

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 `TextAlign.Left`.

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 `TextOverflowMode.Ellipsis`.

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 `string` representing the column width. The default value is `null`, meaning that the column will have an automatic width based on its content.

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>