Open Dropdown onfocus and focus filter

[Dipl. Ing. Martin]

Hi,

i am using version 25.1.41 of asp.net core controls and just wanted to focus filter when the dropdown gets the focus, but i can't get this to work.

Data is bound with no problem and filtering works perfect.

On my partial page:

        <ejs-dropdownlist id="VehicleID" dataSource="@Model.Plates" popupHeight="220px" allowFiltering="true" filtering="onfiltering" focus="onfocus">

            <e-dropdownlist-fields text="Plate" value="ID"></e-dropdownlist-fields>

        </ejs-dropdownlist>

<script>

    function onfocus(e) {

        var ddlObj = document.getElementById('VehicleID').ej2_Instances[0];

        ddlObj.showPopup();

    }

    function onfiltering(e) {

        var query = new ej.data.Query();

        query = (e.text !== '') ? query.where('Plate', 'contains', e.text, true) : query;

        e.updateData(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Plates)), query);

    }

</script>

I use the showPopup from here:

https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/ej1-api-migration

API in Essential JS 2

On the main page:

    <script type="text/javascript">

        $(function () {

             $('#VehicleID').focus();

        });

    </script>

The dropdown gets the focus, but does not open. The onfocus event gets called when i click on the dropdown, but not when set by script. 

What can i do to get this running?

After selecting an item mouse / return i want to move on to the next control - i did not find a solution for this.

Thanks Martin

[Kokila Poovendran]

Hi Dipl. Ing. Martin,

Thank you for providing the details. We've reviewed your query and prepared a sample based on your requirements. Please find the sample attached. 

[Home / Index.cshml]

<script type="text/javascript">

    function clickAjax() {

        var ajax = new ej.base.Ajax('/PartialPage/index', 'GET', true);

        ajax.send().then(function (result) {

            document.getElementById('div1').innerHTML = result;

            var scripts = document.getElementById('div1').querySelectorAll("script");

          for (var i =0; i< scripts.length; i++) {

              if (scripts[i] !== null) {

                eval(scripts[i].innerHTML);

            }

          }

            //$('#games').focus();

            var ddlObj = document.getElementById('games').ej2_instances[0];

            ddlObj.showPopup();

        });

    }

</script>

In this sample, the popup is opened as expected when loading the partial page.

Regarding your second query about moving to the next control after selecting an item using mouse or return key, you can achieve this by handling the "select" event of the dropdown list. When an item is selected, you can call the focus event of another component. For more information, refer to the API documentation below.

API Select:  https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.dropdowns.dropdownlist.html#Syncfusion_EJ2_DropDowns_DropDownList_Select 

If you have any further questions or need assistance, feel free to ask.

Regards,
Kokila Poovendran.

Attachment: ej2mvcpartialviewmaster_704061f2.zip