Setting selected value from code with dynamic data with MultiColumnComboBox

[Victor]

Hi,

 

When defining the selected value from code with a dynamically populated list (autocomplete that feeds itself as you type), defining the bound value from code does not update the rendering, regardless of calling StateAsChanged, Rebind or Refresh.

The value is properly set but the text-field is not updated from the defined TextField property, and i know for sure that the matching item is inside the Data list.

Is this a known limitation ? is there working example of such setup ?

[Dimo]

Hi Victor,

Can you please show me the ComboBox configuration and the logic, which populates the component? Normally, the described scenario suggests the use of virtualization and filtering.

[Victor]

Here is a trimmed version of the code:

Note that there is a grid in this page and that's what OnCloneCommand is bound to.

The idea is that the user has an icon on the grid to clone some data into a form, but even tho the binding is correct with this the display is wrong and the component visual is never updated

<TelerikMultiColumnComboBox Data="@_items"
                            @bind-Value="@_form.ObjectId"
                            ItemHeight="30"
                            PageSize="20"
                            ScrollMode="@DropDownScrollMode.Virtual"
                            Width="100%"
                            FillMode="flat"
                            TextField="@nameof(MyCustomObject.Name)"
                            ValueField="@nameof(MyCustomObject.Id)"
                            Filterable="true"
                            FilterOperator="@StringFilterOperator.Contains"
                            OnRead="@OnReadHandler"
                            Placeholder="Start typing to find your product...">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(MyCustomObject.Isin)" />
        <MultiColumnComboBoxColumn Field="@nameof(MyCustomObject.Name)" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

@code {

    private string? _inputField;
    private List<MyCustomObject> _items = [];
    private CreateMyCustomObjectForm _form = new ();

    private async Task OnReadHandler(MultiColumnComboBoxReadEventArgs args)
    {
        var filter = args.Request.Filters.FirstOrDefault() as Telerik.DataSource.FilterDescriptor;
        var userInput = filter?.Value.ToString();

        if (userInput != null && userInput.Length >= 3 && userInput != _inputField)
        {
            var data = await _api.FetchData(new FilteringQuery
            {
                PageNumber = 1,
                PageSize = 20,
                Like = userInput
            });
            args.Data = data;
            _items.Clear();
            _items.AddRange(data);
        }

        _inputField = userInput;
    }

    private async Task OnCloneCommand(GridCommandEventArgs args)
    {
        var obj = (MyCustomObject)args.Item;

        // need to feed the local product so we have proper display resolution
        var data = await _api.FetchData(new FilteringQuery
        {
            PageNumber = 1,
            PageSize = 20,
            Ids = [obj.Product.Id]
        });
        _structuredProducts.Clear();
        _structuredProducts.AddRange(data);

        _form.FeedFrom(obj);

        StateHasChanged();
    }
}

[Yanislav]

Hello Victor, 

Correct me if I’ve misunderstood, but based on the provided code it seems to me that the `FeedForm` method is modifying the `_form` object and updating its `ObjectId` field. Is that correct?

Also, there is an item in the MultiColumnComboBox data whose ObjectId matches that value?

Since virtualization is enabled, what I can suggest for now is to try implementing a ValueMapper. This parameter allows you to provide a function that the component will call to retrieve the data item that matches its value when that item is not part of the currently loaded data segment. You can read more about it here: https://www.telerik.com/blazor-ui/documentation/components/combobox/virtualization#basics

Other than that, the implementation looks fine to me, and I wasn’t able to spot anything problematic. I tried to reproduce the issue, but it appears to work as expected. Could you please review the example and modify it so that the problem becomes reproducible and send it back to us?

This will help us determine whether the behavior is a bug or expected, and allow us to suggest the most appropriate solution.