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

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

3 Answers 161 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Carrie
Top achievements
Rank 1
Carrie asked on 19 Sep 2013, 07:04 PM
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>);
    })
)

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Sep 2013, 07:11 AM
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!
0
Carrie
Top achievements
Rank 1
answered on 20 Sep 2013, 11:29 AM
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');
    }
0
Accepted
Dimo
Telerik team
answered on 23 Sep 2013, 11:50 AM
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!
Tags
PanelBar
Asked by
Carrie
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Carrie
Top achievements
Rank 1
Share this question
or