Class SfMultiColumnComboBox<TValue, TItem>

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 value type.
TItem

Specifies the type of SfDropDownList.

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 that determines whether custom values can be entered into the SfMultiColumnComboBox<TValue, TItem>.

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

true if custom values are allowed; otherwise, false. The default is true, allowing users to input values that are not present in the predefined list.
Remarks

When this property is set to true, users can enter values that are not part of the predefined list of items in the dropdown. If set to false, only values from the list can be selected.

Examples

The following example demonstrates how to set AllowCustom to restrict input to predefined values:

<SfMultiColumnComboBox AllowCustom="false">
    <!-- Other properties -->
</SfMultiColumnComboBox>

AllowFiltering

Gets or sets a value that indicates whether to filter the typed characters in the SfMultiColumnComboBox<TValue, TItem>.

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

If true, filtering is enabled. The default value is false.
Remarks

When no match is found, the value of the NoRecordsTemplate property will be displayed.
Enabling filtering allows users to quickly find items by typing into the combobox.
This can be especially useful when working with large datasets.

Examples

The following example demonstrates how to enable filtering in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" AllowFiltering="true"> 
    <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 { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

AllowMultiSorting

Gets or sets a value that specifies whether to allow the user to sort multiple columns in the SfMultiColumnComboBox<TValue, TItem>.

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

If true, the user can perform multi-column sorting by clicking on the column header while holding the Shift or Ctrl key. The default value is true.
Remarks

Note that AllowSorting must be set to true in order to use this property.

Examples

The following example demonstrates how to enable multi-column sorting in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" AllowSorting="true" AllowMultiSorting="true"> 
    <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 { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

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 sorting is allowed for the columns in the SfMultiColumnComboBox<TValue, TItem>.

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

If true, sorting is enabled. The default value is true.
Remarks

Columns in the SfMultiColumnComboBox<TValue, TItem> are sorted in ascending order when clicked.
Clicking on an already sorted column will toggle the sort direction between ascending and descending.
To disable sorting for a particular column, set the AllowSorting property to false.

Examples

The following example demonstrates how to enable or disable sorting in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" AllowSorting="true"> 
    <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 { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

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 event callback that is triggered when the SfMultiColumnComboBox<TValue, TItem> is blurred.
Remarks

Use this event to handle any logic that should occur when the component loses focus.

Examples

The following example demonstrates how to handle the Blur event:





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 component is created.

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

CssClass

Gets or sets one or more custom CSS classes to append to the SfMultiColumnComboBox<TValue, TItem> component element.

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

The CSS class name(s). The default value is string.Empty.
Remarks

Use this property to apply custom styles to the component. Multiple class names can be specified, separated by spaces.

Examples

The following example demonstrates how to apply custom CSS classes to the combobox:

 

<SfMultiColumnCombobox CssClass="custom-combobox my-style"> 
    <!-- Custom styles will be applied to the combobox --> 
</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 event callback that is triggered when setting the custom value.
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>.

Examples

The following example demonstrates how to handle the CustomValueUpdate event:





private void HandleCustomValueSpecifier(CustomValueSpecifierEventArgs args)
{
    // Example of handling the custom value specifier 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 SfMultiColumnComboBox<TValue, TItem>. The data can be provided as a local list or fetched from a remote service.

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

An System.Collections.Generic.IEnumerable<> that represents the data source. The default value is null.
Remarks

The DataSource property allows you to bind data to the SfMultiColumnComboBox<TValue, TItem>. The data source can be an array of JSON objects or an instance of DataManager for remote data fetching.

Examples

The following example demonstrates how to set the DataSource property in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList"> 
    <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 { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

Destroyed

Gets or sets the event callback that will be invoked when the component is destroyed.

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

Disabled

Gets or sets a value indicating whether the SfMultiColumnComboBox<TValue, TItem> is disabled.

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

A boolean value that indicates the disabled state of the SfMultiColumnComboBox<TValue, TItem>. If set to true, the component is disabled. The default value is false.
Remarks

When the component is disabled, it cannot be interacted with by the user. This property is useful for controlling the usability of the component based on certain conditions.

Examples

The following example demonstrates how to disable the combobox:

 

<SfMultiColumnCombobox Disabled="true"> 
    <!-- The combobox will be disabled and cannot be interacted with --> 
</SfMultiColumnCombobox>

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>

EnableVirtualization

Gets or sets a value that indicates whether to enable virtual scrolling in the SfMultiColumnComboBox<TValue, TItem>.

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

If true, virtual scrolling is enabled. The default value is false.
Remarks

Enabling virtual scrolling helps improve performance by only rendering items that are currently visible in the viewport. This is particularly useful for large data sets where rendering all items at once would be inefficient.

Examples

The following example demonstrates how to enable virtual scrolling in the combobox:

 

<SfMultiColumnCombobox DataSource="@LargeDataList" EnableVirtualization="true"> 
    <!-- Virtual scrolling will be enabled for the combobox --> 
</SfMultiColumnCombobox>

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 event callback that is triggered when entering values in the SfMultiColumnComboBox<TValue, TItem>.
Remarks

To prevent the default filter action and make your custom query, set the PreventDefaultAction property to true, and pass the modified data source.

Examples

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





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 filter type to be considered on the search action in the SfMultiColumnComboBox<TValue, TItem>.

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

An FilterType value representing the filter type. The default value is Contains.
Remarks

The FilterType can be used to change the filtering type to one of the following:

Examples

The following example demonstrates how to set the filter type in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" AllowFiltering="true" FilterType="FilterType.StartsWith"> 
    <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 { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

FloatLabelType

Gets or sets the float label type in the SfMultiColumnComboBox<TValue, TItem>.

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

An FloatLabelType value representing the float label type. The default value is Never.
Remarks

The FloatLabelType can be used to change the float label type to one of the following:

Examples

The following example demonstrates how to set the float label type in a SfMultiColumnComboBox<TValue, TItem>:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" FloatLabelType="FloatLabelType.Always" Placeholder="Select a product"> 
    <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{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() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

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 event callback that is triggered when the SfMultiColumnComboBox<TValue, TItem> receives focus.
Remarks

Use this event to handle any logic that should occur when the component gains focus.

Examples

The following example demonstrates how to handle the Focus event:





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

FooterTemplate

Gets or sets the customized design content and assigns it to the footer container of the popup list in the SfMultiColumnComboBox<TValue, TItem>.

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

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

The template specified by this property will be displayed in the footer of the popup list. This allows for custom content such as summaries or additional information about the data.

Examples

The following example demonstrates how to use the FooterTemplate property to display the number of items in the data source in the footer of the popup list:

<SfMultiColumnCombobox DataSource="@ProductsList">
    <FooterTemplate>
        @if (FooterContext != null)
        {
            <div>Total items: @FooterContext.DataCount</div>
        }
    </FooterTemplate>
</SfMultiColumnCombobox>

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

    protected override async Task OnInitializedAsync()
    {
        ProductsList = new List<Product>
        {
            new Product { ProductID = 1, ProductName = "Chai", SupplierID = 1 },
            new Product { ProductID = 2, ProductName = "Chang", SupplierID = 2 },
            new Product { ProductID = 10, ProductName = "Queso Manchego La Pastora", SupplierID = 1 }
        };
    }

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

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 name of the field used to group the items in the SfMultiColumnComboBox<TValue, TItem>.

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

The name of the field by which the items will be grouped. The default value is String.Empty, which means no grouping is applied.
Remarks

The GroupByField property allows you to specify which field from the data source should be used to group the items in the dropdown list. This can be useful for organizing items into categories or sections based on a specific field's values.

Examples

The following example demonstrates how to set the GroupByField property:

 

<SfMultiColumnCombobox GroupByField="Category"> 
    <!-- Items will be grouped by the Category field --> 
</SfMultiColumnCombobox>

GroupTemplate

Gets or sets the template design and assigns it to the group headers present in the popup list.

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

The template content as a Microsoft.AspNetCore.Components.RenderFragment<>. The default value is null.
Examples

The following example demonstrates how to use the GroupTemplate property to customize the group header in the SfMultiColumnComboBox<TValue, TItem>:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList"> 
    <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> 
    <GroupTemplate> 
        @context => @<div> 
            <strong>Group Index: @context.Index</strong><br /> 
            <span>Group Data: @context.Data</span> 
        </div> 
    </GroupTemplate> 
</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() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

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 in the SfMultiColumnComboBox<TValue, TItem>. Supports two-way binding.

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

The index of the selected item. The default value is null.
Remarks

This property allows you to dynamically update the selected index of the SfMultiColumnComboBox<TValue, TItem>.
Use the @bind-Index attribute for two-way binding in your Blazor application.

Examples

The following example demonstrates how to use the Index property in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" @bind-Index="selectedIndex"> 
    <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? selectedIndex; 

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

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

IndexChanged

Gets or sets the callback to trigger when the index changes.

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

An event callback function.

InputAttributes

Gets or sets a collection of additional attributes such as disabled, value, and more that will 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 System.Collections.Generic.Dictionary<, > where the key is the attribute name and the value is the attribute value. The default value is null, which means no additional attributes are applied.
Remarks

If both this property and equivalent input attributes are configured, the component will prioritize the values specified in this property. This allows you to dynamically set additional attributes on the input element, such as disabling the element or setting its value, which may not be directly represented as parameters on the component itself.

Examples

The following example demonstrates how to set additional attributes on the input element:

<SfMultiColumnCombobox InputAttributes="@(new Dictionary<string, object> { { "disabled", true }, { "value", "Default Value" } })">
    <!-- The input element will be disabled and have a default value set --> 
</SfMultiColumnCombobox>

Localizer

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

MultiColumnEditContext

Gets or sets the edit context of dropdown base.

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

NoRecordsTemplate

Gets or sets the template design and assigns it to the popup list of the SfMultiColumnComboBox<TValue, TItem> when no data is available.

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

The template content as a Microsoft.AspNetCore.Components.RenderFragment. The default value is No records found.
Remarks

The template specified by this property will be displayed in the popup list when there are no records to show.

Examples

The following example demonstrates how to use the NoRecordsTemplate property to display a custom message when no records are found:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList"> 
    <NoRecordsTemplate> 
        <div>No products available</div> 
    </NoRecordsTemplate> 
</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() 
    { 
        ProductsList = new List<Product>(); 
    } 

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

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
Microsoft.AspNetCore.Components.EventCallback<ActionBeginEventArgs>
Remarks

This event is raised when the data in the SfMultiColumnComboBox<TValue, TItem> is fetched before from the server.

OnActionComplete

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

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

This event is raised when the data in the SfMultiColumnComboBox<TValue, TItem> is fetched after from the server.

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
Microsoft.AspNetCore.Components.EventCallback<System.Exception>
Remarks

This event is raised when the data in the SfMultiColumnComboBox<TValue, TItem> fetch request fails.

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 to be displayed in the SfMultiColumnComboBox<TValue, TItem> when no items are selected.

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

The placeholder text. The default value is String.Empty.
Examples

The following example demonstrates how to set the placeholder text in a SfMultiColumnComboBox<TValue, TItem>:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" Placeholder="Select a product"> 
    <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{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() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

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 event callback that is triggered when the popup is closed.
Remarks

This event is useful for performing actions when the popup is hidden, such as saving state or cleaning up resources.

Examples

The following example demonstrates how to handle the PopupClosed event:





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 event callback that is triggered before the dropdown popup is closed.
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.

Examples

The following example demonstrates how to handle the PopupClosing event:





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

PopupHeight

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

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

The height of the popup list. The default value is 300px. The height can be specified using various units:
Remarks

The height of the popup list is set based on the specified value. If a percentage is provided, the popup height will be relative to the height of the parent element or the SfMultiColumnComboBox<TValue, TItem> component. If pixels are provided, the height will be fixed. The default value of 300px means the popup list will be 300 pixels high.

Examples

The following example demonstrates how to set the height of the popup list using different units:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupHeight="300px"> 
    <!-- Popup list will be 300 pixels high --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupHeight="50%"> 
    <!-- Popup list height will be 50% of the parent element's height --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupHeight="auto"> 
    <!-- Popup list height will adjust based on the content --> 
</SfMultiColumnComboBox{TValue, TItem}>

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 event callback that is triggered when the popup is opened.
Remarks

This event is useful for performing actions when the popup is displayed, such as logging or modifying the popup content.

Examples

The following example demonstrates how to handle the PopupOpened event:





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 event callback that is triggered before the dropdown popup is opened.
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.

Examples

The following example demonstrates how to handle the PopupOpening event:





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

PopupWidth

Gets or sets the width of the popup list in the SfMultiColumnComboBox<TValue, TItem>.

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

The width of the popup list. The default value is 100%. The width can be specified using various units:
Remarks

The width of the popup list is set based on the specified value. If a percentage is provided, the popup width will be relative to the width of the SfMultiColumnComboBox<TValue, TItem> component. If pixels or points are provided, the width will be fixed. The default value of 100% means the popup list will take the full width of the SfMultiColumnComboBox<TValue, TItem> component.

Examples

The following example demonstrates how to set the width of the popup list using different units:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupWidth="50%"> 
    <!-- Popup list will be 50% of the SfMultiColumnComboBox{TValue, TItem} width --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupWidth="300px"> 
    <!-- Popup list will be 300 pixels wide --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupWidth="200pt"> 
    <!-- Popup list will be 200 points wide --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" PopupWidth="auto"> 
    <!-- Popup list width will adjust based on the content --> 
</SfMultiColumnComboBox{TValue, TItem}>

Query

Gets or sets the external Query that executes along with data processing.

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

A Query instance used for data fetching. The default value is null.
Remarks

The Query property allows you to customize the data fetching and processing behavior of the SfMultiColumnComboBox<TValue, TItem>.
You can use the Query class to specify various query parameters, including sorting, filtering, and pagination.

Examples

The following example demonstrates how to set the Query property in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" Query="@productQuery"> 
    <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 { 
    public class Product 
    { 
        public int? ProductID { get; set; } 
        public string ProductName { get; set; } 
        public int? SupplierID { get; set; } 
    } 

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
        productQuery = new Query().Where("ProductID", "equal", 1); 
    } 

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

ReadOnly

Gets or sets a value indicating whether the SfMultiColumnComboBox<TValue, TItem> is read-only.

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

A boolean value that indicates whether the component is read-only. If set to true, user interactions are disabled. The default value is false.
Remarks

When the component is read-only, users cannot modify the value or interact with the combobox, but they can still view the existing value. This property is useful for scenarios where you want to display data without allowing any changes.

Examples

The following example demonstrates how to set the combobox to read-only:

 

<SfMultiColumnCombobox ReadOnly="true"> 
    <!-- The combobox will be read-only and cannot be interacted with or modified --> 
</SfMultiColumnCombobox>

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 that indicates whether to show or hide the clear button in the SfMultiColumnComboBox<TValue, TItem>.

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

If true, the clear button is shown. The default value is false.
Remarks

When the clear button is visible and clicked, it will reset the following properties to null:

This allows users to quickly clear any selections made in the combobox.
Examples

The following example demonstrates how to show the clear button in the combobox:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" ShowClearButton="true"> 
    <!-- The clear button will be visible in the combobox --> 
</SfMultiColumnComboBox{TValue, TItem}>

TextField

Gets or sets the name of the column used as the text displayed for items in the SfMultiColumnComboBox<TValue, TItem> dropdown popup.

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

The name of the column to be used for displaying text for each item in the dropdown. The default value is String.Empty, which means no column is specified.
Remarks

The TextField property allows you to specify which column's data will be displayed as the text for each item in the dropdown list. This is useful for showing a meaningful text representation of each item based on a specific column from the data source.

Examples

The following example demonstrates how to set the TextField property:

 

<SfMultiColumnCombobox TextField="ItemName"> 
    <!-- The ItemName column's values will be used as the text displayed for items in the dropdown --> 
</SfMultiColumnCombobox>

Value

Gets or sets the selected item value of the SfMultiColumnComboBox<TValue, TItem> component. Supports two-way binding.

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

Represents the selected item value of the SfMultiColumnComboBox<TValue, TItem>. The default value is null.
Remarks

This property allows you to dynamically update the selected value of the SfMultiColumnComboBox<TValue, TItem>.
Use the @bind-Value attribute for two-way binding in your Blazor application.

Examples

The following example demonstrates how to use the Value property in a SfMultiColumnComboBox<TValue, TItem>:

<SfMultiColumnCombobox DataSource="@ProductsList" @bind-Value="selectedProductID"> 
    <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? selectedProductID; 

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

    protected override async Task OnInitializedAsync() 
    { 
        ProductsList = new List<Product>() 
        { 
            new Product{ProductID=1, ProductName="Chai", SupplierID=1 }, 
            new Product{ProductID=2, ProductName="Chang", SupplierID=2}, 
            new Product{ProductID=10, ProductName="Queso Manchego La Pastora", SupplierID=1} 
        }; 
    } 

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

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 event handler of type ValueChangeEventArgs<TValue, TItem> that is invoked when the value changes.
Remarks

This event is triggered when an item is selected from the popup or when the user changes the model value.

Examples

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





private void HandleValueChange(ValueChangeEventArgs 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 a callback that trigger when the value changes.

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

An event callback function.

ValueExpression

Gets or sets an expression that identifies the bound value in the SfMultiColumnComboBox<TValue, TItem> component.

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

ValueField

Gets or sets the name of the column used as the value for items displayed in the SfMultiColumnComboBox<TValue, TItem> dropdown popup.

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

The name of the column to be used as the value for the items in the dropdown. The default value is String.Empty, which means no column is specified.
Remarks

The ValueField property allows you to define which column's data will be displayed as the value for each item in the dropdown list. This is useful for mapping the displayed value to a specific column from the data source.

Examples

The following example demonstrates how to set the ValueField property:

 

<SfMultiColumnCombobox ValueField="ItemID"> 
    <!-- The ItemID column's values will be used for items in the dropdown --> 
</SfMultiColumnCombobox>

Width

Gets or sets the width of the SfMultiColumnComboBox<TValue, TItem>.

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

The width of the SfMultiColumnComboBox<TValue, TItem>. The default value is 100%. The width can be specified using various units:
Remarks

The component width is set based on the specified value. If a percentage is provided, the width will be relative to the width of the parent container. If pixels or points are provided, the width will be fixed. The default value of 100% means the component will take the full width of its parent container.

Examples

The following example demonstrates how to set the width of the SfMultiColumnComboBox<TValue, TItem> using different units:

 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" Width="50%"> 
    <!-- ComboBox will be 50% of the parent container's width --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" Width="300px"> 
    <!-- ComboBox will be 300 pixels wide --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" Width="200pt"> 
    <!-- ComboBox will be 200 points wide --> 
</SfMultiColumnComboBox{TValue, TItem}> 

<SfMultiColumnComboBox{TValue, TItem} DataSource="@ProductsList" Width="auto"> 
    <!-- ComboBox width will adjust based on the content --> 
</SfMultiColumnComboBox{TValue, TItem}>

ZIndex

Gets or sets the z-index value of the component popup element.

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

A double value representing the z-index of the popup element. The default value is 1000.
Remarks

The z-index determines the stacking order of the popup element relative to other elements on the page. A higher z-index value will position the popup above elements with a lower z-index. Adjusting this value can help ensure that the popup is displayed correctly in relation to other components or elements.

Examples

The following example demonstrates how to set the z-index for the popup element:

 

<SfMultiColumnCombobox ZIndex="2000"> 
    <!-- Sets the z-index of the popup element to 2000, placing it above other elements with a lower z-index --> 
</SfMultiColumnCombobox>

Methods

BuildRenderTree(RenderTreeBuilder)

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

FocusAsync()

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

HidePopupAsync()

Hides the popup if it is in the open state.

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

A task that represents the asynchronous operation.

ShowPopupAsync()

Opens the popup that displays the list of items.

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

A task that represents the asynchronous operation.

UpdateChildProperties(MultiColumnComboboxColumns)

Declaration
public Task UpdateChildProperties(MultiColumnComboboxColumns properties)
Parameters
Type Name Description
MultiColumnComboboxColumns properties
Returns
Type
System.Threading.Tasks.Task

UpdateMainListDataAsync()

Declaration
protected Task UpdateMainListDataAsync()
Returns
Type
System.Threading.Tasks.Task

Implements