DropDownList - Must Select Option Twice

8 posts, 0 answers
  1. Derrick
    Derrick avatar
    8 posts
    Member since:
    Jun 2011

    Posted 10 Dec 2013 Link to this post

    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. 

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 12 Dec 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. David
    David avatar
    2 posts
    Member since:
    Apr 2014

    Posted 31 Mar 2015 in reply to Georgi Krustev Link to this post

    Hi Georgi,

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

    Thank you,
    David
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 02 Apr 2015 Link to this post

    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.

     
  6. David
    David avatar
    2 posts
    Member since:
    Apr 2014

    Posted 02 Apr 2015 in reply to Georgi Krustev Link to this post

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

    David
  7. Tim
    Tim avatar
    4 posts
    Member since:
    Feb 2015

    Posted 24 Apr 2015 Link to this post

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

  8. Tim
    Tim avatar
    4 posts
    Member since:
    Feb 2015

    Posted 24 Apr 2015 in reply to Tim Link to this post

    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

     

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 28 Apr 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready