How to get value on change?

[Emil Yotov]

Hi,

I have the following example:

@Html.EJMobile().DropDownList("cmbView").ClientSideEvents(e => e.Change("OnCmbSelect")).Fields(e => e.Text("Key").Value("Value")).DataSource((IEnumerable<KeyValuePair<string,string>>)ViewData["data"])

<script>

    function OnCmbSelect(args) {

        

        }

</script>

My question is how to get the selected value of a JavaScript function ?

[Dhinesh Ravi]

Hi Emil,

Thank you for contacting Syncfusion Support.

We have provided the method getSelectedItemValue to retrieve the value fieldMapper of DropDownList. Refer to the following steps to achieve the scenario.

Step 1: We have provided the dataSource to the DropDownList control, with specified Key and Value pair. Here we used year as Key and type as Value. Refer to the following code example.

[controller.cs]

public class YearData

    {

        public string year { get; set; }

        public string type { get; set; }

    }

    public static class YearsModel

    {

        public static List<YearData> years = new List<YearData>();

        public static List<YearData> setYears()

        {

            years.Add(new YearData { year = "1970", type = "even" });

            years.Add(new YearData { year = "1971", type = "odd" });

            years.Add(new YearData { year = "1972", type = "even" });

            years.Add(new YearData { year = "1973", type = "odd" });
            years.Add(new YearData { year = "1974", type = "even" });

            return years;
        }
     }

Step 2: Render DropDownList control using the same Key and Value pair. Refer to the following code example.

[cshtml]

@Html.EJMobile().DropDownList("dd_databind").DataSource(Model).ClientSideEvents(evt => evt.Change("change")).Fields(field => field.Text("year").Value("type"))

Now the DropDownList will be rendered with the specified text and its respective value.

Step 3: You can retrieve the value of the selected suggestion list item in the change event, with the help of getSelectedItemValue method. Refer to the following code example.

[cshtml]

@Html.EJMobile().DropDownList("dd_databind").DataSource(Model).ClientSideEvents(evt => evt.Change("change")).Fields(field => field.Text("year").Value("type"))

<script>

    function change(args) {

        var instance = $("#dd_databind").data("ejmDropDownList");

        $("#value").empty();

        $("#value").append("Selected value: " + instance.getSelectedItemValue()); //gets the value of the selected list item

    }
</script>

Once the suggestion list item is selected, change event will be triggered. In the event, we need to create the instance for the DropDownList and retrieve the value using getSelectedItemValue.

We have also created the simple sample for the requirement. Refer to the following code example.

Sample


Regards,
Dhinesh R

[Emil Yotov]

Thank you, everything works.

[Emil Yotov]

I have 2 questions - possible bugs in DropDownList:

1. When using the component in POST form he testified text /Key/, not value.

2. In Android phone style /tested on phone/ when we have DropDownList and choose an option from the drop-down list if this option is covered another
visual element /text, datetime, DropDownList or other/ the choice is triggered coated visual element if pressed.

[Dhinesh Ravi]

Hi Emil,

Thanks for the update.

Query1: When using the component in POST form he testified text /Key/, not value

We have confirmed that “Value cannot be retrieved in form submit for DropDownList” as a defect and logged a defect report and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query2: In Android phone style /tested on phone/ when we have DropDownList and choose an option from the drop-down list if this option is covered another visual element /text, datetime, DropDownList or other/ the choice is triggered coated visual element if pressed.

The element underneath the popup controls(Menu, Dialog, DropDownList etc..) gets triggered while selecting the popup control elements(For DropDownList, it is suggestion list wrapper) is a known issue in touch devices which is commonly known as “GhostClick”. Refer to the following links for more information.

https://github.com/ftlabs/fastclick/issues/130
 
http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/

This could be prevented in sample level by using pointer events for respective events, such as focusIn and focusOut.

[cshtml]

@Html.EJMobile().DropDownList("dd_default").SelectedItemIndex(1).TargetID("targetDiv").ClientSideEvents(c => c.FocusIn("focusIn").FocusOut("focusOut"))

For the DropDown control, in the focusIn event, we need to apply pointer events as none for the AppView and pointer events as auto to the DropDown suggestion list. Refer to the following code example

[cshtml]

<script>

    function focusIn(args) {

        //Add pointer events as none to the AppView

        App.activePage.css('pointer-events', 'none');

        //Add pointer events as auto to the DropDown suggestion list.

            $("#dd_defaultlist").css("pointer-events", 'auto');

        }
   </script>

Now the pointer-events will be restricted to the full AppView other than suggestion list element. Then in the focusOut event, we need to provide pointer-events as auto to the AppView. Refer to the following code example

[cshtml]

<script>

       function focusOut(args) {

            window.setTimeout(function () {

                //Add pointer events as auto to Appview

                App.activePage.css('pointer-events', 'auto');

            }, 100);

        }

  // To add the pointer events to appview for closing the suggestion list on document click

        $(document).bind("click", function () {

            App.activePage.css("pointer-events", "auto");

        })
    </script>

Now, pointer-events will be applied to all the elements in the AppView. We have also created the simple sample for the requirement. Refer to the sample in the following attachment.

Sample

Regards,
Dhinesh R