Bug report
The PanelBar for Telerik UI for ASP.NET Core and the PanelBar for Telerik UI for ASP.NET MVC HTML helper behaves differently and renders different markup for the same configuration.
Reproduction of the problem
When the the following configuration is used
@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Items(panelbar =>
{
panelbar.Add().Text("Index").Action("Index", "Home");
panelbar.Add().Text("Other Pages")
.Items(other =>
{
other.Add().Text("About").Action("About", "Home");
other.Add().Text("Contact").Action("Contact", "Home");
});
})
)
the following markup and initialization script are generated for Telerik UI for ASP.NET MVC:
<ul class="k-widget k-panelbar k-reset" id="panelbar">
<li class="k-item k-state-default"><a class="k-link k-header" href="/">Index</a></li>
<li aria-expanded="true" class="k-item k-state-active">
<span class="k-link k-header">Other Pages<span class="k-icon k-panelbar-collapse k-i-arrow-60-up"></span></span>
<ul aria-hidden="false" class="k-group">
<li class="k-item k-state-default"><a class="k-link" href="/Home/About">About</a></li>
<li class="k-item"><a class="k-link k-state-selected" href="/Home/Contact">Contact</a></li>
</ul>
</li>
</ul>
<script>
kendo.syncReady(function(){jQuery("#panelbar").kendoPanelBar({"expandMode":"multiple"});});
and for Telerik UI for ASP.NET Core
<ul class="k-widget k-panelbar k-reset k-header" id="panelbar" data-role="panelbar" tabindex="0" role="tree">
<li class="k-item k-state-default k-first" role="treeitem"><a class="k-link k-header" href="/">Index</a></li>
<li class="k-item k-state-default k-last" aria-expanded="false" role="treeitem">
<span class="k-link k-header">Other Pages<span class="k-icon k-panelbar-expand k-i-arrow-60-down"></span></span>
<ul class="k-group k-panel" style="display:none" role="group" aria-hidden="true">
<li class="k-item k-state-default k-first" role="treeitem"><a class="k-link" href="/Home/About">About</a></li>
<li class="k-item k-state-default k-last" role="treeitem" aria-selected="true"><a class="k-link k-state-selected" href="/Home/Contact">Contact</a></li>
</ul>
</li>
</ul>
<script>kendo.syncReady(function(){jQuery("#panelbar").kendoPanelBar({"autoBind":true,"loadOnDemand":true,"expandMode":"multiple"});});</script>
Current behavior
Besides the different markup the component behaves differently - navigating to the Contact page with the above configuration results in the PanelBar for Telerik UI for ASP.NET MVC being expanded and the Contact Child item selected, but the the PanelBar for Telerik UI for ASP.NET Core is collapsed and the selected item is not visible.
Expected/desired behavior
The PanelBar should behave the same way in the Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core suites.
Environment
- Kendo UI version: 2021.2.616
- Browser: [all]