RemoteDataBinding.razor

@page "/MultiColumn-ComboBox/Remote-Data-Binding"

@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Data

@*Hidden:Lines*@
@inherits SampleBaseComponent
@*End:Hidden*@

<SampleDescription>
    <p>This example demonstrates the remote data binding capabilities of the MultiColumn ComboBox. Select an item from the suggestion list by interacting with the component. Upon initial selection, a loading icon appears while the data is retrieved from the server.</p>
</SampleDescription>
<ActionDescription>
    <p>
        The MultiColumn ComboBox can load data from either local sources or remote services using the <a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.IDropDownBase-1.html#Syncfusion_Blazor_DropDowns_IDropDownBase_1_DataSource" target="_blank" aria-label="Class reference of DataSource property in DropDownList">DataSource</a> property. Supported data types include <code>Array</code>, <code>ObservableCollection</code>, <code>ExpandoObject</code>, <code>DynamicObject</code>, and <code>DataManager</code>.
    </p>
    <p>
        The <a href="https://blazor.syncfusion.com/documentation/data/getting-started" target="_blank" aria-label="Blazor DataManager Getting Started documentation">DataManager</a> acts as an intermediary between the service endpoint and the MultiColumn ComboBox, requiring minimal setup to connect effectively.
    </p>
    <ul>
        <li><a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url" target="_blank" aria-label="Class reference of Url property in DataManager">DataManager.Url</a> - Specifies the service endpoint for data retrieval.</li>
        <li>
            <p>
                <a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor" target="_blank" aria-label="Class reference of Adaptor property in DataManager">DataManager.Adaptor</a> - Determines the adaptor used, with <code>ODataAdaptor</code> as the default for remote binding.
                <a href="https://www.nuget.org/packages/Syncfusion.Blazor.Data/" target="_blank" aria-label="NuGet package for Syncfusion Blazor Data">Syncfusion.Blazor.Data</a> provides various adaptors, including:
            </p>
            <ul>
                <li><code>UrlAdaptor</code> - For generic remote services.</li>
                <li><code>ODataAdaptor</code> - For OData endpoints.</li>
                <li><code>ODataV4Adaptor</code> - For OData V4 endpoints.</li>
                <li><code>WebApiAdaptor</code> - For Web APIs adhering to OData standards.</li>
                <li><code>WebMethodAdaptor</code> - For interacting with web methods.</li>
            </ul>
        </li>
    </ul>
    <p>The example below demonstrates the MultiColumn ComboBox bound to a customer data collection using <code>DataManager</code>.</p>
    <p><b>See also</b></p>
    <ul>
        <li><a href="https://blazor.syncfusion.com/documentation/multicolumn-combobox/data-binding/" target="_blank">Blazor MultiColumn ComboBox - Data Binding</a></li>
        <li><a href="https://blazor.syncfusion.com/documentation/data/getting-started" target="_blank">Blazor Data Manager</a></li>
    </ul>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <label class="example-label">Select an employee</label>
        <SfMultiColumnComboBox TItem="EmployeeData" TValue="string" PopupHeight="200px" Query="RemoteQuery" @bind-Value="@EmployeeValue" ValueField="EmployeeID" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
            <SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Employees" Offline="true" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
        </SfMultiColumnComboBox>
    </div>
</div>

@code {
    public string EmployeeValue { get; set; } = "Andrew";

    public Query RemoteQuery = new Query().Take(30);

    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string? FirstName { get; set; }
        public string? LastName { get; set; }
        public string? Country { get; set; }
    }
}

<style>
    .control-wrapper {
        max-width: 250px;
        margin: 0 auto;
        padding: 50px 0px 0px;
    }

    .example-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
</style>