Bug? Multiselect does not respond when its label is clicked

7 posts, 1 answers
  1. Ian
    Ian avatar
    11 posts
    Member since:
    Aug 2013

    Posted 18 Oct 2013 Link to this post

    I have the following code and when I click the Options label nothing happens. I would have expected the same effect as for clicking within the multi-select control itself (standard behaviour which your other widgets such as DropDownList observe). Is this a bug?  Thanks.
    <label for="Options">Options</label>
     @(Html.Kendo().MultiSelect()
                      .Name("Options")
                      .Placeholder("Please select")
                      .HtmlAttributes(new { style = "width: 100%;" })
                      .BindTo(new List<string>() {
                          "Option 1",
                          "Option 2"
                      })
                )
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 22 Oct 2013 Link to this post

    Hello Ian,

     
    The described behavior is actually expected. The MultiSelect element is a complex widget, which renders a hidden select element, which holds the selected options and UI for selecting tags. Because the select element is not visible the label element will not be able to focus it. I can suggest you to possible ways to handle this scenario:

    1. Put the widget inside the
    label element:

    <label for="Options">Options
     @(Html.Kendo().MultiSelect()
                      .Name("Options")
                      .Placeholder("Please select")
                      .HtmlAttributes(new { style = "width: 100%;" })
                      .BindTo(new List<string>() {
                          "Option 1",
                          "Option 2"
                      })
                )
    </label>

    2. Handle click event of the label element:
    <label for="Options">Options</label>
     @(Html.Kendo().MultiSelect()
                      .Name("Options")
                      .Placeholder("Please select")
                      .HtmlAttributes(new { style = "width: 100%;" })
                      .BindTo(new List<string>() {
                          "Option 1",
                          "Option 2"
                      })
                )
    <script>
        $(function () {
            $("label").click(function() {
                var multiselect = $("#" + $(this).attr("for")).data("kendoMultiSelect");
     
                if (multiselect) {
                    multiselect.focus();
                }
            })
        });
    </script>
    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. Ian
    Ian avatar
    11 posts
    Member since:
    Aug 2013

    Posted 22 Oct 2013 Link to this post

    Thanks for the workarounds Georgi. I need to use the second method but using focus() is not consistent with the standard behaviour of clicking the labels for the other controls. Clicking the other labels causes the dropdown to appear not just giving focus to the control. Can you suggest an alternative to focus() to achieve this? Thanks.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 23 Oct 2013 Link to this post

    Hello Ian,

     
    You can check this jsFiddle demo, which shows how to focus different widgets when click label tag.

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ian
    Ian avatar
    11 posts
    Member since:
    Aug 2013

    Posted 23 Oct 2013 Link to this post

    But that jsfiddle demo has the same problem. Focus is given to the multiselect but the dropdown does not appear. This behaviour is inconsistent with the other controls. Can you tell me how to make the dropdown appear for the multiselect also (not just focus)? Thanks
  7. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 23 Oct 2013 Link to this post

    Hello Ian,

     
    If you want to open the widget's popup on label click then you will need to use the widget open method. Check the updated jsFiddle demo.

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Ian
    Ian avatar
    11 posts
    Member since:
    Aug 2013

    Posted 23 Oct 2013 Link to this post

    Great. That's made the behaviour consistent. Thanks.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready