标签: kendo-panelbar

我是 Kendo UI PanelBar 的新手。当用户单击按钮时，我想使用 javacript 扩展面板栏。谢谢你的帮助。

@(Html.Kendo().PanelBar()
            .Name("TestBar")
            .Items(panelbar =>
            {
                panelbar.Add().Text("Additional Information")
                .Content(@<text>@Html.Partial("Req") </text>);
            })
        )

这是一个不幸的问题,但我没有看到任何其他方法.

基本上,我使用Kendo UI面板栏来创建可扩展列表.问题是,当您使用a <ol>作为子列表时,面板栏功能不起作用.

小提琴中的例子: http ://jsfiddle.net/b3y62uzr/2/

HTML:

<ul id="panelBar1">
    <li>
        Item 1
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
    </li>
    <li>Item 2
            <ol>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ol>
    </li>
</ul>

您可以看到第一个项目可以正确展开/折叠,但第二个项目始终处于打开状态且无法与之交互.

在我的应用程序中,我需要在扩展部分中的子列表编号而不是项目符号.(我修改了Kendo Panelbar样式以显示子弹).

所以问题是:是否有可能<ul>使用数字代替子弹？

编辑:如果您想要答案,请使用此小提琴:https://jsfiddle.net/1h2kLqu4/1/

我有以下面板栏：

     <kendo-panelbar *ngIf="mainMenu" 
        [expandMode]="expandMode">
        <kendo-panelbar-item [title]="menuItem.title" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
          [routerLink]="menuItem.link" routerLinkActive="active">
            <kendo-panelbar-item [title]="menuItemSub.title" *ngFor="let menuItemSub of menuItem.sub" 
            [routerLink]="menuItemSub.link" routerLinkActive="active">
            </kendo-panelbar-item>
        </kendo-panelbar-item>
      </kendo-panelbar>

生成的项目的一个例子是这样的：

    <kendo-panelbar-item routerlinkactive="active" tabindex="0" ng-reflect-router-link="/dashboard-edge" 
ng-reflect-router-link-active="active" ng-reflect-title="Dashboard Edge" 
ng-reflect-icon-class="fa fa-lg fa-window-maximize" role="treeitem" 
class="k-item k-state-default " id="k-panelbar-item-default-1" aria-selected="false">
    <span class="k-link k-header">
        <!--bindings={"ng-reflect-ng-if": "fa fa-lg fa-window-maximize"}-->
        <span class="k-icon fa fa-lg fa-window-maximize" ng-reflect-klass="k-icon" 
        ng-reflect-ng-class="[object Object]">
        </span>
        <!--bindings={"ng-reflect-ng-if": ""}-->
        Dashboard Edge
        <!--bindings={}-->
        <!--bindings={"ng-reflect-ng-if": "false"}-->
    </span>
<!--bindings={"ng-reflect-ng-if": "false"}-->
</kendo-panelbar-item>

如何自定义项目的内容（使用 HTML），以便更好地控制信息的显示方式？例如，我想将标题包装在<span>具有某些特定类的标签中。

我可以使用模板自定义内容，但不能自定义标题本身。