How to make In-place Editor with DropDownList Type bind to complex model?

[Brian]

Hi team,

It's common to bind objects such as:

    public class GameFields

    {

        public string Id { get; set; }

        public string Text { get; set; }

    }

to DropDownList, but the official sample of In-place Editor with DropDownList Type dosen't mention this topic. All samples of In-place Editor use simple string type. I tried to bind the GameFields object in SfInPlaceEditor tag like this:

@bind-Value="SelectedPreson.Game"  Model="GameFieldsModel"

and set model in this way:

    private SfDropDownList<int, GameFields> GameFieldsModel = new SfDropDownList<int, GameFields>

    {

        Fields = new FieldSettingsModel {Text = "Text", Value = "Id"},

        DataSource = GameFieldsList,  // prepared somewhere

        ValueTemplate = "int",

        ItemTemplate = "GameFields",

    };

but it didn't work. Could you please supply a sample to show how to make In-place Editor DropDownList bind properly with objects?

Thanks.

Best Regards.

[Brian]

I made a sample project to show my request clearly. In the sample, I hope my customers to select a hobby from the dropdown list, and I want to get the selected Personnel's Hobby Id. I have tried two ways of binding Hobby, which is a complex object rather than a single string. The first way is to bind Hobby property as a whole and Hobby.Id as returned value, but as the UI shown, the initial value on the line was "[object Object]", and when I select an option, the SelectedPersonnel.Hobby didn't change. The second way works anyway, but the initial value on the line was numeric Id, which is definitely not what I want.

Could you please help me build a correct model for this use case?

Attachment: InplaceEditorDropDownList_fdfa8863.rar

[Indrajith Srinivasan]

  

Hi Brian, 

 

Greetings from Syncfusion support, 

 

We have validated your reported queries and below are the responses for it. 

 

Query 1: “The first way is to bind Hobby property as a whole and Hobby.Id as returned value, but as the UI shown, the initial value on the line was "[object Object]", and when I select an option, the SelectedPersonnel.Hobby didn't change” 

 

We are able to reproduce the reported issue with the shared sample. The value is binded wrongly for the Inplace-editor, as @bind-Value="SelectedPersonnel.Hobby" hence it is displayed as [object, object]. The value to be binded is @bind-Value="SelectedPersonnel.Hobby.Text". Based on the FieldSettingsModel, the value is returned in the OnActionBegin event. We have also modified the sample shared. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154987/ze/SfInplace-editor_as_Object-1881745076  

 

Query 2: “The second way works anyway, but the initial value on the line was numeric Id, which is definitely not what I want.” 

 

You can choose option to be set in the Editor using the TextOption property in Inplace-editor. If the TextOption is set as TextOptionType.Always, the numeric id will not be displayed in the value. Check the above sample. 

 

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_TextOption 

 

Can you please try out the solution and let us know if you face any difficulties.

Regards, 

Indrajith 

[Brian]

Hi team,

I have experienced your modified sample. It's good, but still imperfect for some flaws:

1.The first way to bind Hobby.Text displayed right initially, but there is a bug at the time I click the dropdownlist, the original text disappeared without any option popup, unless I click twice, and if I give up the selecting action (click somewhere else), the dropdownlist becomes deactived and show a blank of course.

2.Even though I selected some option from the second click and confirmed, you can see the changed property of Hobby is Hobby.Text, but the value for it is selected Hobby.Id. It's somehow out of expectation.

3.The second way looks fine, but it didn't change the Hobby.Text simultaneously, which would cause some inconsistency (even through this issue could be resolved by hand, but not that smooth).

Maybe I am too picky, but I believe if you could make the component works as the way bellow, it would be deeply welcome:

For an object to bind, the component could display some string property smoothly (eg Hobby.Text), and after the selection, it could report another independent property (eg Hobby.Id) from OnActionBegin and substitute the two related properties (or the entire object) with the selected option (object) at the same time to keep consistency.

Could you please give me a replay for this suggestion?

Thank you so much.

[Indrajith Srinivasan]

Hi Brian,

Thanks for the update,

We are currently validating your reported queries, and will get back to you in two business days by 11th June 2020.

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Brian,

Sorry for the delayed response,

Thanks for your suggestions. We have validated your reported queries and below are the responses for it.

Query 1: “The first way to bind Hobby.Text displayed right initially, but there is a bug at the time I click the dropdownlist, the original text disappeared without any option popup, unless I click twice, and if I give up the selecting action (click somewhere else), the dropdownlist becomes deactived and show a blank of course.” 

 

Binding the value default for the Inplace-editor, will show at the initial time and if the editor mode is switched the dropdown will be shown with list of options. If any placeholder is applied for the DropDownList, then the empty space will be filled with the placeholder. Since the EmptyText property is set as empty string, the Inplace-editor is shown with blanks space. 

 

Query 2: “Even though I selected some option from the second click and confirmed, you can see the changed property of Hobby is Hobby.Text, but the value for it is selected Hobby.Id. It's somehow out of expectation.” 

 

The Inplace-editor will return the value, based on the fields mapped for the Dropdown. If it is mapped for ID the corresponding fields ID will be returned, elsewhere for the Text. 

 

 

  private SfDropDownList<Hobby, Hobby> HobbyModel_Hobby = new SfDropDownList<Hobby, Hobby> 

    { 

        Placeholder = "Select a game", 

        DataSource = new List<Hobby> 

    { 

            {new Hobby() {ID = 1, Text = "Football"}}, 

            {new Hobby() {ID = 2, Text = "Basketball"}}, 

            {new Hobby() {ID = 3, Text = "Ski"}}, 

        }, 

        Fields = new FieldSettingsModel { Text = "Text", Value = "ID" }, 

    }; 

 

Query 3: “The second way looks fine, but it didn't change the Hobby.Text simultaneously, which would cause some inconsistency (even through this issue could be resolved by hand, but not that smooth).” 

 

The TextOption property is mainly used to control the Initial value to be shown with the Inplace-editor. Based on the DropDown Fields value property, the Inplace-editor value will be returned. 

 

Regards, 

Indrajith 

[Brian]

Thanks for your reply, I will rethink about the design.

Regards.

[Indrajith Srinivasan]

Hi Brian,

Thanks for the update. Please get back to us if you need any further assistance.

Regards, 

Indrajith