Focus/Blur for DropDownList

[Ian]

Hi, Is there any way to provide or simulate OnFocus and OnBlur events for the Kendo DropDownList? I have an application where my customer wants a div that surrounds every user input field on a form highlighted as a user tabs through the fields.

It's not a problem with pure HTML input or select tags as I can use the blur and focus events for these elements to highlight the div surrounding the tag. The same approach also works with Kendo NumericTextBox or DatePicker widgets as they both include an embedded input tag.

However, I'm struggling to find a solution that would work for the Kendo DropDownList as it doesn't use a real select tag. I've tried adding focus/blur events to a div wrapping the DDL widget but it doesn't work that well as the user then has to tab through the dropdownlist twice.

Regards, Ian

[Kiril Nikolov]

Hi Ian,

I would like to suggest you two ways to get the desired functionality:

1.     You can use the automatic focus event that is provided with the Kendo UI DropDown list, but you need to keep in mind that with this solution the focus event is always fired when the page is loaded. For the OnBlur event you can use the built-in "close" configuration that will fire the close event when the user makes a selection in the DropDown list. I have prepared a quick demo of this implementation:

http://jsbin.com/aluzuh/4/edit

2.     The other solution is to use the built-in "open" and "close" configurations for the DropDown widget. The open event is fired when the user clicks on the the DropDown menu, and I already explained how "close" works. I have also prepared a short demo with this functionallity here:

 http://jsbin.com/apelej/3/edit

Let me know if any further assistance is needed.

Regards,
Kiril
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

[Jayesh Goyani]

Hello,

Please try with below code snippet.

// Based on Jquery version please used either one of them

$('.k-combobox').find('span').find('input').on("focus blur", function (e) {

});

$('.k-combobox').find('span').find('input').live("focus blur", function (e) {

});

Thanks,
Jayesh Goyani

[Ian]

Hi Jayesh,
Thanks for the suggestion but I think that would only work for a Kendo ComboBox which does include an active <input> HTML element.

If you look at the HTML output for a Kendo DropDownList, it's different. Although there is an <input> element included, it has its display attribute set to None and so I don't believe it would ever get the focus.  

The HTML below was taken from the KendoUI DropDownList demo page... 

<h3>Cap Color</h3>
<span tabindex="0" class="k-widget k-dropdown k-header" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-readonly="false" aria-activedescendant="color_option_selected" aria-owns="color_listbox" unselectable="on"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">Black</span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on">select</span></span></span><input id="color" style="display: none;" value="1" data-role="dropdownlist"></span>

Best regards, Ian

[Jayesh Goyani]

Hello,

JS

<script type="text/javascript">
    $(document).ready(function () {

        $("#fabric").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
            filter: "contains",
            suggest: true,
            index: 3
        });

        $('.k-combobox').find('span').find('input').live("focus blur", function (e) {
            alert('combo');
        });

        $('.k-dropdown').find('span').live("click blur", function (e) {
            alert('dropdown');
        });


        var data = [
                        { text: "Black", value: "1" },
                        { text: "Orange", value: "2" },
                        { text: "Grey", value: "3" }
                    ];


        $("#color").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data
        });


    });


</script>

HTML

<input id="fabric" placeholder="Select fabric..." />
<input id="color" value="1" />

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

$('.k-combobox').find('span').find('input').live("focus blur", function (e) {
            alert('combo');
        });

        $('.k-dropdown').find('span').live("click blur", function (e) {
            alert('dropdown');
        });

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

$('.k-combobox').find('span').find('input').live("focus blur", function (e) {
    alert('combo');
});

$('.k-dropdown').find('span').live("click blur", function (e) {
    alert('dropdown');
});

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

<input id="fabric" placeholder="Select fabric..." />
<input id="color" value="1" />

<script>
    $(document).ready(function () {

        $("#fabric").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
            filter: "contains",
            suggest: true,
            index: 3
        });

        $('.k-combobox').find('span').find('input').live("focus blur", function (e) {
            alert('combo');
        });

        $('.k-dropdown').find('span').live("click blur", function (e) {
            alert('dropdown');
        });


        var data = [
                        { text: "Black", value: "1" },
                        { text: "Orange", value: "2" },
                        { text: "Grey", value: "3" }
                    ];


        $("#color").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data
        });


    });


</script>

Thanks,
Jayesh Goyani

[Ian]

Hi jayesh,
Thanks again for the example. I tried your solution and the alert('combox') fired when I tabbed into and out of the combobox but the alert('dropdown') never executed. 

PS. I did change your code slightly (see bold text) as I'm using jQuery 1.9 and I wanted the dropdown to trigger an event when somebody tabs into the control rather than clicking on it :

$('.k-dropdown').find('span').live("click blur", function (e) {            alert('dropdown');        });
to 
$('.k-dropdown').find('span').on("focus blur", function (e) {          alert('dropdown');        });

Did you get the alert('dropdown') to execute on your system? I'm not sure you can set a focus or blur event on a span element unless you assign it a tab index which creates additional problems as the user then ends up tabbing to the dropdown control twice.

Best regards, Ian

[Jayesh Goyani]

Hello,

Please check below demo.

In dropdown the span tag is there so Focus event will not work try with click event.

http://jsfiddle.net/SMVN7/


Thanks,
Jayesh Goyani

[Ian]

Hi Jayesh,
Thanks again for your help on this but, as I mentioned in the original post, I need to simulate a focus event that's triggered when somebody tabs into the dropdown list - a click event wouldn't be sufficient.

Best regards, Ian

[Jayesh Goyani]

Hello,

http://jsfiddle.net/SMVN7/1/

$(document).ready(function () {


        var data = [
                        { text: "Black", value: "1" },
                        { text: "Orange", value: "2" },
                        { text: "Grey", value: "3" }
                    ];


        $("#color").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data
        });


     $('.k-dropdown').find('span').on("blur", function (e) {
            alert('dropdown');
        });

    $('.k-dropdown').on("focus", function (e) {
            alert('dropdown');
        });

    });

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

Please check below link.

http://jsfiddle.net/SMVN7/1/

Thanks,
Jayesh Goyani

[Ian]

Hi Jayesh,
After further investigation I now realise why your solution works in jsFiddle but, when I try it with my application, it still fails.

I notice that you're initialising the Kendo DropDownList client-side from an input element. What I didn't mention in my original post - and I didn't realise it was significant at the time - is that I'm generating the DropDownList using Kendo's MVC wrappers. Clearly there's a subtle difference in the actual HTML and JS that's generated between your client-side solution and my server-side solution which prevents your approach working. To prove the point, I did add an <input> element to my MVC view and generated the DropDownList client-side as you have done and the focus/blur events both worked. Unfortunately, because RAZOR statements are executed server-side by IIS, I don't believe there's a way to upload a working example to jsFiddle.

Regretfully, we're too far into our development cycle to go back and change all of the views now but I will submit a support ticket to Telerik to ask whether they can do anything in the wrappers to generate HTML that would work using your approach.

Thanks for your help and I'm sorry to took a long time to get to this point. : -)

Best regards, Ian

[Jayesh Goyani]

Hello,

<script type="text/javascript">
    $('.k-combobox').find('span').find('input').live("focus", function (e) {
        $("#spnaText").html("combo focus");
    });
    $('.k-combobox').find('span').find('input').live("blur", function (e) {
        $("#spnaText").html("combo blur");
    });
    $('.k-dropdown').live("blur", function (e) {
        $("#spnaText").html("DropDown blur");
    });

    $('.k-dropdown').live("focus", function (e) {
        $("#spnaText").html("DropDown focus");
    });
</script>
@(Html.Kendo().ComboBox()
          .Name("size")
          .Placeholder("Select size...")
          .BindTo(new List<string>() {
              "X-Small",
              "Small",
              "Medium",
              "Large",
              "X-Large",
              "2X-Large"
          })
          .SelectedIndex(3)
          .Suggest(true)
)
<a href="#">test</a>
@(Html.Kendo().DropDownList()
          .Name("color")
          .DataTextField("Text")
          .DataValueField("Value")

          .BindTo(new List<SelectListItem>() {
              new SelectListItem() {
                  Text = "Black",
                  Value = "1"
              },
              new SelectListItem() {
                  Text = "Orange",
                  Value = "2"
              },
              new SelectListItem() {
                  Text = "Grey",
                  Value = "3"
              }
          })
          .Value("1")
)
<span id="spnaText"></span>

Let me know if any concern.

Thanks,
Jayesh Goyani

[Ian]

Hi Jayesh,
I followed up the issue of why your previously proposed solution didn't work using the MVC DropDownList wrapper with Telerik. It turns out the issue arose because the jQuery 'on' methods used to add the focus/blur event functions to the <span> element (with the k-dropdown class) were being invoked before the wrappers had actually created the DOM object for the dropdownlist.

The solution was to re-order the scripts to ensure the span element existed before trying to add the focus/blur functions. This can either be done by manually tweaking the script order or there's a useful wrapper Deferred() method that helps:

@(Html.Kendo().DropDownList()
  .Name("ClientId") 
  .DataTextField("Text")
  .DataValueField("Value")
  .BindTo((IEnumerable<SelectListItem>)Model.Clients)
  .Deferred()
)

You then use a @Html.Kendo().DeferredScripts() statement to influence the order that the scripts get loaded:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
@Scripts.Render("~/bundles/modernizr")
@Html.Kendo().DeferredScripts()
@Scripts.Render("~/bundles/utility")

Thanks for all your help.

Best regards, Ian

[deanna]

Hi, 

 

Try this code. It worked for me.

$(document).ready(function (){

     var $dropDownList = $("span.k-widget.k-dropdown.k-header"); 
      $dropDownList.focus(function () { this.click() });

})

[Bradley Fulton]

You can attach a class to the original input field, and the Kendo stuff will copy the class so that you can use to class to hook up a focus event.  Here is the Telerik example:

http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/detect-wrapper-focus-event

Note: I changed ".on" to ".one" to prevent infinite loops