How to bind foreign-key table to In-place editor dropdown/combo.

[Michael]

I'm trying to create an in-place editor for a foreign-key field.

Let's take as an example the entities Person ( int Id, string Name, int FamilyId ) and Family ( int Id, string Name )

I have an object in my component named person, which is of the class Person.

According what I can find the documentation (examples are not showing the correct source code), this would result a razor page with following code:

@page "/InPlaceEditorForeignKey"

@using Syncfusion.EJ2.Blazor.InPlaceEditor

@using Syncfusion.EJ2.Blazor.DropDowns

<div>

    <dl class="row">

        <dt class="col-sm-3 control-label">First Name</dt>

        <dd class="col-sm-9">

            <EjsInPlaceEditor @ref="@edtFirstName" @ref:suppressField

                                Name="FirstName"

                                TValue="string"

                                Type="InputType.Text"

                                Value="@person.FirstName"

                                Model="@FirstNameModel" />

        </dd>

        <dt class="col-sm-3 control-label">Family</dt>

        <dd class="col-sm-9">

            <EjsInPlaceEditor @ref="@edtFamilyId" @ref:suppressField

                                Name="FamilyId"

                                TValue="int"

                                Type="InputType.ComboBox"

                                Value="@person.FamilyId"

                                Model="@FamilyModel" />

        </dd>

    </dl>

</div>

@code {

    public class Person

    {

        public int Id { get; set; }

        public string FirstName { get; set; }

        public int FamilyId { get; set; }

        public Family Family { get; set; }

    }

    public class Family

    {

        public Family()

        {

            Persons = new HashSet<Person>();

        }

        int Id { get; set; }

        string FamilyName { get; set; }

        HashSet<Person> Persons { get; set; }

    }

    Person person = new Person();

    EjsInPlaceEditor<string> edtFirstName;

    EjsInPlaceEditor<int> edtFamilyId;

    private object FirstNameModel = new { placeholder = "Enter the name" };

    private object FamilyModel = new

    {

        placeholder = "Select value",

        dataSource = new object[] { new { Id = 0, Name = "-" }, new { Id = 1, Name = "Adams" }, new { Id = 2, Name = "Brown" }, new { Id = 3, Name = "Smith" }, new { Id = 4, Name = "Jones" } },

        fields = new ComboBoxFieldSettings() { Text = "Name", Value = "Id" },

    };

}

Unfortunately, the second Editor shows the value "empty", despite all efforts.

When the list is opened, it shows the correct values, but when selecting an item, it never remembers the value.

Could you please point me in the right direction how to bind this correctly?

Thanks!

[Buvana Sathasivam]

Hi Michael, 

Greetings from Syncfusion support. 

We have validated your reported issue with shared code blocks. You have used data source with 0 index based. The issue raised due to serialization of Int type with default value as ‘0’.   We suggest you to define keys field as nullable type to resolve this issue. 

  

Please find the below code snippet for your reference. 

Index.razor 

public int? Keys { get; set; } 

Please find the below sample for your reference. 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Inplace-editor531645772  

Regards, 

Buvana S 

[Michael]

Thank you for the working sample!

Unfortunately, this only solves part of my problem.

When working with Foreign Keys, the selected "text" is irrelevant, but it is the value of the FamilyId I need to know to update the database.

I have made 2 changes in the index.razor file that will show my problem:

- I have added an initial value of FamilyId = 2 when instantiating the person object. This now shows 2 in the in-place editor. Obviously, this should display "Brown" instead of 2. 

- I have added an InPlaceEditorEvents object inside the InPlaceEditor, with an Action for OnActionBegin. When you check the Console, you will see it will have the following object:  {  "name": "FamilyId",  "primaryKey": "",  "value": "Adams" }  Agan, if I want to send the correct data to the database, this "Adams" is not useful, as I would need the Id to update the FamilyId with.

Attachment: Index_cb0e2c5d.7z

[Pandiyaraj Muniyandi]

Hi Michael, 

 

Good day to you. 

 

Query 1: I have added an initial value of FamilyId = 2 when instantiating the person object. This now shows 2 in the in-place editor. Obviously, this should display "Brown" instead of 2.  

 

As per In-place Editor behavior, the value field of ComboBox component relates with In-place Editor value property. If you set In-place Editor Value property with FamilyId, the corresponding text value of ComboBox will be displayed once the edit mode enabled. So, we suggest you to configure Value property inside the Model API and use EmptyText API to show the required value initially. 

 

Sample code:  

 

 

<EjsInPlaceEditor @ref="@edtFamilyId" @ref:suppressField 

                  Name="FamilyId" 

                 TValue="string" 

                 Type="InputType.ComboBox" 

                 EmptyText="@InitialEmptyText" 

                  Model="@FamilyModel"> 

   <InPlaceEditorEvents TValue="string" OnActionBegin="OnActionBegin" OnActionSuccess="OnActionSuccess" /> 

</EjsInPlaceEditor> 

 

private static List<DataModel> ComboData = new List<DataModel>() { 

        new DataModel { Keys = 0, Name = "-" }, 

        new DataModel { Keys = 1, Name = "Adams" }, 

        new DataModel { Keys = 2, Name = "Brown" }, 

        new DataModel { Keys = 3, Name = "Smith" }, 

        new DataModel { Keys = 4, Name = "Jones" } 

}; 

 

public static Person person = new Person() { FamilyId = 2 }; 

public string InitialEmptyText = (ComboData.Where(i => i.Keys.Equals(person.FamilyId)).FirstOrDefault()).Name; 

 

private object FirstNameModel = new { placeholder = "Enter the name" }; 

 

private object FamilyModel = new 

{ 

    placeholder = "Select value", 

    dataSource = ComboData, 

    fields = new ComboBoxFieldSettings() { Text = "Name", Value = "Keys" }, 

    value = person.FamilyId 

}; 

 

 

 

Query 2: I have added an InPlaceEditorEvents object inside the InPlaceEditor, with an Action for OnActionBegin. When you check the Console, you will see it will have the following object:  {  "name": "FamilyId",  "primaryKey": "",  "value": "Adams" }  Agan, if I want to send the correct data to the database, this "Adams" is not useful, as I would need the Id to update the FamilyId with. 

 

We confirmed “Value argument holds text of ComboBox with action begin event in In-place Editor” as a defect from our end and logged a report for the same. We will validate and include the fix in weekly patch release which is scheduled on 11^th September. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this feedback link, https://www.syncfusion.com/feedback/8538/ 

 

Regards, 

Pandiyaraj M 

[Pandiyaraj Muniyandi]

Hi Michael, 

 

We have resolved the reported issue “Value argument holds text of ComboBox with action begin event in In-place Editor” and included in the release version 17.2.52-beta. 

 

We suggest you upgrade to the latest package to resolve this issue.

 

Regards, 

Pandiyaraj M