[Bug] Certain click events not triggering in MenuItems

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    14 posts
    Member since:
    May 2013

    Posted 25 Jul 2013 Link to this post

    Hi,

    I believe my experience below is a bug, in which case I can report it elsewhere if this is not the proper channel.

    I'm currently creating a Menu with custom text in an absolutely-positioned context menu. Each item has a checkbox and a label. Everything works fine except clicking on the label does not alter the checkbox (no click/change event is fired on the checkbox). What's even weirder, is that while holding the mouse button down on the label, the checkbox changes to its active state, so the link between the two items is clearly made.

    I believe this bug stems from the openOnClick and closeOnClick configurations, because with a simple test case of one item, the bug can only be reproduced by passing values to one or both of these parameters in the configuration object. Adding a child to this test case will always produce the bug (presumably because the configurations are set to their defaults internally).

    Below is my server wrapper code and a client-side test case. Both exhibit the bug, although the subitem from the latter can be removed to result in correct functionality.
    @(Html.Kendo().Menu()
                .Name("s-mapMenu")
                .Orientation(MenuOrientation.Vertical)
                .Direction(MenuDirection.Right)
                .OpenOnClick(false)
                .CloseOnClick(false)
                .BindTo((IEnumerable<MyModels.Event>)ViewBag.EventList, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<MenuItem> mappings) => mappings
                    .For<MyModels.Event>(binding => binding
                        .ItemDataBound((item, e) =>
                        {
                            item.Text = "<input type=\"checkbox\" checked class=\"s-checkbox\" id=\"toggle-" + e.EventID + "\" /><label for=\"toggle-" + e.EventID + "\">" + e.Name + "</label>";
                            item.Encoded = false; // Need this in order to render item.Text as HTML
                        })
                        .Children(e => e.EventObjects.Where(obj => obj.ArchivedDate == null).OrderByDescending(obj => obj.LastUpdated))
                    )
                    .For<MyModels.EventObject>(binding => binding
                        .ItemDataBound((item, o) =>
                        {
                            item.Text = "<input type=\"checkbox\" checked class=\"s-checkbox\" id=\"toggle-" + o.EventObjectID + "\" /><label for=\"toggle-" + o.EventObjectID + "\">" + o.Name + "</label>";
                            item.Encoded = false; // Need this in order to render item.Text as HTML
                        })
                        .Children(o => o.EventObjects.Where(obj => obj.ArchivedDate == null).OrderByDescending(obj => obj.LastUpdated))
                    )
                )
            )
    <ul id="myMenu">
        <li>
            <input id="foo" type="checkbox" /><label for="foo">hello</label>
            <!-- Removing the interior list below removes the bug -->
            <ul>
                <li>child</li>
            </ul>
        </li>
    </ul>
    <script>
        $("#myMenu").kendoMenu();
    </script>
    If you know of any workarounds, I would greatly appreciate it, as right now I have to manually listen for click events on the label.

    Thanks,
    Jeff
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jul 2013 Link to this post

    Hello Jeff,

    The Kendo UI Menu prevents some default DOM events in order to prevent unexpected behavior. Indeed, in this case when clicking on the label, the default event should not be prevented. This issue has been fixed and changes will take effect in the next internal and official builds. I have updated your Telerik points for bringing the issue to our attention, thanks.

    Regards,
    Dimo
    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
Back to Top