Possible Bug in DropDownList

5 posts, 0 answers
  1. GenXisT
    GenXisT avatar
    8 posts
    Member since:
    Apr 2016

    Posted 30 Jun Link to this post

    Hello,

    I have a dropdownlist where I am using the .Select() and .Close() events.  What I'm doing is changing the background colors of the dropdownlists when there is something in the list selected.  This is so there's a visual indication for the user.  If the user clicks off the box, it will remain colorized if there's a selection made.  If there isn't, then it will return to the default color.  Attached image (ex-01)

    For some reason, this doesn't work if I have a different .DataTextField vs. .DataValueField.  I have done this because I need to have the list display only a pre-formatted first name for the user.  (e.g. John, instead of John Smith or JOHN SMITH).  So in the cases where I have pre-formatting, it will colorize the dropdown correctly, but it does not remove it when I return to selectedIndex = 0 like the rest of the dropdowns. Attached image (ex-02).

    The only difference in the code is that the .DataTextField("SomeFieldDisplay") and .DataValueField("SomeField") for the items that DO NOT.  For the ones that work, it's .DataTextField("SomeField") and .DataValueField("SomeField").  I'm pretty puzzled by this one.  My code is below.  Thanks!

    <script type="text/javascript">
    function onSelect(e) {
            e.sender.wrapper.children(0).addClass("custom-dropdown");
    }
     
    function onClose(e) {
        if (e.sender.selectedIndex < 1) {
            e.sender.wrapper.children(0).removeClass("custom-dropdown");
        }
    }
    </script>
    <style>
    html .k-widget .custom-dropdown {
        background-color: #00B312;
    }
    </style>
    @( Html.Kendo().DropDownList()
        .Name("ddlTopics")
        .DataTextField("TopicTitle")
        .DataValueField("TopicTitle")
        .DataSource(ds =>
           {
           ds.Read(read =>
               {
                   read.Action("GetAllTopicsByTitle", "Hierarchy");
               });
            })
        .Events(e =>
            {
                e.Select("onSelect").Close("onClose");
            })
        .OptionLabel("--Select Topic--")
    )
     
    @(Html.Kendo().DropDownList()
        .Name("ddlTopicOwner")
        .DataTextField("TopicOwnerDisplay")
        .DataValueField("TopicOwner")
        .DataSource(ds =>
            {
            ds.Read(read =>
                {
                    read.Action("GetAllTopicsByOwner", "Hierarchy");
                });
            })
        .Events(e =>
            {
                e.Select("onSelect").Close("onClose");
            })
        .OptionLabel("--Select Topic Owner--")
    )

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Jul Link to this post

    Hello,

    I prepared a simple test project based on the give code snippet, but it seems to work just fine:

    http://screencast.com/t/0cZIdZVt

    Could you modify the Home/Formatted.cshtml page of the attached project in order to demonstrate the erroneous behavior?

    Regards,
    Georgi Krustev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. GenXisT
    GenXisT avatar
    8 posts
    Member since:
    Apr 2016

    Posted 05 Jul Link to this post

    Hi Georgi,

     

    Thanks for replying and sending the sample app.  Even without modifying your code in any way, the same functionality occurs.  All you have to do is click the first of the 2 dropdownlists, and then tab over to the next... and then tab one more time.  So without actually selecting anything, let alone a higher selectedIndex, the background color turns green and stays green.

    If you change the .DataTextField and .DataValueField to be the same, then this doesn't happen.

    Happens here (simply tabbing through)

    @(Html.Kendo().DropDownList()
        .Name("ddlTopicOwner")
        .DataTextField("TopicOwnerDisplay")
        .DataValueField("TopicOwner")
        .BindTo(owners)
        .Events(e =>
            {
                e.Select("onSelect").Close("onClose");
            })
        .OptionLabel("--Select Topic Owner--")
    )

    Doesn't happen here since both DataText and DataValue are the same

    @(Html.Kendo().DropDownList()
        .Name("ddlTopicOwner")
        .DataTextField("TopicOwnerDisplay")
        .DataValueField("TopicOwnerDisplay")
        .BindTo(owners)
        .Events(e =>
            {
                e.Select("onSelect").Close("onClose");
            })
        .OptionLabel("--Select Topic Owner--")
    )

  5. GenXisT
    GenXisT avatar
    8 posts
    Member since:
    Apr 2016

    Posted 05 Jul Link to this post

    My original code works the same as yours.  If you select 0 index and then mouse click off the list to anywhere else on the page, then it does turn off the green.  However, if you use TAB, then it stays green.  So it seems the javascript is only firing when you use the mouse click, and not when you use TAB.
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 07 Jul Link to this post

    Hi,

    The Close event will raise only on popup close. If it has been closed already on TAB, then it will not fire.

    I am not exactly sure what is the desired outcome, but I would suggest you remove the "green" class on wrapper blur. Thus you will ensure a more stable behavior of this custom functionality:

    <script type="text/javascript">
        function onSelect(e) {
            e.sender.wrapper.children(0).addClass("custom-dropdown");
        }
     
        function onBlur(e) {
            $(e.currentTarget).children(0).removeClass("custom-dropdown");
        }
    </script>
    <style>
    html .k-widget .custom-dropdown {
        background-color: #00B312;
    }
    </style>
    @( Html.Kendo().DropDownList()
        .Name("ddlTopics")
        .DataTextField("TopicTitle")
        .DataValueField("TopicTitle")
        .BindTo(titles)
        .Events(e =>
            {
                 
                e.Select("onSelect");
            })
        .OptionLabel("--Select Topic--")
    )
      
    @(Html.Kendo().DropDownList()
        .Name("ddlTopicOwner")
        .DataTextField("TopicOwnerDisplay")
        .DataValueField("TopicOwner")
        .BindTo(owners)
        .Events(e =>
            {
                e.Select("onSelect");
            })
        .OptionLabel("--Select Topic Owner--")
    )
     
    <script>
        $(function () {
            $("#ddlTopics").closest(".k-widget").blur(onBlur);
            $("#ddlTopicOwner").closest(".k-widget").blur(onBlur);
        });
    </script>


    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready