Focus/Blur for DropDownList

17 posts, 0 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 17 Jun 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 19 Jun 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 24 Jun 2013 Link to this post

    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
  5. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 24 Jun 2013 Link to this post

    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
  6. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Jun 2013 Link to this post

    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
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Jun 2013 Link to this post

    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
  8. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Jun 2013 Link to this post

    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
  9. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 27 Jun 2013 Link to this post

    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
  10. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 02 Jul 2013 Link to this post

    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
  11. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 03 Jul 2013 Link to this post

    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
  12. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 04 Jul 2013 Link to this post

    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
  13. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Jul 2013 Link to this post

    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
  14. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Jul 2013 Link to this post

    Hello,

    Please check below link.

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

    Thanks,
    Jayesh Goyani
  15. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 09 Jul 2013 Link to this post

    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
  16. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 15 Jul 2013 Link to this post

    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
  17. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 15 Jul 2013 Link to this post

    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
  18. deanna
    deanna avatar
    1 posts
    Member since:
    Oct 2011

    Posted 11 Jan in reply to Ian Link to this post

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

    })

Back to Top
Kendo UI is VS 2017 Ready