Blazor Dropdown Multiple Select Model - creates unhandled exception when selecting items

ty.brown · July 9, 2020, 2:26pm

I'm new to Blazor and I want to use the Multiple Select Dropdown - I can get the dropdown to load but as soon as I select an item I get " An unhandled exception has occurred. See browser dev tools for details." message
Detailed:
System.InvalidCastException: Unable to cast object of type 'System.Linq.EnumerableQuery1[System.Nullable1[System.Int32]]' to type 'System.Collections.Generic.IEnumerable1[System.String]'. at Radzen.DropDownBase1.SelectItem(Object item, Boolean raiseChange)
at Radzen.Blazor.RadzenDropDown`1.OnSelectItem(Object item)
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

I've tried setting the TValue but still having issues.

Control:
<RadzenDropDown TValue="IEnumerable" Multiple="true" Placeholder="Select..." Data="@DealerList" TextProperty="Dealername" ValueProperty="Dealerid" Change="@(args => Change(args, "DropDown with multiple selection"))" />

Model: ViewDealers
namespace web_pineview.Models
{
public class ViewDealerList
{
public ViewDealerList[] ViewDealer { get; set; }
}
public class ViewDealer
{
public int? Dealerid { get; set; }
public string Dealername { get; set; }
}
}

ty.brown · July 9, 2020, 2:30pm

Added @bind-Value: <RadzenDropDown TValue="IEnumerable" Multiple="true" Placeholder="Select..." @bind-Value="multipleValues" Data="@DealerList" TextProperty="Dealername" ValueProperty="Dealerid" Change="@(args => Change(args, "DropDown with multiple selection"))" />

no difference

enchev · July 9, 2020, 2:46pm

Should be IEnumerable<YourValuePropertyType>

ty.brown · July 9, 2020, 2:54pm

If I change to IEnumerable or just int - which matches the value type - I get the compile error: Severity Code Description Project File Line Suppression State
Error CS1662 Cannot convert lambda expression to intended delegate type because some of the return types in the block are not implicitly convertible to the delegate return type web_pineview C:\Pineview\PineviewERPDevelopmentRepo\web_pineview\obj\Debug\netcoreapp3.1\Razor\Pages\Index.razor.g.cs 234 Active

enchev · July 9, 2020, 2:57pm

You cannot bind multiple int values to an int property.

ty.brown · July 9, 2020, 3:10pm

OK - I couple of things and still same results

I did change the value to dealername which is a string to: <RadzenDropDown TValue="IEnumerable " Multiple="true" Placeholder="Select..." @bind-Value="multipleValues" Data="@Dealers" TextProperty="Dealername" ValueProperty="Dealerid" Change="@(args => Change(args, "DropDown with multiple selection"))" />

same result - control loads but as soon as I click on an item > An unhandled exception has occurred. See browser dev tools for details

ty.brown · July 9, 2020, 3:11pm

Wrong pasted - <RadzenDropDown TValue="IEnumerable ''" Multiple="true" Placeholder="Select..." @bind-Value="multipleValues" Data="@Dealers" TextProperty="Dealername" ValueProperty="Dealername" Change="@(args => Change(args, "DropDown with multiple selection"))" />

ty.brown · July 9, 2020, 3:17pm

Ok - I did a clean and rebuild and it works if I use the text value (dealername) - the issue is I need the dealerid which is an int - its an int in the database and model - do you know how I might cast or convert so the value is an int?

enchev · July 9, 2020, 3:20pm

Again, the property multipleValues should be IEnumerable of your ValueProperty type. If the ValueProperty is int you will need to declare multipleValues to be IEnumerable<int>:

IEnumerable<int> multipleValues;

ty.brown · July 9, 2020, 3:41pm

I appreciate your patience - the same issue - anyway I try it with an int as the value - I get the runtime issue - it works when its a string

Control: (dealerid is an int)
<RadzenDropDown TValue="IEnumerable< int >" Multiple="true" Placeholder="Select..." @bind-Value="multipleValues" Data="@Dealers" TextProperty="Dealername" ValueProperty="Dealerid" Change="@(args => Change(args, "DropDown with multiple selection"))" />

Code:
IEnumerable< int > multipleValues;
void Change(object value, string name)
{
var str = value is IEnumerable ? string.Join(", ", (IEnumerable)value) : value;

    StateHasChanged();
}

korchev · July 9, 2020, 4:19pm

@ty.brown, this forum supports markdown. Please format your code snippets by wrapping them inside ``` blocks.

ty.brown · July 9, 2020, 5:49pm

POSTED CODE FORMATED
*I'm calling a PostGreSQL VIEW via API CORE 3.1 Entity Frame Work - Has not Key

Blazor to Class to API

MODEL:
namespace web_pineview.Models
{
public class ViewDealerList
{
public ViewDealerList[] ViewDealer { get; set; }
}
public class ViewDealer
{
public int? Dealerid { get; set; }
public string Dealername { get; set; }
}
}

CONTROL:
<RadzenDropDown TValue="IEnumerable<int>" Multiple="true" Placeholder="Select..." @bind-Value="multipleValues" Data="@Dealers" TextProperty="Dealername" ValueProperty="Dealerid" Change="@(args => Change(args, "DropDown with multiple selection"))" />

CODE:
IEnumerable<ViewDealer> Dealers;
IEnumerable<int> multipleValues;

protected override async Task OnInitializedAsync()
    {
        var client = _clientFactory.CreateClient("ExternalAPIPVB");
        var user = (await authenticationStateTask).User;

        try
        {
            Dealers = await _APIPineviewService.GetViewDealerAsync(user.Identity.Name);
            errorString = null;
        }
        catch (Exception ex)
        {
            errorString = $"There was an error getting data from API: { ex.Message }";
        }
    }


void Change(object value, string name)
        {
            var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;

            StateHasChanged();
        }

ty.brown · July 10, 2020, 2:58pm

I have continued to try and resolve with no real resolve, I have tried different controls and found the RadzenDropDownDatagrid with multiple select works as expected, however, the RadzenListbox control with multiple select has the same issue.

<RadzenListBox AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                                           @bind-Value="multipleValues" Multiple="true"
                                           Data="@Dealers" TextProperty="Dealername" ValueProperty="Dealerid"
                                           Change="@(args => Change(args, "ListBox with multiple selection"))" Style="Width:400px;height:200px;" />

korchev · July 10, 2020, 6:22pm

We will need a complete example which reproduces the problem.

ADefWebserver · October 10, 2020, 3:50pm

This works:

BlazorSimpleSurvey/DisplaySurvey.razor at master · ADefWebserver/BlazorSimpleSurvey (github.com)

public class DTOSurvey
{
    public int Id { get; set; }
    public string SurveyName { get; set; }
    public DateTime DateCreated { get; set; }
    public DateTime? DateUpdated { get; set; }
    public int UserId { get; set; }
    public List<DTOSurveyItem> SurveyItem { get; set; }
}
public class DTOSurveyItem
{
    public int Id { get; set; }
    public string ItemLabel { get; set; }
    public string ItemType { get; set; }
    public string ItemValue { get; set; }
    public int Position { get; set; }
    public int Required { get; set; }
    public int? SurveyChoiceId { get; set; }             
    public string AnswerValueString { get; set; }
    public IEnumerable<string> AnswerValueList { get; set; }
    public DateTime? AnswerValueDateTime { get; set; }
    public List<DTOSurveyItemOption> SurveyItemOption { get; set; }
}
public partial class DTOSurveyItemOption
{
    public int Id { get; set; }
    public string OptionLabel { get; set; }
}

                                <RadzenDropDown Name="@SurveyItem.Id.ToString()"
                                            TValue="IEnumerable<string>"
                                            Multiple="true"
                                            AllowClear="true"
                                            AllowFiltering="true"
                                            @bind-Value="SurveyItem.AnswerValueList"
                                            Placeholder="Select..."
                                            Data="@SurveyItem.SurveyItemOption"
                                            TextProperty="OptionLabel"
                                            ValueProperty="OptionLabel"
                                            Style="width:400px;" />

BoyDido · December 6, 2020, 2:59pm

I see that this problem in not solved yet.
I'm having the same kind of problem. I have a listboxmultiselection and i want to bring the chosen option (string Name of object) in a textarea. But i'm not succeding in doing that. Can you help me out please?

ScenarioListNew is a IEnumerable

Here is my html code:

>    <div>

                            <div style="float: left; width: 50%; padding: 0; margin: 0;">
                                <div style="margin-bottom: 0px">
                                    <RadzenLabel for="ScenariosListBox" Text="Scenarios" Style="margin-top: 5px"></RadzenLabel>
                                </div>
                                <div style="margin:auto; width:75%">
                                    <RadzenListBox id="ScenariosListBox" AllowFiltering="true"  FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="ScenarioListNew" Multiple="true" Data=@ScenarioDtoList TValue="IEnumerable<string>"
                                                  TextProperty="Name" ValueProperty="Id"  Change=@(args => OnChange2(args, "ListBox with multiple selection")) Style="height:200px" />
                                </div>
                            </div>
                            <div style="float: right; width: 50%; padding: 0; margin: 0; padding-top:25px">
                                <div>
                                    <RadzenTextArea Disabled="true" @bind-Value=@str Style="height:200px" Name="TextAreaScenarios" Placeholder="Scenarios..." />
                                </div>
                            </div>
                        </div>

The code in the razor page:

string str;
        void OnChange2(object value, string name)
        {

            var str = (value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value).ToString();
            StateHasChanged();
        }

The error i'm getting when building is:

Error: System.InvalidCastException: Unable to cast object of type 'System.Linq.EnumerableQuery1[System.Int32]' to type 'System.Collections.Generic.IEnumerable1[System.String]'.

at Radzen.DropDownBase`1.SelectItem(Object item, Boolean raiseChange)

at Radzen.Blazor.RadzenListBox`1.<>c__DisplayClass0_0.<b__6>d.MoveNext()

--- End of stack trace from previous location where exception was thrown ---

Thank you for your help.

ADefWebserver · December 6, 2020, 4:31pm

@BoyDido - In your ScenarioListNew collection, is the Id property an integer or a string? For your code to work it needs to be a string.

alberto.ramirez · July 31, 2024, 10:29am

Thanks for your contribution.