Class SfMultiColumnComboBox<TValue, TItem>

The MultiColumnComboBox component provides a rich user interface for selecting items from a data source with multiple columns displayed in a grid format. It supports features like filtering, paging, custom templates, and keyboard navigation.

Inheritance
System.Object
SfBaseComponent
SfDataBoundComponent
SfMultiColumnComboBox<TValue, TItem>
Inherited Members
Namespace: Syncfusion.Blazor.MultiColumnComboBox
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfMultiColumnComboBox<TValue, TItem> : SfDataBoundComponent, IMultiColumnComboBox, IInputBase
Type Parameters
Name Description
TValue

Specifies the type of value that the MultiColumnComboBox can bind to.
TItem

Specifies the type of data items in the MultiColumnComboBox data source.
Remarks

The MultiColumnComboBox component extends the functionality of a standard dropdown by displaying data in a tabular format with multiple columns. This allows users to view and select items based on multiple data fields simultaneously. The component supports various advanced features including filtering, paging, grouping, custom value handling, and extensive customization options through templates and styling.

Examples

A basic MultiColumnComboBox with multiple columns.

<SfMultiColumnComboBox TValue="int" TItem="Employee" 
                       DataSource="@employees" 
                       ValueField="EmployeeId" 
                       TextField="EmployeeName">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="EmployeeId" Header="ID" Width="120"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="EmployeeName" Header="Name" Width="150"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="Department" Header="Department" Width="120"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</SfMultiColumnComboBox>

The following example demonstrates how to use the SfMultiColumnComboBox<TValue, TItem> component:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ValueField="ProductID" TextField="ProductName" @bind-Value="selectedValue">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="ProductID" Header="Product ID" Width="110"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name" Width="130"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="SupplierID" Header="Supplier ID" Width="90"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</SfMultiColumnComboBox>

@code {
    private int? selectedValue;
    private List<Product> ProductsList = new List<Product>();

    public class Product
    {
        public int? ProductID { get; set; }
        public string ProductName { get; set; }
        public int? SupplierID { get; set; }
    }
}

Constructors

SfMultiColumnComboBox()

Declaration
public SfMultiColumnComboBox()

Properties

ActionFailureTemplate

Gets or sets the template and assigns it to the popup list content of the SfMultiColumnComboBox<TValue, TItem> when the data fetch request from the remote server fails.

Declaration
public RenderFragment ActionFailureTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content as a Microsoft.AspNetCore.Components.RenderFragment. The default value is null.
Remarks

The ActionFailureTemplate property allows you to define custom content that will be displayed in the popup list when a data fetch operation from a remote server fails.

Examples

The following example demonstrates how to use the ActionFailureTemplate property to display a custom error message when the data fetch request fails:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList"> 
    <ActionFailureTemplate> 
        <div>An error occurred while fetching data. Please try again later.</div> 
    </ActionFailureTemplate> 
</SfMultiColumnComboBox{TValue, TItem}> 

@code { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        // Simulate data fetch failure 
        throw new Exception("Simulated data fetch error"); 
    } 

    private List<Product> ProductsList { get; set; } 
}

AllowColumnResizing

Gets or sets a value that indicates whether the user is allowed to resize the columns of the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public bool AllowColumnResizing { get; set; }
Property Value
Type Description
System.Boolean

A bool value that determines if column resizing is enabled. If true, columns can be resized by dragging the right edge of the column header. The default value is false.
Remarks

Resizing can be disabled for a particular column by setting its AllowColumnResizing property to false. In right-to-left (RTL) mode, SfMultiColumnComboBox<TValue, TItem> columns can be resized by clicking and dragging the left edge of the header cell.

Examples

The following example demonstrates how to enable column resizing:

 

<SfMultiColumnCombobox AllowColumnResizing="true"> 
    <!-- Allows users to resize columns by dragging the right edge of the header --> 
</SfMultiColumnCombobox>

AllowCustom

Gets or sets a value indicating whether custom values can be entered.

Declaration
public bool AllowCustom { get; set; }
Property Value
Type Description
System.Boolean

true if custom values are allowed; otherwise, false. The default value is true.
Remarks

When enabled, users can type values that are not present in the data source. Use the CustomValueUpdate event to handle custom value creation.

Examples

Restricting to predefined values only:

<SfMultiColumnComboBox TValue="string" TItem="Product" AllowCustom="false">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</SfMultiColumnComboBox>

AllowFiltering

Gets or sets a value indicating whether filtering is enabled when typing in the input field.

Declaration
public bool AllowFiltering { get; set; }
Property Value
Type Description
System.Boolean

true if filtering is enabled; otherwise, false. The default value is false.
Remarks

When enabled, the dropdown list is filtered based on the text typed in the input field. Use FilterType to specify the filter criteria and NoRecordsTemplate to customize the display when no matches are found.

Examples

Enabling filtering:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       AllowFiltering="true" FilterType="FilterType.Contains"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

AllowMultiSorting

Gets or sets a value indicating whether multiple column sorting is enabled.

Declaration
public bool AllowMultiSorting { get; set; }
Property Value
Type Description
System.Boolean

true if multiple column sorting is allowed; otherwise, false. The default value is false.
Remarks

Requires AllowSorting to be true. Users can sort by multiple columns by holding Ctrl/Cmd and clicking column headers.

Examples

Enabling multi-column sorting:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       AllowSorting="true" AllowMultiSorting="true"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="Category" Header="Category"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Price" Header="Price"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

AllowPaging

Gets or sets a value that indicates whether paging is enabled for the SfMultiColumnComboBox<TValue, TItem> component.

Declaration
public bool AllowPaging { get; set; }
Property Value
Type Description
System.Boolean

A bool value that determines if paging is enabled. If true, a pager is rendered at the footer of the SfMultiColumnComboBox<TValue, TItem>. The pager can be used to handle page navigation in the grid. The default value is false.
Remarks

Paging can be further configured using the PageSize and PageCount properties.

Examples

The following example demonstrates how to enable paging:

 

<SfMultiColumnCombobox AllowPaging="true" PageSize="10" PageCount="5"> 
    <!-- Enables paging with a page size of 10 items per page and 5 pages --> 
</SfMultiColumnCombobox>

AllowSorting

Gets or sets a value indicating whether column sorting is enabled.

Declaration
public bool AllowSorting { get; set; }
Property Value
Type Description
System.Boolean

true if sorting is allowed; otherwise, false. The default value is true.
Remarks

When enabled, users can click column headers to sort data in ascending or descending order. Sorting can be disabled for individual columns using the column's AllowSorting property.

Examples

Enabling column sorting:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       AllowSorting="true"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="Product ID"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

Blur

Gets or sets the event callback that will be invoked when the SfMultiColumnComboBox<TValue, TItem> loses focus.

Declaration
public EventCallback<object> Blur { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the SfMultiColumnComboBox<TValue, TItem> is blurred. The default value is null.
Remarks

Use this event to handle any logic that should occur when the component loses focus, such as validation, saving changes, or updating UI state.

Examples

The following example demonstrates how to handle the Blur event:

<SfMultiColumnCombobox Blur="HandleBlur">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleBlur(object e)
{
    // Example of handling blur event
    Console.WriteLine("SfMultiColumnCombobox has lost focus.");
}

Created

Gets or sets the event callback that will be invoked when the SfMultiColumnComboBox<TValue, TItem> component is created.

Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component is created. The default value is null.
Remarks

This event is triggered once the SfMultiColumnComboBox<TValue, TItem> component has been initialized and rendered for the first time. Use this event to perform initialization tasks or setup operations that need to occur after the component is created.

Examples

The following example demonstrates how to handle the Created event:

<SfMultiColumnCombobox Created="HandleCreated">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleCreated(object e)
{
    // Component has been created
    Console.WriteLine("MultiColumnComboBox component created successfully.");
}

CssClass

Gets or sets custom CSS classes to apply to the component.

Declaration
public string CssClass { get; set; }
Property Value
Type Description
System.String

A space-separated string of CSS class names. The default value is string.Empty.
Remarks

Use this property to apply custom styling to the component. Multiple classes can be specified by separating them with spaces. The classes are applied to the root element of the component.

Examples

Applying custom CSS classes:

<style>
    .custom-combobox .e-input-group {
        border: 2px solid #007bff;
        border-radius: 8px;
    }
</style>

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       CssClass="custom-combobox my-theme"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

CustomValueUpdate

Gets or sets the event callback that will be invoked when custom values (not present in the data source) are selected in the SfMultiColumnComboBox<TValue, TItem> component.

Declaration
public EventCallback<CustomValueUpdateEventArgs<TItem>> CustomValueUpdate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<CustomValueUpdateEventArgs<TItem>>

An Microsoft.AspNetCore.Components.EventCallback<> of type CustomValueUpdateEventArgs<TItem> that is triggered when setting the custom value. The default value is null.
Remarks

This event allows handling of custom values entered by the user, which are not available in the data source. It provides an opportunity to process or format the custom value before it is assigned to the SfMultiColumnComboBox<TValue, TItem>. Use this event when the AllowCustomValue property is enabled to handle user-defined values.

Examples

The following example demonstrates how to handle the CustomValueUpdate event:

<SfMultiColumnCombobox CustomValueUpdate="HandleCustomValueUpdate">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleCustomValueUpdate(CustomValueUpdateEventArgs<TItem> args)
{
    // Example of handling the custom value update event
    args.Item = new MyCustomType { Value = args.Text, Text = args.Text };
}

DataId

Declaration
protected string DataId { get; set; }
Property Value
Type
System.String

DataSource

Gets or sets the data source for the component.

Declaration
public IEnumerable<TItem> DataSource { get; set; }
Property Value
Type Description
System.Collections.Generic.IEnumerable<TItem>

An System.Collections.Generic.IEnumerable<> containing the data items. The default value is null.
Remarks

The data source can be a local collection or remote data accessed through a DataManager. For remote data, use the Query property to specify additional parameters.

Examples

Local data binding:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="Product ID"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code { 
    private List<Product> ProductsList = new List<Product> 
    { 
        new Product { ProductID = 1, ProductName = "Chai" }, 
        new Product { ProductID = 2, ProductName = "Chang" } 
    }; 
}

Destroyed

Gets or sets the event callback that will be invoked when the SfMultiColumnComboBox<TValue, TItem> component is destroyed.

Declaration
public EventCallback<object> Destroyed { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component is destroyed. The default value is null.
Remarks

This event is triggered when the SfMultiColumnComboBox<TValue, TItem> component is being disposed or removed from the component tree. Use this event to perform cleanup operations, release resources, or handle any finalization logic.

Examples

The following example demonstrates how to handle the Destroyed event:

<SfMultiColumnCombobox Destroyed="HandleDestroyed">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleDestroyed(object e)
{
    // Component is being destroyed
    Console.WriteLine("MultiColumnComboBox component destroyed.");
    // Perform cleanup operations here
}

Disabled

Gets or sets a value indicating whether the component is disabled.

Declaration
public bool Disabled { get; set; }
Property Value
Type Description
System.Boolean

true to disable the component; otherwise, false. The default value is false.
Remarks

When disabled, the component appears grayed out and does not respond to user interactions. The component cannot receive focus and its value cannot be changed.

Examples

Conditionally disabling the component:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       Disabled="@isFormSubmitted" ValueField="ProductID" TextField="ProductName"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code {
    private bool isFormSubmitted = false;
}

EnableAltRow

Gets or sets a value indicating whether the SfMultiColumnComboBox<TValue, TItem> will render with alternative row styling.

Declaration
public bool EnableAltRow { get; set; }
Property Value
Type Description
System.Boolean

A bool value that determines whether alternative row styling is applied. If true, rows are styled alternately to improve readability. The default value is false.
Remarks

When EnableAltRow is set to true, the rows in the SfMultiColumnComboBox<TValue, TItem> popup list will have alternating styles, which can help differentiate rows visually. If set to false, all rows will use the same styling.

Examples

The following example demonstrates how to enable alternative row styling:

 

<SfMultiColumnCombobox EnableAltRow="true"> 
    <!-- Enables alternative row styling for improved readability --> 
</SfMultiColumnCombobox>

EnablePersistence

Gets or sets a value indicating whether to persist the state of the SfMultiColumnComboBox<TValue, TItem> across page reloads.

Declaration
public bool EnablePersistence { get; set; }
Property Value
Type Description
System.Boolean

A boolean value that indicates whether the component's state should be persisted. If set to true, the state of the combobox, such as selected items and filters, will be retained across page reloads. The default value is false.
Remarks

When persistence is enabled, the component’s state is saved in the browser’s storage (e.g., localStorage or sessionStorage) and restored when the page is reloaded. This feature is useful for maintaining user selections or settings between sessions.

Examples

The following example demonstrates how to enable persistence for the combobox:

 

<SfMultiColumnCombobox EnablePersistence="true"> 
    <!-- The state of the MultiColumn combobox will be persisted across page reloads --> 
</SfMultiColumnCombobox>

EnableTextWrap

Gets or sets a value that indicates whether text wrapping is enabled for the SfMultiColumnComboBox<TValue, TItem> component.

Declaration
public bool EnableTextWrap { get; set; }
Property Value
Type Description
System.Boolean

A bool value that determines if text wrapping is enabled. If true, text content will wrap to the next line if it exceeds the available width. If false, text will be displayed on a single line and may be truncated if it overflows. The default value is false.
Remarks

This property controls whether the text content within the component's cells is allowed to wrap. Enabling it can improve readability when dealing with long text values.

Examples

The following example demonstrates how to enable text wrapping:

<SfMultiColumnCombobox AllowTextWrap="true">
    <!-- Enables text wrapping for long content inside the component -->
</SfMultiColumnCombobox>

EnableVirtualization

Gets or sets a value indicating whether virtual scrolling is enabled for improved performance.

Declaration
public bool EnableVirtualization { get; set; }
Property Value
Type Description
System.Boolean

true to enable virtual scrolling; otherwise, false. The default value is false.
Remarks

Virtual scrolling renders only the visible items in the viewport, significantly improving performance when working with large datasets. This feature is recommended for data sources with thousands of items.

Examples

Enabling virtual scrolling for large datasets:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@LargeProductsList" 
                       EnableVirtualization="true" PopupHeight="300px"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="ID" Width="80"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name" Width="200"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code {
    // Large dataset with thousands of items
    private List<Product> LargeProductsList = GenerateLargeProductList();
}

Filtering

Gets or sets the event callback that will be invoked on typing a character in the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public EventCallback<FilteringEventArgs> Filtering { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<FilteringEventArgs>

An Microsoft.AspNetCore.Components.EventCallback<> of type FilteringEventArgs that is triggered when entering values in the SfMultiColumnComboBox<TValue, TItem>. The default value is null.
Remarks

This event is raised when the user types in the input field, allowing you to implement custom filtering logic. To prevent the default filter action and implement your custom query, set the PreventDefaultAction property to true, and provide the modified data source.

Examples

The following example demonstrates how to handle the Filtering event to perform custom filtering:

<SfMultiColumnCombobox Filtering="HandleFiltering">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleFiltering(FilteringEventArgs e)
{
    // Example of custom filtering logic
    if (e.Text.Length >= 3)
    {
        e.PreventDefaultAction = true; // Prevent the default filtering action
        var filteredData = CustomFilterMethod(e.Text); // Perform custom filtering
        // Bind the filtered data to the combobox
        // (sender as SfMultiColumnCombobox).DataSource = filteredData;
    }
}

FilterType

Gets or sets the filtering criteria to be applied during search operations.

Declaration
public FilterType FilterType { get; set; }
Property Value
Type Description
FilterType

A FilterType value specifying how the filter should match text. The default value is Contains.
Remarks

This property is only applicable when AllowFiltering is enabled. Available options:

Examples

Using StartsWith filter:

<SfMultiColumnComboBox TValue="string" TItem="Product" DataSource="@ProductsList" 
                       AllowFiltering="true" FilterType="FilterType.StartsWith"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

FloatLabelType

Gets or sets the floating label behavior for the input field.

Declaration
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type Description
FloatLabelType

A FloatLabelType value specifying the label behavior. The default value is Never.
Remarks

Controls how the label text behaves when the user interacts with the input:

Requires the Placeholder property to be set.
Examples

Using auto-floating labels:

<SfMultiColumnComboBox TValue="string" TItem="Product" DataSource="@ProductsList" 
                       FloatLabelType="FloatLabelType.Auto" Placeholder="Select a product"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

Focus

Gets or sets the event callback that will be invoked when the SfMultiColumnComboBox<TValue, TItem> is focused.

Declaration
public EventCallback<object> Focus { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the SfMultiColumnComboBox<TValue, TItem> receives focus. The default value is null.
Remarks

Use this event to handle any logic that should occur when the component gains focus, such as updating UI state or triggering other operations.

Examples

The following example demonstrates how to handle the Focus event:

<SfMultiColumnCombobox Focus="HandleFocus">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleFocus(object e)
{
    // Example of handling focus event
    Console.WriteLine("SfMultiColumnCombobox has been focused.");
}

FooterTemplate

Gets or sets the template for the footer area of the dropdown list.

Declaration
public RenderFragment<FooterTemplateContext> FooterTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<FooterTemplateContext>

A Microsoft.AspNetCore.Components.RenderFragment<> template for the footer content. The default value is null.
Remarks

The footer template appears at the bottom of the dropdown list and can display summary information, such as total record count or custom actions. The template context provides access to data statistics.

Examples

Adding a footer with record count:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
    <FooterTemplate>
        <div style="padding: 10px; border-top: 1px solid #ccc;">
            Total Products: @context.DataCount
        </div>
    </FooterTemplate>
</SfMultiColumnComboBox>

GridLines

Defines the mode of the grid lines in the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public GridLine GridLines { get; set; }
Property Value
Type Description
GridLine

A GridLines value that specifies the grid line display mode. The available modes are:

The default value is Default.
Remarks

Use the GridLines property to control the visibility and style of grid lines in the SfMultiColumnComboBox<TValue, TItem>. This can help in customizing the appearance and organization of the dropdown list items.

Examples

The following example demonstrates how to set the GridLines property:

 

<SfMultiColumnCombobox GridLines="Both"> 
    <!-- Displays both horizontal and vertical grid lines in the dropdown list --> 
</SfMultiColumnCombobox>

GroupByField

Gets or sets the field name used for grouping items in the dropdown list.

Declaration
public string GroupByField { get; set; }
Property Value
Type Description
System.String

The name of the field for grouping. The default value is string.Empty.
Remarks

When specified, items in the dropdown are grouped by the values in this field. Use GroupTemplate to customize the appearance of group headers.

Examples

Grouping products by category:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ValueField="ProductID" TextField="ProductName" 
                       GroupByField="Category"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Category" Header="Category"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Price" Header="Price"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

GroupTemplate

Gets or sets the template for customizing group headers in the dropdown list.

Declaration
public RenderFragment<object> GroupTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<System.Object>

A Microsoft.AspNetCore.Components.RenderFragment<> template for rendering group headers. The default value is null.
Remarks

This template is used when data is grouped using the GroupByField property. The template context provides access to group information such as key, count, and field details.

Examples

Customizing group headers:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       GroupByField="Category"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Category" Header="Category"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
    <GroupTemplate> 
        <div class="group-header"> 
            <strong>@context.Key</strong> (@context.Count items) 
        </div> 
    </GroupTemplate> 
</SfMultiColumnComboBox>

HtmlAttributes

Gets or sets additional HTML attributes for the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

A System.Collections.Generic.Dictionary<, > containing the HTML attributes and their values. The default value is null.
Remarks

These attributes will be added to the HTML element of the SfMultiColumnComboBox<TValue, TItem> component.

Examples

The following example demonstrates how to use the HtmlAttributes property to add custom HTML attributes to the SfMultiColumnComboBox<TValue, TItem>:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" HtmlAttributes="new Dictionary<string, object> { { 'class', 'custom-class' } }"> 
</SfMultiColumnComboBox{TValue, TItem}> 

@code { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    private List<Product> ProductsList { get; set; } = new List<Product>(); 
}

ID

Gets or sets the unique identifier for SfMultiColumnComboBox<TValue, TItem> component.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

Accepts a string value. The default value is string.Empty.
Remarks

You can specify only a unique value to this property.

IgnoreCase

Gets or sets a value indicating whether case should be ignored when filtering or searching within the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public bool IgnoreCase { get; set; }
Property Value
Type Description
System.Boolean

A bool value that determines if case sensitivity is ignored. If set to true, the combobox will ignore case when performing filter or search operations. The default value is true.
Remarks

When IgnoreCase is set to true, filtering and searching within the combobox are case-insensitive. This can be useful for improving usability when users do not need to match the exact case of the text they are searching for. If set to false, the combobox will be case-sensitive in its operations.

Examples

The following example demonstrates how to disable case-insensitive search:

 

<SfMultiColumnCombobox IgnoreCase="false"> 
    <!-- The combobox will perform case-sensitive search and filtering --> 
</SfMultiColumnCombobox>

Index

Gets or sets the index of the selected item. Supports two-way binding.

Declaration
public Nullable<int> Index { get; set; }
Property Value
Type Description
System.Nullable<System.Int32>

The zero-based index of the selected item, or null if no item is selected.
Remarks

Use @bind-Index for two-way data binding. The index is zero-based and corresponds to the position of the item in the data source.

Examples

The following example demonstrates index-based selection:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       @bind-Index="selectedIndex"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="Product ID"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code { 
    private int? selectedIndex = 0; // Pre-select first item
    private List<Product> ProductsList = new List<Product>(); 
}

IndexChanged

Gets or sets the event callback that is triggered when the selected index changes.

Declaration
public EventCallback<Nullable<int>> IndexChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Nullable<System.Int32>>

An Microsoft.AspNetCore.Components.EventCallback<> delegate for handling index changes.
Remarks

This callback is invoked during two-way data binding when using @bind-Index. The index represents the zero-based position of the selected item in the data source.

InputAttributes

Gets or sets additional HTML attributes to be applied to the input element.

Declaration
public Dictionary<string, object> InputAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

A dictionary of attribute names and values. The default value is an empty dictionary.
Remarks

Use this property to set additional HTML attributes on the underlying input element, such as data attributes, accessibility attributes, or other custom attributes. Component-specific properties take precedence over attributes set here.

Examples

Adding accessibility and data attributes:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       InputAttributes="@inputAttributes"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code {
    private Dictionary<string, object> inputAttributes = new Dictionary<string, object>
    {
        { "aria-label", "Select a product from the list" },
        { "data-testid", "product-selector" },
        { "tabindex", "0" }
    };
}

Localizer

Gets or sets the localization service used to provide culture-specific text resources.

Declaration
protected ISyncfusionStringLocalizer Localizer { get; set; }
Property Value
Type Description
ISyncfusionStringLocalizer

An instance of ISyncfusionStringLocalizer that provides localized strings for the MultiColumnComboBox component, or null if localization is not configured.
Remarks

The Localizer is automatically injected through dependency injection and provides access to localized text resources for various UI elements such as:

  • No records found messages
  • Action failure error messages
  • Accessibility labels and descriptions
  • Grid-related text content

The component will fall back to default English text if the Localizer is null or if specific locale keys are not found. This property is essential for applications that need to support multiple languages or cultures.

MultiColumnEditContext

Gets or sets the cascaded EditContext for form validation.

Declaration
protected EditContext MultiColumnEditContext { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.Forms.EditContext

The Microsoft.AspNetCore.Components.Forms.EditContext instance from a parent EditForm component.
Remarks

This property is automatically set when the component is placed inside an EditForm. It enables form validation and integration with other form components.

NoRecordsTemplate

Gets or sets the template displayed when no data is available.

Declaration
public RenderFragment NoRecordsTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

A Microsoft.AspNetCore.Components.RenderFragment for the no records template. The default value is null.
Remarks

This template is shown when the data source is empty or when filtering results in no matches. If not specified, a default "No records found" message is displayed.

Examples

Customizing the no records message:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       AllowFiltering="true"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
    <NoRecordsTemplate> 
        <div style="text-align: center; padding: 20px;"> 
            <i class="e-icons e-search"></i> 
            <p>No products found matching your search.</p> 
        </div> 
    </NoRecordsTemplate> 
</SfMultiColumnComboBox>

OnActionBegin

Gets or sets the event callback that will be invoked before fetching the data from the remote server.

Declaration
public EventCallback<ActionBeginEventArgs> OnActionBegin { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ActionBeginEventArgs>

An Microsoft.AspNetCore.Components.EventCallback<> of type ActionBeginEventArgs that is invoked before data fetching begins. The default value is null.
Remarks

This event is raised when the data in the SfMultiColumnComboBox<TValue, TItem> is about to be fetched from the server. You can use this event to perform pre-processing operations or to modify the request parameters before the data fetch operation begins.

Examples

The following example demonstrates how to handle the OnActionBegin event:

<SfMultiColumnCombobox OnActionBegin="HandleActionBegin">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleActionBegin(ActionBeginEventArgs args)
{
    // Perform operations before data fetch begins
    Console.WriteLine("Data fetch operation is about to begin.");
}

OnActionComplete

Gets or sets the event callback that will be invoked after fetching the data from the remote server.

Declaration
public EventCallback<ActionCompleteEventArgs<TItem>> OnActionComplete { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ActionCompleteEventArgs<TItem>>

An Microsoft.AspNetCore.Components.EventCallback<> of type ActionCompleteEventArgs<TItem> that is invoked after data fetching completes successfully. The default value is null.
Remarks

This event is raised when the data in the SfMultiColumnComboBox<TValue, TItem> has been successfully fetched from the server. Use this event to perform post-processing operations on the fetched data or to update the UI after data loading is complete.

Examples

The following example demonstrates how to handle the OnActionComplete event:

<SfMultiColumnCombobox OnActionComplete="HandleActionComplete">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleActionComplete(ActionCompleteEventArgs<TItem> args)
{
    // Data has been fetched successfully
    Console.WriteLine($"Data fetch completed. {args.Result.Count} items loaded.");
}

OnActionFailure

Gets or sets the event callback that will be invoked when the data fetch request fails.

Declaration
public EventCallback<Exception> OnActionFailure { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Exception>

An Microsoft.AspNetCore.Components.EventCallback<> of type System.Exception that is invoked when data fetching fails. The default value is null.
Remarks

This event is raised when the data fetch request in the SfMultiColumnComboBox<TValue, TItem> encounters an error or fails to complete successfully. Use this event to handle error scenarios, display user-friendly error messages, or implement fallback mechanisms.

Examples

The following example demonstrates how to handle the OnActionFailure event:

<SfMultiColumnCombobox OnActionFailure="HandleActionFailure">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleActionFailure(Exception ex)
{
    // Handle the failure scenario
    Console.WriteLine($"Data fetch failed: {ex.Message}");
    // Implement error handling logic
}

OnInput

Gets or sets the event callback that is invoked when the input value changes in the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public EventCallback<ChangeEventArgs> OnInput { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.ChangeEventArgs>

An event handler of type Microsoft.AspNetCore.Components.ChangeEventArgs that is triggered when the input value is changed.
Remarks

This event is raised when the user modifies the input value, either by typing or pasting. You can use the Microsoft.AspNetCore.Components.ChangeEventArgs parameter to handle the new input value.

Examples

The following example demonstrates how to handle the OnInput event to log the new input value:

<SfMultiColumnComboBox OnInput="HandleInputChange">
    <!-- Other properties -->
</SfMultiColumnComboBox>

private void HandleInputChange(ChangeEventArgs e)
{
    var newValue = e.Value?.ToString();
    Console.WriteLine("Input Value Changed: " + newValue);
}

OnValueSelect

Gets or sets the event callback that is invoked when an item is selected from the dropdown popup by the user, either through a mouse click or keyboard navigation, in the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public EventCallback<ValueSelectEventArgs<TItem>> OnValueSelect { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ValueSelectEventArgs<TItem>>

An event handler of type ValueSelectEventArgs<TItem> that is triggered when an item is selected from the dropdown.
Remarks

This event is raised when an item is selected by the user. You can use the ValueSelectEventArgs<TItem> parameter to handle the selected item or to prevent the item selection by setting the Cancel property to true.

Examples

The following example demonstrates how to handle the OnValueSelect event to log the selected item:

<SfMultiColumnCombobox OnValueSelect="HandleValueSelect">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleValueSelect(ValueSelectEventArgs<TItem> e)
{
    if (e.IsInteracted)
    {
        // Log the selected item
        Console.WriteLine("Item Selected: " + e.ItemData.ToString());

        // Example of preventing the selection
        if (SomeConditionToPreventSelection)
        {
            e.Cancel = true; // Prevent the item from being selected
        }
    }
}

PageCount

Gets or sets the number of pages to be displayed in the pager container of the SfMultiColumnComboBox<TValue, TItem> when paging is enabled.

Declaration
public int PageCount { get; set; }
Property Value
Type Description
System.Int32

An int value representing the number of pages to show in the pager container. The default value is not specified and should be set according to the desired paging behavior.
Remarks

This property is used in conjunction with the AllowPaging property to control the number of page buttons shown in the pager. If the total number of pages exceeds this value, the pager will provide navigation controls to access additional pages.

Examples

The following example demonstrates how to set the number of pages displayed in the pager:

 

<SfMultiColumnCombobox AllowPaging="true" PageCount="5"> 
    <!-- Displays a pager with 5 page buttons --> 
</SfMultiColumnCombobox>

PageSize

Gets or sets the number of records to be displayed per page in the SfMultiColumnComboBox<TValue, TItem> when paging is enabled.

Declaration
public int PageSize { get; set; }
Property Value
Type Description
System.Int32

An int value representing the number of records per page. The default value is not specified and should be set according to the desired paging behavior.
Remarks

This property is used in conjunction with the AllowPaging property to define how many records are shown per page in the pager. It should be set to a positive integer value to enable paging.

Examples

The following example demonstrates how to set the page size:

 

<SfMultiColumnCombobox AllowPaging="true" PageSize="20"> 
    <!-- Displays 20 records per page --> 
</SfMultiColumnCombobox>

Placeholder

Gets or sets the placeholder text displayed when no value is selected.

Declaration
public string Placeholder { get; set; }
Property Value
Type Description
System.String

The placeholder text to display. The default value is string.Empty.
Remarks

The placeholder provides guidance to users about what to select or enter. This text is also used for floating label functionality when FloatLabelType is configured.

Examples

Setting placeholder text:

<SfMultiColumnComboBox TValue="string" TItem="Product" DataSource="@ProductsList" 
                       Placeholder="Choose a product"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

PopupClosed

Gets or sets the event callback that will be invoked when the popup is closed in the SfMultiColumnComboBox<TValue, TItem> component.

Declaration
public EventCallback<object> PopupClosed { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the popup is closed. The default value is null.
Remarks

This event is useful for performing actions when the popup is hidden, such as saving state, cleaning up resources, or updating UI components. The event is fired after the popup has been successfully closed and is no longer visible to the user.

Examples

The following example demonstrates how to handle the PopupClosed event:

<SfMultiColumnCombobox PopupClosed="HandlePopupClosed">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandlePopupClosed(object e)
{
    // Example of handling the popup closed event
    Console.WriteLine("Popup has been closed.");
}

PopupClosing

Gets or sets the event callback that will be invoked before the dropdown popup of the SfMultiColumnComboBox<TValue, TItem> is closed.

Declaration
public EventCallback<PopupClosingEventArgs> PopupClosing { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PopupClosingEventArgs>

An Microsoft.AspNetCore.Components.EventCallback<> of type PopupClosingEventArgs that is triggered before the dropdown popup is closed. The default value is null.
Remarks

Use this event to perform any custom actions or validations before the popup closes. You can cancel the closing of the popup by setting the Cancel property to true. This is useful for implementing validation logic or performing cleanup operations before the popup is hidden.

Examples

The following example demonstrates how to handle the PopupClosing event:

<SfMultiColumnCombobox PopupClosing="HandlePopupClosing">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandlePopupClosing(PopupClosingEventArgs e)
{
    // Example of handling popup closing event
    if (shouldCancelPopup)
    {
        e.Cancel = true;
    }
}

PopupHeight

Gets or sets the height of the dropdown popup.

Declaration
public string PopupHeight { get; set; }
Property Value
Type Description
System.String

The popup height as a string value. The default value is "300px".
Remarks

Controls the maximum height of the dropdown list. If the content exceeds this height, a scrollbar will appear. Use "auto" to fit content or specify fixed values for consistent sizing.

Examples

Setting custom popup height:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@LargeProductsList" 
                       PopupHeight="400px" AllowPaging="true" PageSize="15"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Category" Header="Category"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

PopupOpened

Gets or sets the event callback that will be invoked when the popup is opened in the SfMultiColumnComboBox<TValue, TItem> component.

Declaration
public EventCallback<object> PopupOpened { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the popup is opened. The default value is null.
Remarks

This event is useful for performing actions when the popup is displayed, such as logging, updating UI state, or modifying the popup content. The event is fired after the popup has been successfully opened and is visible to the user.

Examples

The following example demonstrates how to handle the PopupOpened event:

<SfMultiColumnCombobox PopupOpened="HandlePopupOpened">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandlePopupOpened(object e)
{
    // Example of handling the popup opened event
    Console.WriteLine("Popup has been opened.");
}

PopupOpening

Gets or sets the event callback that will be invoked before the dropdown popup of the SfMultiColumnComboBox<TValue, TItem> is opened.

Declaration
public EventCallback<PopupOpeningEventArgs> PopupOpening { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PopupOpeningEventArgs>

An Microsoft.AspNetCore.Components.EventCallback<> of type PopupOpeningEventArgs that is triggered before the dropdown popup is opened. The default value is null.
Remarks

Use this event to perform any custom actions or validations before the popup opens. You can cancel the opening of the popup by setting the Cancel property to true. This is useful for implementing conditional popup behavior or performing setup operations before the popup is displayed.

Examples

The following example demonstrates how to handle the PopupOpening event:

<SfMultiColumnCombobox PopupOpening="HandlePopupOpening">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandlePopupOpening(PopupOpeningEventArgs e)
{
    // Example of handling popup opening event
    if (shouldCancelPopup)
    {
        e.Cancel = true;
    }
}

PopupWidth

Gets or sets the width of the dropdown popup.

Declaration
public string PopupWidth { get; set; }
Property Value
Type Description
System.String

The popup width as a string value. The default value is "100%".
Remarks

Controls the width of the dropdown list that appears when the component is opened. By default, the popup matches the width of the input element. You can specify a different width using CSS units.

Examples

Setting popup width larger than the input:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       Width="200px" PopupWidth="400px"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="ID" Width="80"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name" Width="200"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Price" Header="Price" Width="120"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

Query

Gets or sets the query object for data operations.

Declaration
public Query Query { get; set; }
Property Value
Type Description
Query

A Query instance for customizing data operations. The default value is null.
Remarks

Use the Query property to apply filtering, sorting, grouping, or other data operations. This is particularly useful when working with remote data sources or when you need to pre-filter the data.

Examples

Applying a query to filter data:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       Query="@productQuery"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="Product ID"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code { 
    private Query productQuery = new Query().Where("ProductID", "lessthan", 10); 
    private List<Product> ProductsList = new List<Product>(); 
}

ReadOnly

Gets or sets a value indicating whether the component is in read-only mode.

Declaration
public bool ReadOnly { get; set; }
Property Value
Type Description
System.Boolean

true to make the component read-only; otherwise, false. The default value is false.
Remarks

In read-only mode, the current value is displayed but cannot be changed. The component can still receive focus but users cannot open the dropdown or modify the selection.

Examples

Making the component read-only:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ReadOnly="true" @bind-Value="selectedValue" 
                       ValueField="ProductID" TextField="ProductName"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code {
    private int? selectedValue = 1; // Pre-selected value that cannot be changed
}

RowHeight

Gets or sets the height of the rows in the SfMultiColumnComboBox<TValue, TItem> popup content.

Declaration
public double RowHeight { get; set; }
Property Value
Type Description
System.Double

A double value specifying the height of each row. The height value can vary depending on the theme. If not set, the default value will be used based on the component’s theme.
Remarks

Use the RowHeight property to customize the height of rows in the popup list of the SfMultiColumnComboBox<TValue, TItem>. Adjusting this value can help in achieving the desired visual appearance and spacing of items in the dropdown list.

Examples

The following example demonstrates how to set the RowHeight property:

 

<SfMultiColumnCombobox RowHeight="40"> 
    <!-- Sets the height of each row in the dropdown list to 40 pixels --> 
</SfMultiColumnCombobox>

ShowClearButton

Gets or sets a value indicating whether the clear button is displayed.

Declaration
public bool ShowClearButton { get; set; }
Property Value
Type Description
System.Boolean

true to show the clear button; otherwise, false. The default value is true.
Remarks

The clear button allows users to quickly clear the selected value by clicking the 'X' icon. The button is only visible when a value is selected and the component is not read-only or disabled.

Examples

Hiding the clear button:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ShowClearButton="false" ValueField="ProductID" TextField="ProductName"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

TextField

Gets or sets the field name that maps to the display text of the data source items.

Declaration
public string TextField { get; set; }
Property Value
Type Description
System.String

The name of the field used for display text. The default value is string.Empty.
Remarks

This field determines what text is displayed in the input field when an item is selected. It also affects how items are matched during filtering when AllowFiltering is enabled.

Examples

Using ProductName as the display text:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ValueField="ProductID" TextField="ProductName"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="ID"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Name"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="Price" Header="Price"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

TextOverflowMode

Gets or sets a value that defines how the text content is clipped when it overflows in the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public TextOverflowMode TextOverflowMode { get; set; }
Property Value
Type Description
TextOverflowMode

A TextOverflowMode value that specifies the clipping behavior. The default value is ClipMode.Ellipsis.
Remarks

The TextOverflowMode property controls how text is truncated when it overflows the available space. The following options are available:

Examples

The following example demonstrates how to set the TextOverflowMode to show ellipsis when content overflows:

<SfMultiColumnComboBox ClipMode="ClipMode.Ellipsis">
    <!-- Other properties -->
</SfMultiColumnComboBox>

TextWrapElement

Gets or sets a value that defines how text content should wrap in the SfMultiColumnComboBox<TValue, TItem>.

Declaration
public TextWrapElement TextWrapElement { get; set; }
Property Value
Type Description
TextWrapElement

A TextWrapElement value that specifies the text wrapping behavior. The default value is WrapMode.Both.
Remarks

The TextWrapElement property allows you to control the way text is displayed when it overflows the available space. The following options are available:

Examples

The following example demonstrates how to set the TextWrapElement to wrap text within the component:

<SfMultiColumnComboBox WrapMode="WrapMode.Both">
    <!-- Other properties -->
</SfMultiColumnComboBox>

Value

Gets or sets the selected item value. Supports two-way binding.

Declaration
public TValue Value { get; set; }
Property Value
Type Description
TValue

The selected value of the combobox. The default value is default(TValue).
Remarks

This property binds to the value of the selected item in the dropdown list. Use @bind-Value for two-way data binding. The value corresponds to the field specified by ValueField.

Examples

The following example demonstrates how to bind a value to the MultiColumnComboBox:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ValueField="ProductID" @bind-Value="selectedValue"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="Product ID" Width="110"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name" Width="130"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code { 
    private int? selectedValue; 
    private List<Product> ProductsList = new List<Product>(); 
}

ValueChange

Gets or sets the event callback that will be invoked when the value of the SfMultiColumnComboBox<TValue, TItem> changes.

Declaration
public EventCallback<ValueChangeEventArgs<TValue, TItem>> ValueChange { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ValueChangeEventArgs<TValue, TItem>>

An Microsoft.AspNetCore.Components.EventCallback<> of type ValueChangeEventArgs<TValue, TItem> that is invoked when the value changes. The default value is null.
Remarks

This event is triggered when an item is selected from the popup or when the user changes the model value. The event provides access to both the previous and new values, allowing you to track changes and implement custom logic.

Examples

The following example demonstrates how to handle the ValueChange event to log the new and previous values:

<SfMultiColumnCombobox ValueChange="HandleValueChange">
    <!-- Other properties -->
</SfMultiColumnCombobox>

private void HandleValueChange(ValueChangeEventArgs<TValue,TItem> e)
{
    if (e.IsInteracted)
    {
        // Log the new and previous item values
        Console.WriteLine("Previous Value: " + e.PreviousItemData?.ToString());
        Console.WriteLine("New Value: " + e.ItemData?.ToString());

        // Example of preventing the value change
        if (SomeConditionToPreventValueChange)
        {
            e.Cancel = true; // Prevent the value from changing
        }
    }
}

ValueChanged

Gets or sets the event callback that is triggered when the selected value changes.

Declaration
public EventCallback<TValue> ValueChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<TValue>

An Microsoft.AspNetCore.Components.EventCallback<> delegate for handling value changes.
Remarks

This callback is invoked during two-way data binding when using @bind-Value. For more control over the change process, use the ValueChange event instead.

ValueExpression

Gets or sets an expression that identifies the bound value for validation purposes.

Declaration
public Expression<Func<TValue>> ValueExpression { get; set; }
Property Value
Type Description
System.Linq.Expressions.Expression<System.Func<TValue>>

A lambda expression that identifies the bound value property.
Remarks

This property is used by the Blazor framework for data binding validation and is automatically set when using @bind-Value. It enables integration with EditContext and validation attributes.

ValueField

Gets or sets the field name that maps to the value property of the data source.

Declaration
public string ValueField { get; set; }
Property Value
Type Description
System.String

The name of the field used as the value. The default value is string.Empty.
Remarks

This field determines what value is assigned to the Value property when an item is selected. The field should contain unique values to ensure proper selection behavior.

Examples

Mapping the ProductID field as the value:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ValueField="ProductID" TextField="ProductName" 
                       @bind-Value="selectedProductId"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductID" Header="ID"></MultiColumnComboBoxColumn> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox> 

@code {
    private int? selectedProductId;
}

Width

Gets or sets the width of the component.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

The width as a string value. The default value is "100%". Supports CSS units like px, %, em, rem, etc.
Remarks

The width determines the size of the input element. Common values include:

Examples

Setting different width values:

<!-- Fixed width -->
<SfMultiColumnComboBox Width="300px" TValue="int?" TItem="Product" DataSource="@ProductsList">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</SfMultiColumnComboBox>

<!-- Responsive width -->
<SfMultiColumnComboBox Width="50%" TValue="int?" TItem="Product" DataSource="@ProductsList">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</SfMultiColumnComboBox>

ZIndex

Gets or sets the z-index value of the dropdown popup.

Declaration
public double ZIndex { get; set; }
Property Value
Type Description
System.Double

The z-index value for the popup element. The default value is 1000.
Remarks

Controls the stacking order of the dropdown popup relative to other elements on the page. Increase this value if the popup appears behind other elements like modals or overlays.

Examples

Setting a higher z-index for modal scenarios:

<SfMultiColumnComboBox TValue="int?" TItem="Product" DataSource="@ProductsList" 
                       ZIndex="9999"> 
    <MultiColumnComboBoxColumns> 
        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name"></MultiColumnComboBoxColumn> 
    </MultiColumnComboBoxColumns> 
</SfMultiColumnComboBox>

Methods

AddItemAsync(IEnumerable<TItem>, Nullable<Int32>)

Adds one or more new items to the MultiColumnComboBox popup list at the specified index or at the end of the list.

Declaration
public Task AddItemAsync(IEnumerable<TItem> items, Nullable<int> itemIndex = null)
Parameters
Type Name Description
System.Collections.Generic.IEnumerable<TItem> items

The collection of items to be added to the popup list.
System.Nullable<System.Int32> itemIndex

The zero-based index at which the items should be inserted. If null, items are appended to the end of the list. If the index is out of bounds, items are appended to the end.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of adding items to the list.
Remarks

This method dynamically adds items to both the grid data and main data collections. If the popup list is not yet populated, it will be initialized with the current data source before adding the new items. When filtering is enabled, the items are also added to the main data collection to ensure they appear in filtered results.

Examples

The following example demonstrates how to add items to the component:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task AddNewEmployees()
    {
        var newEmployees = new List<Employee>
        {
            new Employee { ID = "001", Name = "John Doe" },
            new Employee { ID = "002", Name = "Jane Smith" }
        };

        // Add at the beginning of the list
        await multiColumnComboBox.AddItemAsync(newEmployees, 0);

        // Add at the end of the list
        await multiColumnComboBox.AddItemAsync(newEmployees);
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

BuildRenderTree(RenderTreeBuilder)

Builds the component's render tree by combining the input field and grid components.

Declaration
protected override void BuildRenderTree(RenderTreeBuilder builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder

The Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder used to build the component's render tree.
Remarks

This method overrides the base implementation to construct the complete UI structure for the MultiColumnComboBox, which consists of:

  1. A cascading value container that provides the component instance to child components
  2. An input field component (Syncfusion.Blazor.Inputs.Internal.SfInputBase) with associated event handlers and styling
  3. A dropdown popup containing a data grid (SfGrid<TValue>) when ShowGrid is true
  4. No records or action failure templates when applicable
  5. An optional footer template when configured

The method delegates the actual rendering logic to RenderInputAndGridCombined which handles the complex component composition, event binding, and conditional rendering based on the component's current state and configuration.

This approach ensures proper component lifecycle management and maintains the hierarchical structure required for accessibility, keyboard navigation, and proper event handling between the input field and dropdown grid.

FilterAsync(IEnumerable<TItem>, Query)

Filters the MultiColumnComboBox data source and updates the popup list with the filtered results.

Declaration
public Task FilterAsync(IEnumerable<TItem> dataSource, Query query = null)
Parameters
Type Name Description
System.Collections.Generic.IEnumerable<TItem> dataSource

The data source used to populate the MultiColumnComboBox with filtered data.
Query query

Optional Query object to apply additional filtering or processing to the data. If null, no additional query operations are applied.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of filtering and updating the data source.
Remarks

This method allows for custom filtering of the MultiColumnComboBox data source. It updates both the main data and grid data with the provided data source and opens the popup if it's not already visible. The method sets a custom filtering flag to indicate that external filtering has been applied.

Examples

The following example demonstrates how to apply custom filtering to the component:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task ApplyCustomFilter()
    {
        var filteredData = Employees.Where(e => e.Department == "IT").ToList();
        await multiColumnComboBox.FilterAsync(filteredData);
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
    }
}

FocusAsync()

Sets the focus to the MultiColumnComboBox input element for user interaction.

Declaration
public Task FocusAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of setting focus to the input element.
Remarks

This method programmatically moves the keyboard focus to the MultiColumnComboBox input element, enabling users to interact with the component using keyboard navigation. This is particularly useful for accessibility scenarios and when implementing custom focus management.

Examples

The following example demonstrates how to programmatically set focus to the component:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task SetFocus()
    {
        await multiColumnComboBox.FocusAsync();
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

FocusOutAsync()

Removes the focus from the MultiColumnComboBox input element if it is currently focused.

Declaration
public Task FocusOutAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of removing focus from the input element.
Remarks

This method programmatically removes the keyboard focus from the MultiColumnComboBox input element. It is useful for implementing custom focus management scenarios where you need to programmatically move focus away from the component to another element or to blur the current input.

Examples

The following example demonstrates how to programmatically remove focus from the component:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task RemoveFocus()
    {
        await multiColumnComboBox.FocusOutAsync();
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

GetDataByValue(TValue)

Retrieves the data item from the MultiColumnComboBox that matches the specified value.

Declaration
public TItem GetDataByValue(TValue multiColumnComboBoxValue)
Parameters
Type Name Description
TValue multiColumnComboBoxValue

The value to search for in the data source. This value is compared against the component's ValueField.
Returns
Type Description
TItem

The TItem data object that matches the specified value, or null if no matching item is found.
Remarks

This method searches through the grid data collection to find an item that matches the provided value. The comparison method depends on the data type:

  • For primitive data types, direct value comparison is performed
  • For enum types, the value is parsed and compared as an enum
  • For complex objects, JSON serialization comparison is used when TValue is the same as TItem
  • For other cases, the value field specified in ValueField is used for comparison
Examples

The following example demonstrates how to retrieve a data item by its value:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private void FindEmployeeById()
    {
        var employee = multiColumnComboBox.GetDataByValue("EMP001");
        if (employee != null)
        {
            Console.WriteLine($"Found employee: {employee.Name}");
        }
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

GetItemsAsync()

Retrieves all the popup list items currently bound to the MultiColumnComboBox component.

Declaration
public Task<IEnumerable<TItem>> GetItemsAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<TItem>>

A System.Threading.Tasks.Task<> containing an System.Collections.Generic.IEnumerable<> of TItem representing all items in the popup list, or null if no items are available.
Remarks

This method returns the complete collection of items that are displayed in the popup list. If the grid data has not been populated yet, it will automatically populate the data from the current data source before returning the items. This is useful for getting the current state of all available options in the component.

Examples

The following example demonstrates how to retrieve all items from the component:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task GetAllItems()
    {
        var items = await multiColumnComboBox.GetItemsAsync();
        if (items != null)
        {
            Console.WriteLine($"Total items: {items.Count()}");
        }
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

HidePopupAsync()

Hides the popup if it is in the open state.

Declaration
public Task HidePopupAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of hiding the popup.
Remarks

This method triggers the PopupClosing event before closing the popup. If the event is cancelled, the popup will remain open. Upon successful closure, the PopupClosed event is fired and focus is restored to the input element if PersistFocus is enabled.

Examples

The following example demonstrates how to programmatically hide the popup:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task HidePopup()
    {
        await multiColumnComboBox.HidePopupAsync();
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

ShowPopupAsync()

Opens the popup that displays the list of items in the MultiColumnComboBox component.

Declaration
public Task ShowPopupAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of opening the popup.
Remarks

This method triggers the PopupOpening event before opening the popup. If the event is cancelled, the popup will not be displayed. The method also updates the grid data if it hasn't been loaded yet and sets the appropriate ARIA attributes for accessibility support.

Examples

The following example demonstrates how to programmatically show the popup:

<SfMultiColumnComboBox TValue="string" TItem="Employee" @ref="multiColumnComboBox"
                       ValueField="ID" TextField="Name" DataSource="@Employees">
</SfMultiColumnComboBox>

@code {
    SfMultiColumnComboBox<string, Employee> multiColumnComboBox;
    private List<Employee> Employees = new List<Employee>();

    private async Task ShowPopup()
    {
        await multiColumnComboBox.ShowPopupAsync();
    }

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}

UpdateChildProperties(MultiColumnComboboxColumns)

Updates the child column properties for the MultiColumnComboBox component.

Declaration
public Task UpdateChildProperties(MultiColumnComboboxColumns properties)
Parameters
Type Name Description
MultiColumnComboboxColumns properties

The MultiColumnComboboxColumns object containing the column definitions to be applied to the component.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation.
Remarks

This method processes the provided column properties and configures the internal grid columns accordingly. Each column property is mapped to a corresponding GridColumn with appropriate field mappings, headers, formatting, and styling options.

Examples

Updating column properties programmatically.

var columnProperties = new MultiColumnComboboxColumns();
await multiColumnComboBox.UpdateChildProperties(columnProperties);

UpdateMainListDataAsync(IEnumerable<TItem>, Query)

Declaration
protected Task UpdateMainListDataAsync(IEnumerable<TItem> dataSource = null, Query query = null)
Parameters
Type Name Description
System.Collections.Generic.IEnumerable<TItem> dataSource
Query query
Returns
Type
System.Threading.Tasks.Task

Implements