DropDownList - Must Select Option Twice

[Derrick]

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. 

[Georgi Krustev]

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

[David]

Hi Georgi,

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

Thank you,
David

[Georgi Krustev]

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

 

 

[David]

Thank you Georgi!  I will pull the latest build and give that a shot.

David

[Tim]

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() }
    }

[Tim]

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

 

[Georgi Krustev]

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