PanelBar Collapse does not remove the k-state-selected styling

4 posts, 1 answers
  1. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 19 Sep 2013 Link to this post

    Hello,

    I have a panel bar with just one item.   Once I have expanded it and then collapse it the highlight is still there.  Using firebug I can see that the "k-state-selected" class is still applied.    When I collapse I want it to go back to the original styling as if it was never expanded.

    Please advise how I can accomplish this using the following example - preferable without having to manually remove the styling using Jquery as my implementation will be dynamic so I will not know what the IDs additionally I will have multiple panelbars on the page some of which may be open.

    Thanks,
    Carrie
    @(Html.Kendo().PanelBar()
        .Name("IntroPanelBar")
        .Items(items =>
        {
            items.Add()
                .Text("Getting Started")
                .Content(@<text>
                    Just some random content
                </text>);
        })
    )
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Sep 2013 Link to this post

    Hello Carrie,

    The observed behavior is by design, because the "selected" and "expanded" states are independent.

    You can use the PanelBar's collapse event to remove the k-state-selected CSS class manually. It is applied to the child element of the respective item's <li class="k-item"> element.

    http://docs.kendoui.com/api/web/panelbar#events-collapse

    Since you will receive the item's <li> element as an event argument, you don't have to hard-code any IDs.

    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
  4. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 20 Sep 2013 Link to this post

    Thanks for the tip, however I can't seem to get the class to remove.   

    I have added the collapse event handler and it is firing however I think there must be something wrong with my jquery call - any advice?
    function onCollapse(e) {
            $(e.item).children().removeclass('k-state-selected');
        }
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Sep 2013 Link to this post

    Hi Carrie,

    I recommend you to make sure you see and analyze the Javascript errors that the browser throws.

    Object has no method 'removeclass'

    On a side note, you may also want to remove the k-state-focused CSS class, which applies a shadow by design.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready