DropDown did not show binded value

[Alexander Kuhlmann]

Hello, 

I use a DropDownList in my project, but the binded Value is not shown after loading the page.
But If I select an Item from the list, the selected Item is shown.

here is my small example:
I have these classes:
public class Person{

    public Information Info {get;set;}

}
public class Information{

    public string Name {get;set;}

}

Now here is the use of the Component:

    <SfDropDownList @bind-Value="SelectedPerson" TValue=" Person " TItem=" Person " DataSource="ListOfPersons" PopupHeight="350px">

        <DropDownListFieldSettings Text="Info.Name"></DropDownListFieldSettings>

    </SfDropDownList>

If SelectedPerson has a Value at the beginning nothing is shown in the DropDown. After selection an item the correct object is stored in SelectedPerson.

On another point I use the MultiSelect Component with the same structure, and here everything works fine.

    <SfMultiSelect @bind-Value="selectedPersons" TValue="List<Person>" TItem="Person" Mode="@VisualMode.CheckBox" DataSource="ListOfPersons" PopupHeight="350px">

        <MultiSelectFieldSettings Text="User.Name"></MultiSelectFieldSettings>

    </SfMultiSelect>

Are I am missing something?

[Priyanka Karthikeyan]

 

Hi Alexander Kuhlmann

 

Thank you for reaching out us!

 

We have carefully reviewed the code snippet you shared and created a sample that demonstrates the functionality of the DropDownList component. In our sample, selecting a value and pre-selecting a value both work as expected, and the binding is handled correctly. To assist you further, we have attached the sample and a video illustration for your reference:

 

Sample: https://blazorplayground.syncfusion.com/rZheDCNwpLJdepuV

 

To better assist you, we kindly request that you share a sample application where the issue is reproducible, along with detailed steps to replicate the behavior. This information will help us identify the root cause and offer you a prompt and accurate solution.

 

We appreciate your cooperation and look forward to resolving this for you!

 

Regards,

Priyanka K

[Alexander Kuhlmann]

Hi Priyanka, 

thank you for your answer.
You are right, this small example seems to work as expected.

I am not shure what cases the problem in my project. The only difference should be the complexity of my datamodel, but I did not know why this should be the problem. And my data is loaded from a Database via EF Core, but when it comes to the UI Component this is already done.

So I have no idea how to create a "small" example for you, without sending you the whole project...

But I found another behaviour, maybe this is a hint:
I just can open the Dropdown once, after selecting an entry, this entry is stored in the bounded variable and the Popup of the Dropdown get closed. But after that the popup did not open any more...

And If I enter the page with the DropDownList I see these Exceptions in my VisualStudio Output Console:

Exception thrown: 'System.Text.Json.JsonException' in System.Text.Json.dll

Exception thrown: 'System.Text.Json.JsonException' in System.Text.Json.dll

Exception thrown: 'System.Text.Json.JsonException' in System.Private.CoreLib.dll

I hope this gives you some information.

Regards, Alex

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,

Thank you for the update. We understand the importance of the issue you are facing and are committed to assisting you. To better understand and resolve the problem, could you please provide the following details?

1. Dummy Data: Share a sample of the data you are loading from the database.
2. Binding Information: Provide details on how you are binding the value to the selectedPerson variable.

Additionally, we recommend ensuring that the TValue property is set as string instead of the class name Person. This approach may help resolve the issue. Once we have the requested details, we will test with the dummy data and provide you with a solution promptly.

Thank you for your understanding and cooperation.

Regards,

Priyanka K

[Alexander Kuhlmann]

Hi Priyanka,

I try to give you a sample more close to my real project, without sending you the whole project:

This is my class structure:

    public class MShareholder

    {

        [Key]

        public int Id { get; set; }

        public MUser? User { get; set; }

    }

    public class MUser

    {

        [Key]

        public int Id { get; set; }

        public string Name { get; set; } = string.Empty;

        public MShareholder? Shareholder { get; set; }

    }

    public class MInternalOffsetting

    {

        [Key]

        public int Id { get; set; } = 0;

        public MShareholder Receiver { get; set; }

        public List<MShareholder> Sender { get; set; }

    }

And this is the Blazor component to edit the InternalOffsetting:

    <p>Receiver</p>

    <SfDropDownList @bind-Value="internalOffsetting.Receiver" TValue="MShareholder" TItem="MShareholder" DataSource="shareholders" PopupHeight="350px">

        <DropDownListFieldSettings Text="User.Name"></DropDownListFieldSettings>

    </SfDropDownList>

    <p>Sender</p>

    <SfMultiSelect @bind-Value="internalOffsetting.Sender" TValue="List<MShareholder>" TItem="MShareholder" Mode="@VisualMode.CheckBox" DataSource="shareholders" PopupHeight="350px">

        <MultiSelectFieldSettings Text="User.Name"></MultiSelectFieldSettings>

    </SfMultiSelect>

And here is he code part:

        private MInternalOffsetting? internalOffsetting = null;

        private List<MShareholder> shareholders = [];

        protected override async Task OnInitializedAsync()

        {

                    internalOffsetting = await OffsettingService.GetOffsettingByID(OffsettingID);

     shareholders = await OffsettingService.GetAllShareholder();

            StateHasChanged();

        }

In this configuration the SfMultiSelect works as expected an it shows the elements of the Sender List, direct from the beginning. But the SfDropDownList did not, but it is configured in an identical way.

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,

 

Thank you for sharing the code snippet. Based on the provided details, we have created a sample replicating your scenario. Upon testing, we noticed that the preselected value does not appear in the dropdown list, which we believe is the issue you are encountering. Could you please confirm if this aligns with the issue you are facing?

Additionally, we did not encounter any exceptions during our testing. If there are specific steps or conditions that lead to an exception on your end, kindly share those details to help us investigate further.

For your reference, we have attached the sample we created:
https://blazorplayground.syncfusion.com/BtByjiWpKnQbsMxE

We look forward to your confirmation and additional details to assist you further.

 

Regards,

Priyanka K

 

[Alexander Kuhlmann]

Hi Priyanka, 

yes, one of the issues is, that the preselected value did not appear in the dropdown.

And the other issue was: after selecting one item in the dropdown, the drip down did not open its popup any more.

But for my project I found a workaround:

1. I did not use two way binding any more
2. I just set the preselected value with "Value="
3. I changed the "TValue" to string
4. I use the "ValueChange=" event to set the choosen value to the variable

For me this feels like a unnecessary way, but for me it solves the issues and I can use the DropDown component.

Best regards Alex

[Priyanka Karthikeyan]

Hi Alexander Kuhlmann,

 

Thank you for your update and continued patience regarding the issue you're experiencing with the DropDownList component. We truly appreciate your understanding and cooperation in resolving this matter.

 

We've carefully analyzed the problem you've described, the issue is likely due to a mismatch between the type of the Value property in the DropDownList and the actual type of the internalOffsetting.Receiver.

 

We're pleased to offer a solution that should resolve this issue. Here's an updated version of the code that addresses the problem:

 

​<SfDropDownList @bind-Value="internalOffsetting.Receiver.Id"
                TValue="int"
                TItem="MShareholder"
                DataSource="shareholders"
                Placeholder="Select Receiver"
                PopupHeight="350px">
    <DropDownListFieldSettings Text="User.Name" Value="Id"></DropDownListFieldSettings>
</SfDropDownList>

 

Sample: https://blazorplayground.syncfusion.com/BthItWhMTvadpaMX

 

We've also tested the popup functionality, and we can confirm that it opens properly on our end after selecting an item in the dropdown. To provide you with a clearer understanding, we've prepared a video illustration demonstrating this behavior.

 

We kindly request that you implement these changes and test the functionality. If you find that you're still encountering issues after making these modifications, we're more than happy to assist you further. In that case, we would greatly appreciate if you could share:

 

• An issue-reproducing sample
• Detailed steps to replicate the issue

This additional information will help us provide even better assistance and ensure we fully resolve any remaining concerns.

 

Thank you once again for your patience and cooperation.

 

Regards,

Priyanka K