Bug report

PanelBar's TagHelper item url property incorrectly loads content instead of redirecting in v. 2021.2.616

Reproduction of the problem

1. Create a project that uses Kendo version 2021.2.616
2. Initialize the following PanelBar with TagHelper:

    <kendo-panelbar name="panelbar1" class="k-scrollable" style="font-size:smaller" expand-mode="single">
        <items>
            <panelbar-item name="item1" text="First Item (/Index)" url="/Index" />
            <panelbar-item name="item1" text="Second Item (/Privacy)" url="/Privacy" />
            <panelbar-item name="item2" text="Third Item (Telerik demos)" url="https://demos.telerik.com/aspnet-core/"/>
        </items>
    </kendo-panelbar>

3. Compare with the PanelBar with HtmlHelper:

      @(Html.Kendo().PanelBar()
                  .Name("panelbar")
                  .ExpandMode(PanelBarExpandMode.Single)
                  .Items(panelbar =>
                  {
                      panelbar.Add().Text("First Item (/Index)").Url("/Index");
                      panelbar.Add().Text("Second Item (/Privacy)").Url("/Privacy");
                      panelbar.Add().Text("Third Item (Telerik demos)").Url("https://demos.telerik.com/aspnet-core/");
                  })
            )

Current behavior

The Url property of the TagHelper loads content instead of redirecting.

Expected/desired behavior

The Url property should redirect and not load content.

Environment

• Kendo UI version: 2021.2.616
• Browser: [all]

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]

Bug report

When PanelBar is configured with tag helpers selected="true" is not applied and the item is not rendered as selected.

Reproduction of the problem

1. Create an UI for ASP.NET Core application and use configuration as in the example below:

<kendo-panelbar name="panelbar">
    <items>
        <panelbar-item text="Item 1" selected="true">
        </panelbar-item>
        <panelbar-item text="Item 2">                    
        </panelbar-item>
    </items>
</kendo-panelbar>

Current behavior

The 'Item 1' is not marked as selected.

Expected/desired behavior

The item should be marked as selected when the PanelBar widget is loaded.

Environment

• Kendo UI version: 2021.1.330
• Browser: [all ]

Bug report

Reproduction of the problem

If an item is set to expanded="false" (see the "Storage" item in the snippet below) in the PanelBar's tag helper, it displays the "collapse" icon, instead of an "expand" icon:

<kendo-panelbar name="project">
	<items>
		<panelbar-item text="Storage" expanded="false">
			<items>
				<panelbar-item text="Wall Shelving"></panelbar-item>
				<panelbar-item text="Floor Shelving"></panelbar-item>
				<panelbar-item text="Kids Storag"></panelbar-item>
			</items>
		</panelbar-item>
		<panelbar-item text="Lights">
			<items>
				<panelbar-item text="Ceiling"></panelbar-item>
				<panelbar-item text="Table"></panelbar-item>
				<panelbar-item text="Floor"></panelbar-item>
			</items>
		</panelbar-item>
	</items>
</kendo-panelbar>

This is caused by incorrect classes being applied to the item. It should have the "k-panelbar-expand k-i-arrow-60-down" classes, instead it has the "k-panelbar-collapse k-i-arrow-60-up" classes.

Current behavior

"k-i-arrow-60-up" icon is displayed.

Expected/desired behavior

"k-i-arrow-60-down" icon is displayed.

Environment

• Kendo UI version: 2020.2.617
• jQuery version: x.y
• Browser: [all]

Bug report

When visible attribute is set to false for a panelbar-item, the item remains visible when the widget is rendered.

Reproduction of the problem

<kendo-panelbar name="project">
        <items>
            <panelbar-item text="Storage" expanded="true">
                <items>
                    <panelbar-item visible="false" text="Kids Storage" ></panelbar-item>
                </items>
            </panelbar-item>
        </items>
</kendo-panelbar>

Current behavior

Adding visible attribute to panelbar-item does not change its visibility.

Expected/desired behavior

Adding visible attribute to panelbar-item should change item visibility.

Environment

• Kendo UI version: 2019.2.619
• Browser: [all]

Hi Team

With the latest version of Kendo (Silver Theme), The selected color of a Panelbar was white now it's blackish.

Do you have a quick fix for that?

Many thanks

Giuseppe