Current Page not selected in Panelbar's subitem

[Daniel]

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?

[Aleksandar]

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

[Daniel]

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.119" the "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]

Up

[Aleksandar]

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]

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]

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.