Class SfMultiColumnComboBox<TValue, TItem>
Implements
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 |
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 |
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 |
|
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 |
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 |
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 |
Remarks
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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: |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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<ActionCompleteEventArgs<TItem>> OnActionComplete { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.EventCallback<ActionCompleteEventArgs<TItem>> |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Remarks
When the clear button is visible and clicked, it will reset the following properties to null
:
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 |
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 |
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 |
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 |
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 |
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
AddItemAsync(IEnumerable<TItem>, Nullable<Int32>)
Adds a new item to the MultiColumnCombobox popup list. By default, the new item appends to the list as the last item, but you can insert it based on the index.
Declaration
public Task AddItemAsync(IEnumerable<TItem> items, Nullable<int> itemIndex = null)
Parameters
Type | Name | Description |
---|---|---|
System.Collections.Generic.IEnumerable<TItem> | items | The items to be added. |
System.Nullable<System.Int32> | itemIndex | The index at which the items should be inserted. If null, items are appended to the end of the list. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | builder |
FilterAsync(IEnumerable<TItem>, Query)
Removes the focus from the MultiColumnCombobox if it is in the focus state.
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. |
Query | query | Optional query to filter or process the data. Defaults to null if not provided. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
FocusAsync()
Sets the focus to the MultiColumnCombobox input for interaction.
Declaration
public Task FocusAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
FocusOutAsync()
Removes the focus from the MultiColumnCombobox if it is in the focus state.
Declaration
public Task FocusOutAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
GetDataByValue(TValue)
Retrieves all field values in the record that match the given value.
Declaration
public TItem GetDataByValue(TValue multiColumnComboBoxValue)
Parameters
Type | Name | Description |
---|---|---|
TValue | multiColumnComboBoxValue | The value to match against the data source. |
Returns
Type | Description |
---|---|
TItem | The matching field value. |
GetItemsAsync()
Retrieves all the popup list items bound to this component.
Declaration
public Task<IEnumerable<TItem>> GetItemsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<TItem>> | A collection of items in the popup list. |
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(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 |