Set value on load for ejs-autocomplete with UrlAdaptor with value and text set mapped to complex class.

[Mike Vinson]

Hello, below is an autocomplete component which is usually empty on the initial page load.

I am looking to figure out a way to set a specific selection upon page load. 

CreateNote.cshtml

<ejs-autocomplete

         id="EmployeeNo"

         placeholder="Select an Employee"

         allowCustom="false"

         onkeydown="PreventFormSubmissionWithEnterKey(event)"

          value="@ViewBag.SelectedEmp?.employeeName">

                    <e-data-manager adaptor="UrlAdaptor" url="/JobNote/GetEmployees" crossDomain="false"></e-data-manager>

                    <e-autocomplete-fields value="employeeNo" text="employeeName"></e-autocomplete-fields>

</ejs-autocomplete>

The above queries against the GetEmployee when the user starts typing. Also when the page first loads if there is a selected employee (@ViewBag.SelectedEmp?.employeeName) name already selected then the component queries and gets the target employee, however, it does not show the employee being selected. 

How to make the selected employee be shown on page load.  I have used the below code for when there is no Url Adapter and the dataSource is attached and it works fine, however, when the Url is attached the window.onload function cannot access the ej2_instanse[0] --im thinking because its still processing its own first-render and first-dataload events thereby awaiting on the API query to be completed.

<script>

 window.onload = LoadEvent();

    function LoadEvent() {

        var employeeNameDD = document.getElementById('EmployeeNo').ej2_instances[0]; ///<<<< this here does not exist when using the UrlAdaptor. 

        employeeNameDD.index = @ViewBag.EmployeeNameIndex;

        }

</script>

I believe there is more than one issue here preventing this code from working as needed. Any help would be greatly appreciated!

[Sureshkumar P]

Hi Mike,

Based on your shared information, we suspect that you want to render the component with preselected value. So we suggest you achieve by using the value property to the component or achieve by using DOMContentLoaded event instead of window.onload method.

Find the code example here:

[controller.cs]

public IActionResult Index()

        {

            ViewBag.preselectValue = "Switzerland";

            return View();

        }

 

[Index.cshtml]

 

<ejs-autocomplete id="EmployeeNo" placeholder="Select a Country" value="@ViewBag.preselectValue">

    <e-data-manager adaptor="UrlAdaptor" url="/Home/UrlDatasource/" crossDomain="true"></e-data-manager>

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

</ejs-autocomplete>

 

<script>

 

 

    window.addEventListener('DOMContentLoaded', () => {

 

           var employeeNameDD = document.getElementById('EmployeeNo').ej2_instances[0]; ///<<<< this here does not exist when using the UrlAdaptor.

 

        //employeeNameDD.value = "Denmark";

 

           });

 

</script>

Find the sample in the attachment:

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

Attachment: ASPCore_16218543.zip

[Mike Vinson]

Okay, after sometime troubleshooting this I have found what is currently working for my setup.

In short, I have to both set the value equal to the preselected value which is the employee name, however, in order for it to work I also have to set the value within the DOMContentLoaded which is not the employee name but the employee id.

Additionally, only difference between your example and mine is there is a value and text defined within the URL adaptor settings in my example to query on name but return the Id --this seems to be causing you to manually set the value(EmpName) within the  ejs-autocomplete component attributes while also requiring you to set the ID(adapter defined (value)) as value within Javascript ( DOMContentLoaded ), only then does it correctly display your previously selected value on page load. Might be room for improvement on this feature here, either that or I still do not have it setup correctly... Thoughts?

Thanks for your help this is a very nice to have feature!

[Sureshkumar P]

Mike,

Based on our previous update, AutoComplete supports only the value property for features like filtering, sorting and so on and This is the component's behavior. The text property is used only for displaying items in the popup. If you want to use text property for all the features, then we suggest ComboBox component which provides similar features to AutoComplete along with support to use both fields

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/combo-box/getting-started

Online demo: https://ej2.syncfusion.com/aspnetcore/ComboBox/DefaultFunctionalities#/bootstrap5

Regards,

Sureshkumar P