Possible Bug in DropDownList

[GenXisT]

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--")
)

[Georgi Krustev]

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

 

 

[GenXisT]

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--")
)

[GenXisT]

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.

[Georgi Krustev]

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