Current Page not selected in Panelbar's subitem

1 Answer 32 Views
PanelBar
Daniel
Top achievements
Rank 1
Iron
Iron
Veteran
Daniel asked on 04 Aug 2021, 01:10 PM | edited on 04 Aug 2021, 01:16 PM

Hey guys,

I'm using the PanelBar for side navigation. For describing my issue the following simple setup should work too.

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {
                        panelbar.Add().Text("Home").Action("Index", "Home");
                        panelbar.Add().Text("Offers")
                             .Items(offers=>
                             {
                                 offers.Add().Text("Show").Action("Index", "Offers");
                             });
                    })
                )

Each item in the PanelBar is connected to an action. When loading "/Home/Index" the selected item in the PanelBar after loading the page is the first item "Home". It works like expected.

But when loading "/Offers/Index", there will be nothing selected in the PanelBar. So in the end only the items in the highest item level are selected by it's action. You can see it when putting the "Offers/Index" directly under "Home/Index".

panelbar.Add().Text("Home").Action("Index", "Home");
panelbar.Add().Text("Offers").Action("Index", "Offers");

Currently I'm using "2021.2.616". I know from a previous project that this behavior wasn't yet in version "2021.1.119". There the subitems were also selected if the current url matched the href of the item.

Maybe a bug?

1 Answer, 1 is accepted

Sort by
1
Accepted
Aleksandar
Telerik team
answered on 09 Aug 2021, 10:18 AM

Hi Daniel,

This behavior will be expected as the PanelBar can have only one item selected. I see you have the parent item collapsed, but actually the item with the link corresponding to the current page is selected. You can verify this by inspecting the rendered HTML:

or, for example by enabling the ExpandAll configuration:

In the example above if the items are not expanded, upon clicking of the  Other Pages, i.e. the parent element of the selected element, the selection is changed, thus the About is no longer highlighted when Other Pages is expanded.

If desired, you can use jQuery to detect the selected element in a collapsed PanelBar, and manually apply styling to the parent element. In the scenario above, when the PanelBar items are not expanded, you can use the following to style Other Pages item as selected:

$('#PanelBar').find('.k-state-selected').parents('.k-item').find('.k-header').addClass('k-state-selected');

I hope the above clarifies the observed behavior and the suggestion helps implement the desired functionality.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 09 Aug 2021, 12:12 PM

Hi Aleksandar,

thank you for clarifying it! I can agree that subitems are actually marked as selected when I check the html or set the option "ExpandAll" to true.

So my real problem is that it's parent item is not automatically expanded when a subitem is the current page. Is this behavior expected because like i said in version "2021.1.119the "auto-expand" of the parent item, if the subitem is the current page, was working. That's the actual goal I'm trying to achieve. 

Daniel
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 11 Aug 2021, 11:01 AM

Up
Aleksandar
Telerik team
commented on 12 Aug 2021, 07:16 AM

With v2021.1.119 I observe the same behavior. Here is a screencast where the PanelBar item containing sub items is not automatically expanded and the same behavior is observed. Am I missing something? Here is the sample app I used to record the above screencast, can you modify it with the configuration you have and send it back so I can investigate further?
Daniel
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 12 Aug 2021, 08:04 AM

Forgot to mention that in the other project with v2021.1.119 I used .NET ASP.NET MVC instead of .NET Core.

Created a new project with v2021.1.119 in ASP.NET MVC and could observe the same behavior. The matching current page to the action of subitems effect the expanding of its parent. I uploaded the project.

Maybe this behavior is generally missing in .NET Core? That would be sad because I would've to program this behavior back with jquery by myself.

Aleksandar
Telerik team
commented on 17 Aug 2021, 07:25 AM

Thank you for the additional details, Daniel. I compared the behavior of the PanelBar in ASP.NET MVC and ASP.NET Core and indeed there are differences. I have logged an item in out public repository on the matter, available here:

https://github.com/telerik/kendo-ui-core/issues/6528

You can monitor the item for details on the issue.

I have also updated your Telerik points as a token of gratitude for helping us identify this issue.

Tags
PanelBar
Asked by
Daniel
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Aleksandar
Telerik team
Share this question
or