1. Home
  2. Forum
  3. Blazor
  4. How do I bind SfInPlaceEditor: Type="InputType.MultiSelect" to a Complex Object type

How do I bind SfInPlaceEditor: Type="InputType.MultiSelect" to a Complex Object type

I want to use the SfInPlaceEditor of Type="InputType.MultiSelect".

I have a use case where I want the MultiSelectModel.DataSource property to be a complex type, so I am setting the Fields property to map the Text and Value from aforementioned complex type. 

The SfInPlaceEditor object is rendering having not mapped- as in, just displaying the Value property. However, after I click on the object on the screen, it re-renders and displays the Text property.



@page "/"
@using Syncfusion.Blazor.Grids;
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.DropDowns
@using ResourceManager.Shared.Models
@using Microsoft.AspNetCore.Authorization



    <SfInPlaceEditor Mode="RenderMode.Inline" Type="InputType.MultiSelect" @bind-Value="@SelectedContacts" SubmitOnEnter="true" Model="@MultiModel" TValue="string[]">
        <InPlaceEditorEvents TValue="ContactTypeRef"></InPlaceEditorEvents>
    </SfInPlaceEditor>


@code {


    public MultiSelectModel<string[]> MultiModel = new MultiSelectModel<string[]>
    {
        // set fields
        Fields = new FieldSettingsModel
        {
            Text = "Name",
            Value = "ContactTypeRefId"
        },

        // set datasource
        DataSource = new List<ContactTypeRef>
            {

            new ContactTypeRef
            {
                ContactTypeRefId = Guid.Parse("B6FD2C8C-E77F-4E52-BB0E-37F7B6450EFB"), Name = "Foo"
            },
            new ContactTypeRef
            {
                ContactTypeRefId = Guid.Parse("CD4BB158-4676-4D43-BD99-4A86DE88BFA6"), Name = "Bar"
            }
        }
    };

    public string[] SelectedContacts { get; set; } = { "B6FD2C8C-E77F-4E52-BB0E-37F7B6450EFB".ToLower() };

}



5 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team July 9, 2020 12:42 PM UTC

Hi Haywood,

Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can bind complex object type data to the Inplace-editor with MultiSelect mode. We have also prepared a sample that tries to meet your requirements. 
 
 
<SfInPlaceEditor Mode="RenderMode.Inline" TValue="string[]" Type="InputType.MultiSelect" Value="@MultiValue" SubmitOnEnter="true" Model="@MultiModel"></SfInPlaceEditor> 
 
@code { 
    public string[] MultiValue = new string[] { "Android" }; 
 
    public MultiSelectModel<string> MultiModel = new MultiSelectModel<string>() 
    { 
        DataSource = new List<Complex>() { 
            new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } }, 
            new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } }, 
            new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } }, 
            new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } }, 
            new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } }, 
            new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } } 
        }, 
        Fields = new FieldSettingsModel { Text = "Country.CountryID", Value = "Code.ID" } 
    }; 
     
    public class Code 
    { 
        public string ID { get; set; } 
    } 
 
    public class Country 
    { 
        public string CountryID { get; set; } 
    } 
    public class Complex 
    { 
        public Country Country { get; set; } 
        public Code Code { get; set; }         
    } 
} 
 
 
Please let us know if the solution helps,

Regards,
Indrajith 


Marked as answer
HA Haywood replied to Indrajith Srinivasan July 9, 2020 01:13 PM UTC

Hi Haywood,

Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can bind complex object type data to the Inplace-editor with MultiSelect mode. We have also prepared a sample that tries to meet your requirements. 
 
 
<SfInPlaceEditor Mode="RenderMode.Inline" TValue="string[]" Type="InputType.MultiSelect" Value="@MultiValue" SubmitOnEnter="true" Model="@MultiModel"></SfInPlaceEditor> 
 
@code { 
    public string[] MultiValue = new string[] { "Android" }; 
 
    public MultiSelectModel<string> MultiModel = new MultiSelectModel<string>() 
    { 
        DataSource = new List<Complex>() { 
            new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } }, 
            new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } }, 
            new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } }, 
            new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } }, 
            new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } }, 
            new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } } 
        }, 
        Fields = new FieldSettingsModel { Text = "Country.CountryID", Value = "Code.ID" } 
    }; 
     
    public class Code 
    { 
        public string ID { get; set; } 
    } 
 
    public class Country 
    { 
        public string CountryID { get; set; } 
    } 
    public class Complex 
    { 
        public Country Country { get; set; } 
        public Code Code { get; set; }         
    } 
} 
 
 
Please let us know if the solution helps,

Regards,
Indrajith 


Thank you. 

The additional requirement I have is that the Multiselect render with actual stored user data, not just a placeholder.



<SfInPlaceEditor Mode="RenderMode.Inline" TValue="string[]" Type="InputType.MultiSelect" Value="@MultiValue" SubmitOnEnter="true" Model="@MultiModel"></SfInPlaceEditor> 
 
@code { 
    public string[] MultiValue = new string[] { "AU", "BM" }; 
 
    public MultiSelectModel<string> MultiModel = new MultiSelectModel<string>() 
    { 
        DataSource = new List<Complex>() { 
            new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } }, 
            new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } }, 
            new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } }, 
            new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } }, 
            new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } }, 
            new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } } 
        }, 
        Fields = new FieldSettingsModel { Text = "Country.CountryID", Value = "Code.ID" } 
    }; 
     
    public class Code 
    { 
        public string ID { get; set; } 
    } 
 
    public class Country 
    { 
        public string CountryID { get; set; } 
    } 
    public class Complex 
    { 
        public Country Country { get; set; } 
        public Code Code { get; set; }         
    } 
} 

IS Indrajith Srinivasan Syncfusion Team July 10, 2020 08:09 AM UTC

Hi Haywood, 
 
Thanks for the update, 
 
We have validated your reported query. In SfInplaceEditor define the TextOption as Always to show the data initially. Refer the below code blocks for reference. 
 
 
@using Syncfusion.Blazor.InPlaceEditor 
@using Syncfusion.Blazor.DropDowns 
 
<SfInPlaceEditor Mode="RenderMode.Inline" TValue="string[]" Type="InputType.MultiSelect" TextOption="TextOptionType.Always" Value="@MultiValue" SubmitOnEnter="true" Model="@MultiModel"></SfInPlaceEditor> 
 
@code { 
    public string[] MultiValue = new string[] { "AU", "BM" }; 
 
    public MultiSelectModel<string> MultiModel = new MultiSelectModel<string>() 
    { 
        DataSource = new List<Complex>() { 
            new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } }, 
            new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } }, 
            new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } }, 
            new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } }, 
            new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } }, 
            new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } } 
        }, 
        Fields = new FieldSettingsModel { Text = "Country.CountryID", Value = "Code.ID" } 
    }; 
 
    public class Code 
    { 
        public string ID { get; set; } 
    } 
 
    public class Country 
    { 
        public string CountryID { get; set; } 
    } 
    public class Complex 
    { 
        public Country Country { get; set; } 
        public Code Code { get; set; } 
    } 
} 
  
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


HA Haywood July 11, 2020 02:50 AM UTC

That worked, thank you Syncfusion team. 

IS Indrajith Srinivasan Syncfusion Team July 13, 2020 11:56 AM UTC

Hi Haywood,

Welcome,

We are glad that your reported issue is resolved. Please let us know if you need any further assistance.

Regards,
Indrajith

Loader.
Up arrow icon