This is a migrated thread and some comments may be shown as answers.

DropDownList - Must Select Option Twice

7 Answers 700 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Derrick
Top achievements
Rank 1
Derrick asked on 10 Dec 2013, 06:31 PM
I am experiencing some odd behavior with the DropDownList where when the user selects the desired option, the first time it is clicked does not trigger the change. Users must open the dropdown and select the option a second time for the selection to stick. I am using the MVC wrappers to create the widget, and then I use javascript to populate the datasource and control the change event. 

Here is the applicable RAZOR code: 
@(Html.Kendo().DropDownList()
    .Name("ddlAccounts")
    .HtmlAttributes(new { style = "width:300px" })
    .DataValueField("Value")
    .DataTextField("Text")
    .OptionLabel("Select an Account...")
    .Events(e => e.Change("changeAccount"))
)
And here is the related js code: 
// code from the ajax call that sets the datasource for the list
var ddlAccounts = $("#ddlAccounts").data("kendoDropDownList");
var dataSource = new kendo.data.DataSource({ data: dataReturned.Data });
ddlAccounts.setDataSource(dataSource);
When running the app, the data is correctly populated in the list, but when I open the list and make a selection on the first try, the selection doesn't change in the list, nor is my change event fired. Upon further review, I found that even the select event is not fired the first time. The second attempt always works. 

I have a workaround currently in place, but it's just a hack. Apparently, if I force the dropdown list open after the data loads, the first click is treated correctly. However, I would really like to figure out why the widget is not working as it should. 

7 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 12 Dec 2013, 03:29 PM
Hello Derrick,

Here is a quote of our answer to the support ticket opened on the same subject:

I prepared a simple jsBin demo using the aforementioned setup (it should be the same as the one which Kendo wrapper for ASP.NET MVC will create). In my tests the widget worked just as expected. Could you check the demo and let me know if I am missing something?

We can continue our discussion in support thread in order to avoid any duplication.

Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 31 Mar 2015, 08:37 PM
Hi Georgi,

I am having this same issue... was a resolution ever found?  And if so, can you share it here?

Thank you,
David
0
Georgi Krustev
Telerik team
answered on 02 Apr 2015, 08:54 AM
Hello David,

Some issues were slipped out in Q1 2015 release due the virtualization and grouping implementation. I would suggest you upgrade to the latest internal build (2015.1.327 or newer), available for download from your Telerik account.

Regards,
Georgi Krustev
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
David
Top achievements
Rank 1
answered on 02 Apr 2015, 10:52 PM
Thank you Georgi!  I will pull the latest build and give that a shot.

David
0
Tim
Top achievements
Rank 1
answered on 24 Apr 2015, 01:00 PM

Sir,

I actually contacted you yesterday for@(Html.Kendo().DropDownListFor "Flickering" and not opening at all. I moved my script references to the bottom of the .cshtml page and the do open now. But they only open on the second click. Either in the control or somewhere on the page you need to click once and then the control will open to show data. This is being feed from a web service, Ajax call using Json request. It is a protected site so I can not send the data. However here is the "Razor, Ajax, Json, etc... 

Razor:

@(Html.Kendo().DropDownListFor(model => model.Agency)
                      .Name("Agency")
                      .OptionLabel("Select an Agency....")
                      .HtmlAttributes(new {style = "width: 350px"})
                      .DataTextField("code")
                      .DataValueField("code")
                      .Filter("contains")
                      .DataSource(source =>
                      {
                          source.Read(read =>
                          {
                              read.Action("agencies_read", "IOTDBBillingAdmin");
                          }).ServerFiltering(false);
                      })
                      .Events(e => e.Change("onAgencyChange"))
                      )

 

Controller:

        public ActionResult Agencies_Read()
        {
            BillingCodes billingCodes = new BillingCodes();

            return Json(billingCodes.Agencies(), JsonRequestBehavior.AllowGet);
        }

.JS file:

    $(document).ready(function () {
        $('#billCodeSearch').click(function (evt) {
            searchBillCodes();
        });

        $('#billCodeSearch').hide();


    });

    $('#billCodeGrid').ready(function () {
        $('#Agencies').val($("#UserEa7").val());
        $('#billCodeSearch').click();


    });

    function searchBillCodes() {

        //$("#billCodeGrid").data('kendoGrid').dataSource.data([]);

        if ($('#Agencies').val() !== "") {
            $('#billCodeGrid').data('kendoGrid').dataSource.read();
        }
    }

    function onAgencyChange() {
        getAgencyLongName();
    }

    function getAgencyLongName() {
         
        $("#AgencyLongName").val("");
        
            $.ajax({
                Type: "GET/POST",
                ContentType: "application/json;charset=utf-8",
                url: '/IOTDBBillingAdmin/AgencyFullName',
                data: { agency: $("#Agency").val() },
                success: function (data) {
                    $("#AgencyLongName").val(data);
                    
                },
                error: function () {
                    $("#AgencyLongName").val("");
                }
            });
    }

    function myBillCodeSearchData() {
        return {
            agency: $('#Agencies').val(),
            businessUnit: $('#BusinessUnits').val()
        }
    }


    function filterAgency() {
        return { agency: $("#Agency").val() }
    }

0
Tim
Top achievements
Rank 1
answered on 24 Apr 2015, 01:14 PM

Sir,

On the previous post I should have mentioned I have several DDL on 2 pages. Also this is occurring in IE10. Also this only occurs with the web service call, I also have DDL hooked the SQL/Entity Framework Linq Query's and they work fine

Thanks

 

0
Georgi Krustev
Telerik team
answered on 28 Apr 2015, 09:22 AM
Hello Tim,

I would like to ask you open a separate thread or open a support ticket on the subject as the asked question is not related to the topic discussed in this thread. Thank you for your understanding.

With regards to the given information, I am afraid that the it is not sufficient to observe the erroneous behavior locally. Would it be possible to post a repro demo in the new thread that will demonstrate the issue locally?

Regards,
Georgi Krustev
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
DropDownList
Asked by
Derrick
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
David
Top achievements
Rank 1
Tim
Top achievements
Rank 1
Share this question
or