Unplanned
Last Updated: 17 Aug 2021 07:23 by Daniel
Daniel
Created on: 17 Aug 2021 07:23
Category: PanelBar
Type: Bug Report
0
The PanelBar HTML helper behaves differently and renders different markup for the same configuration in an ASP.NET MVC and ASP.NET Core applications.

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]
0 comments