We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get value on change?

Thread ID:

Created:

Updated:

Platform:

Replies:

121894 Feb 4,2016 12:46 PM UTC Feb 8,2016 07:23 AM UTC ASP.NET MVC 4
loading
Tags: DropdownList(Mobile)
Emil Yotov
Asked On February 4, 2016 12:46 PM UTC

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 [Syncfusion]
Replied On February 5, 2016 05:26 AM UTC

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
Replied On February 5, 2016 09:12 AM UTC

Thank you, everything works.

Emil Yotov
Replied On February 7, 2016 02:39 PM UTC

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 [Syncfusion]
Replied On February 8, 2016 07:23 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;