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

Get selected value in Javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

128143 Jan 4,2017 04:46 PM UTC Jan 11,2017 12:29 PM UTC ASP.NET Web Forms 3
loading
Tags: DropDownList
Juan
Asked On January 4, 2017 04:46 PM UTC

Hello,
I have two DropdownList and a Chart and I want to select one of the two DropdownList to refresh the Chart by passing the selected data of the two DropdownList as parameters.

How can I know the selected value?


This is my code:

--- The two DropdownList:

            <ej:DropDownList ID="cboDelegacion" runat="server" Width="350px" WatermarkText="Seleccione una delegación" ShowRoundedCorner="true" ClientSideOnSelect="onChangeFiltroDelegacion"></ej:DropDownList>
            <ej:DropDownList ID="cboMercado" runat="server" Width="350px" WatermarkText="Seleccione un mercado" ShowRoundedCorner="true" ClientSideOnSelect="onChangeFiltroMercado"></ej:DropDownList>

-- The Chart

        <div id="container" style="height: 640px"></div>

        <script type="text/javascript">
                    $(function () {

            var delegacionFiltro = " ";   ---Here I need to get the value of the DropDownList.
            var mercadoFiltro = " ";  ---Here I need to get the value of the DropDownList.

                        var dataManger = new ej.DataManager(
                        {
                            url: "WebService.asmx/ListadoChart", adaptor: "UrlAdaptor"
                        });

                        $("#container").ejWaitingPopup()
                        $("#container").ejWaitingPopup("show");
                        var query = ej.Query();
                        var consulta = dataManger.executeQuery(query.addParams("delegacion", delegacionFiltro).addParams("mercado", mercadoFiltro));  --- The query with parameters
                        consulta.done(function (e) {
                            $("#container").ejWaitingPopup("hide");
                        });



                        $("#container").ejChart(
                        {
                           
                            chartArea:
                            {
                                border: { width: 1 }
                            },

                            //Initializing Primary X Axis
                            primaryXAxis:
                            {
                                rangePadding: 'Additional',
                                title: { text: "Estado de la obra", font: { fontWeight: "Bold" } }
                            },

                            //Initializing Primary Y Axis
                            primaryYAxis:
                            {
                                title: { text: "Nº puntos de suministro" }
                            },

                            //
                            commonSeriesOptions:
                            {
                                enableAnimation: true, pieCoefficient: "0.5",
                                tooltip: { visible: true, format: "#point.x# : #point.y# #series.name#" }
                            },

                            //Initializing Series   
                            series:
                            [
                               
                                ....  --- The columns

                            ],
                            load: "loadTheme",
                            theme: "GradientLight",
                            title: { text: 'Estado de los puntos de suministro', font: { fontWeight: "Bold" } },
                            isResponsive: true,
                            size: { height: "640" },
                            legend: { visible: true, position: "Right", border: { width: 2, color: "#FFC342" } },
                            pointRegionClick: "onChartpointclick"
                        });

                    });
                </script>

--- The event of the DropDownList

            <script type="text/javascript">

                   function onChangeFiltroDelegacion(sender) {
                   $("#container").ejChart("redraw");  --- To refresh the chart
                }
                function onChangeFiltroMercado(sender) {
                    $("#container").ejChart("redraw");  --- To refresh the chart
                }

        </script>


Thanks.





Prince Oliver [Syncfusion]
Replied On January 5, 2017 07:14 PM UTC

Hi Juan, 

Thanks for contacting Syncfusion support. 

To get selected value in the Dropdownlist, you can use getSelectedValue method which will return the current value of the dropdownlist. Refer to the following UG link for more information: https://help.syncfusion.com/api/js/ejdropdownlist#methods:getselectedvalue 

Have a look at the following code snippet: 
var delegacionFiltro = $("#<%=cboDelegacion.ClientID%>").data("ejDropDownList").getSelectedValue(); 
var mercadoFiltro = $("#<%=cboMercado.ClientID%>").data("ejDropDownList").getSelectedValue(); 

Let us know if you require any further assistance. 

Regards, 
Prince 


Juan
Replied On January 10, 2017 11:55 AM UTC

Thanks!

It works perfect!

Regards.


Prince Oliver [Syncfusion]
Replied On January 11, 2017 12:29 PM UTC

Hi Juan, 
  
Most welcome. We are glad to help you. 
  
Regards, 
Prince 


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

;