Display data from DB in autocomplet textbox and posting back to DB

[Toni Pis]

I am trying to use the autocomplete control to display data from the foreign table (display property is "Name") and when I select an item and click submit (post) I want the foreign ID of the selected item to be saved in the database of the parent table.

Specifically in my case I am using IEnumerable< Employee> collection of model object - Employee as a dataSource to AutoComplete control. Employee is a foreign table to table IT. And when I click submit I want to save foreign key of table Employee to table IT in database.

Something similar like  WPF toolkit:

https://www.broculos.net/2014/04/wpf-autocompletebox-autocomplete-text.html

Any help?

[Kokila Poovendran]

Hi Toni Pis

Thank you for reaching out to us with your query regarding the use of the Autocomplete control to display data from a foreign table and update the database.

After carefully reviewing your requirements, we've prepared a simple code snippet that you can integrate into your project:

<ejs-autocomplete id="dropdownlistfor" name="value" dataSource="@(Model.Employees)" placeholder="e.g. Basketball" ejs-for="@Model.value" change="OnChangeHanlder">

                          <e-autocomplete-fields value="Name"></e-autocomplete-fields>

</ejs-autocomplete>

[script]

function OnChangeHanlder(args) {

       var employeeDetails = args.itemData;  // Here you can get the selected item ID and save it to the DB}

In the provided code snippet, we utilize the change event of the autocomplete control to capture the selected item details. The args.itemData contains all the necessary information about the selected item, including its ID. You can extract this ID and proceed to save it to the database table associated with the parent table IT.

For further details and reference, you can explore the autocomplete control's documentation, particularly the section on the change event: Autocomplete - Change Event.

If you have any additional questions or require further assistance with the implementation, please feel free to reach out. We're here to help you succeed.

Attachment: CoreRazor_a28765b2.zip

[Toni Pis]

Thank you so much on your answer. It solved my functionality problems.

I added some lines  to function  OnChangeHanlder(args)  in the  "script" section of code:

function OnChangeHanlder(args) {

       var employeeDetails = args.itemData;  // Here you can get the selected item ID and save it to the DB

      document.getElementById('dropdownlistfor').value = employeeDetails.Id;

}

Now when I click "Post" button, it saves data properly in DB.

But only problem is "display" one, because as soon as i select item form foreign table, it displays item's "Id" not "Name" property of item, and if another textbox is selected, it displays "undefined".

But most important thing functionality works :-)

Thank's

[Kokila Poovendran]

Hi Toni Pis,

Thank you for your feedback and for sharing the additional details regarding the changes you made to the OnChangeHandler function.

Upon reviewing your implementation, it seems that the line you added to assign the ID field to the AutoComplete value might be causing the display issue you described. The AutoComplete component typically operates based on the Value field, which is why it displays the ID by default.

To address the display issue and ensure that the AutoComplete component shows the Name property of the selected item, could you please provide more context on why you added that particular line of code? Understanding your specific requirement will help us offer you a more tailored solution.

We've also prepared a video illustration demonstrating how the selected Name value is passed to the post method when clicking the "Post" button. You can view the illustration below:

We appreciate your cooperation and look forward to assisting you further.

Regards,
Kokila Poovendran.

[Toni Pis]

Hi,

Thanks a lot for you interest and help. I hope I will be as clear as possible.

I am working on an ASP core MVC app. I have a model for View - Upsert.chtml , it is View Model - ItOpremaVM, where  is a form with an autocomplete control among other things.

Model Djelatnik:

public class Djelatnik

{

    [Key]

   public int Id { get; set; }

   public string Name { get; set; }

}

Model ItOprema:

    public class ItOprema

    {

        [Key]

        public int Id { get; set; }

....

        public int? DjelatnikId { get; set; }

        [ForeignKey(nameof(DjelatnikId))]

        public virtual Djelatnik? Djelatnik { get; set; }

.....

}

View model:

    public class ItOpremaVM

    {

        public ItOprema ItOprema { get; set; }

        public IEnumerable<SelectListItem>? LokacijaSelect { get; set; }

......

        public IList<Djelatnik>? Djelatnici { get; set; }

    }

Upsert.cshtml:

@model ItOpremaVM

.....

<ejs-autocomplete ejs-for="@Model.ItOprema.DjelatnikId" id="dropdownlistfor" dataSource="@(Model.Djelatnici)"

  placeholder="Djelatnici" change="OnChangeHanlder" popupheight="220px">

<e-autocomplete-fields value="Name"></e-autocomplete-fields>

</ejs-autocomplete>

.....

<script>

    function OnChangeHanlder(args) {

        debugger;

        var employeeDetails = args.itemData; // Here you can get the selected item ID and save it to the DB

        document.getElementById('dropdownlistfor').value = employeeDetails.Id;

    }

</script>

In the controller I use the repository pattern for CRUD.

Thank you in advanced,

[Kokila Poovendran]

Hi Toni Pis

Based on your description and code snippet, it seems you're aiming to enhance user interaction with an autocomplete feature for selecting employees within your application. We've carefully reviewed your requirements and suggest utilizing the "ComboBox" component for this purpose. Below is the modified code snippet along with an attached sample for your reference:

<ejs-combobox id="dropdownlistfor" name="value" dataSource="@(Model.Employees)" placeholder="e.g. Basketball" ejs-for="@Model.value" change="OnChangeHanlder">

                          <e-combobox-fields value="Id" text="Name"></e-combobox-fields>

</ejs-combobox>

 

 

<script>

       function OnChangeHanlder(args) {

             var CBObj = document.getElementById("dropdownlistfor").ej2_instances[0];

             var employeeDetails = args.itemData;  // Here you can get the selected item ID and save it to the DB

             CBObj.value = employeeDetails.Id;

       }

</script>

This code integrates the ComboBox component, which offers improved functionality and usability for selecting employees. You can directly incorporate this solution into your application to enhance the user experience.

[Toni Pis]

Thank you very much.