Does MultiColumnComboBox support remote data binding with a DataManager

[Paul]

Hello,

I have the code snippet below but I get error: 

<SfMultiColumnComboBox TItem="ProductLookupForSales" TValue="int?"

                       @bind-Value="sal.ProductId"

                       DataSource="@ProductDataManager"

                       Query="@ProductDataQuery"

                       AllowFiltering="true"

                       OnActionBegin="OnActionBeginHandler"

                       ValueField="Id"

                       TextField="ProductCode"

                       Placeholder="Please select">

    <MultiColumnComboBoxColumns>

        <MultiColumnComboBoxColumn Field="ProductCode" Header="Product Ref" Width="100" />

        <MultiColumnComboBoxColumn Field="ProductName" Header="Product Name" Width="200" />

        <MultiColumnComboBoxColumn Field="SalesPrice" Format="n2" Header="Unit Price" Width="90" TextAlign="TextAlign.Right" />

        <MultiColumnComboBoxColumn Field="InStock" Header="In Stock" Format="n2" TextAlign="TextAlign.Right" Width="90" />

    </MultiColumnComboBoxColumns>

</SfMultiColumnComboBox>

@code {

    public DataManager ProductDataManager { get; set; } = new DataManager

    {

        Url = ProductLookupUri,

        Adaptor = Adaptors.WebApiAdaptor,

        CrossDomain = true

    };

    public Query ProductDataQuery { get; set; } = new Query()

        .Select(new[] { "Id", "ProductCode", "ProductName", "SalesPrice", "InStock" })

        .Take(6)

        .RequiresCount();

}

The compilererror: 

Argument 1: cannot convert from 'Syncfusion.Blazor.DataManager' to 'System.Collections.Generic.IEnumerable<SmartAccounts.Lookups.ProductLookupForSales>'

Is there something I am doing wrong or what I am trying to do is not supported.

Thanks for assistance

Regards,

Paul Aziz

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hello Paul Aziz,

Thank you for reaching out. The error you’re experiencing is due to a mismatch between the expected data type for the DataSource property and the value being assigned. The SfMultiColumnComboBox component expects an IEnumerable<T> collection for its DataSource, but you are currently assigning a DataManager instance, which is not directly compatible.

To bind remote data using DataManager, remove the DataSource property and instead configure the SfDataManager within the component markup, like this:

<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/orders"

               CrossDomain="true"

               Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor">

</SfDataManager>

 

• Url: The endpoint of the remote API.
• CrossDomain: Enables cross-origin requests.
• Adaptor: Specifies how to communicate with the API (e.g., WebApiAdaptor, ODataAdaptor).

Use the Query property to fetch data from the database and bind it to the MultiColumnComboBox:

public Query RemoteDataQuery = new Query().Select(new List<string> { "OrderID", "CustomerID", "ShipCity", "Freight" }).Take(6).RequiresCount();

 

You can refer to this sample for more details: Syncfusion Playground Sample

 

Regards,

K N Siddartha.

[Paul]

Hello 

K N Siddartha.

Thanks for the assistance.

 I have since implemented your suggestions and it works fine. 

I need to implement multicolumn filtering so I followed Synfusion documentations to implement custom filtering using FilterAsync method of SfMulticolumnComboBox. FilterAsync requires two parameters namely datasource and query but Remoten data binding does not use datasource so I tried:  awaitProductComboRef.FilterAsync(ProductComboRef.DataSource, query)

But it throws the error below in the console. 

Beging data fetching: Syncfusion.Blazor.Data.Query

blazor.webassembly.js:1 System.ArgumentNullException: Value cannot be null. (Parameter 'source')

blazor.webassembly.js:1 at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)

blazor.webassembly.js:1 at System.Linq.Enumerable.Cast[ProductLookupForSales](IEnumerable source)

blazor.webassembly.js:1 at Syncfusion.Blazor.Data.BlazorAdaptor.<ProcessResponse>d__8`1[[SmartAccounts.Lookups.ProductLookupForSales, SmartAccounts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

blazor.webassembly.js:1 at Syncfusion.Blazor.DataManager.<ExecuteQuery>d__156`1[[SmartAccounts.Lookups.ProductLookupForSales, SmartAccounts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

blazor.webassembly.js:1 at Syncfusion.Blazor.DataManager.<ExecuteQuery>d__154`1[[SmartAccounts.Lookups.ProductLookupForSales, SmartAccounts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

blazor.webassembly.js:1 at Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox`2.<SetGridDataAsync>d__247[[System.Nullable`1[[System.Int32, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[SmartAccounts.Lookups.ProductLookupForSales, SmartAccounts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

Please help. I have been trying to implement multicolumn filtering for weeks without success.

Regards,

Paul Aziz

[Priyanka Karthikeyan]

Hi Paul,

 

Thank you for your patience. We have investigated the multicolumn ComboBox filtering issue and identified that the RequiresCount parameter was missing in the sample code. This omission is causing an exception at the source level within the SetGridDataSource method. To resolve this, please ensure that the query is correctly passed inside the CustomFiltering method. Kindly refer to the updated code snippet and sample provided below for your reference:

 

​async Task CustomFiltering(Syncfusion.Blazor.MultiColumnComboBox.FilteringEventArgs args)
{
     args.PreventDefaultAction = true;

     if (string.IsNullOrEmpty(args.Text))
     {
         await MultiColumnObj.FilterAsync(new List<Orders>());
         return;
     }

     var predicate = new List<WhereFilter>
{
     new WhereFilter { Condition = "or", Field = "CustomerID", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true },
     new WhereFilter { Condition = "or", Field = "ShipCountry", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }
};

     var query = new Query().Where(WhereFilter.Or(predicate)).RequiresCount();

     await MultiColumnObj.FilterAsync(MultiColumnObj.DataSource, query);
}

 

Please let us know if you need any further assistance or clarification.

 

 

Regards,

Priyanka K

[Priyanka Karthikeyan]

Hi Paul,

Please find the sample attached below for your reference.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiColumnComboBox

Regards,

Priyanka K

[Paul]

Hello Priyanka,

Thanks for assistance. 

I will apply your solution and get back to you with the feedback as soon as possible.

I am very grateful for your help

Regards,

Paul Aziz 

[Shereen Shajahan]

Hi Paul,

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen

[Paul]

Hi Priyanka,

Your solution worked like magic. 

I am eternally grateful for assistance. In fact, words cannot express my appreciation. 

Thanks so much.

Best regards,

Paul Aziz

[Priyanka Karthikeyan]

Hi Paul,

Thank you for the update. We are glad to hear that the issue has been resolved on your end. Please feel free to reach out to us if you need any further assistance.

 

Regards,

Priyanka K