This is a migrated thread and some comments may be shown as answers.

Bug? Multiselect does not respond when its label is clicked

6 Answers 62 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 18 Oct 2013, 02:15 PM
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"
                  })
            )

6 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 22 Oct 2013, 07:29 AM
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!
0
Ian
Top achievements
Rank 1
answered on 22 Oct 2013, 09:52 AM
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.
0
Georgi Krustev
Telerik team
answered on 23 Oct 2013, 09:12 AM
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!
0
Ian
Top achievements
Rank 1
answered on 23 Oct 2013, 09:34 AM
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
0
Accepted
Georgi Krustev
Telerik team
answered on 23 Oct 2013, 02:34 PM
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!
0
Ian
Top achievements
Rank 1
answered on 23 Oct 2013, 02:47 PM
Great. That's made the behaviour consistent. Thanks.
Tags
MultiSelect
Asked by
Ian
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Ian
Top achievements
Rank 1
Share this question
or