TreeView Inside PanelBar conflict

[Jhonny]

Hello,

I am having problem when trying to use KendoUI's TreeView inside PanelBar. It seems that the panelBar is changing all ul/li child nodes, even those that should not have anything to do with the Panel. e.g. panel < ul < li < div < div < ul < li.

It's adding k-item, k-state-default to all child li nodes.

I'm using version v2011.3.1129

Is there any workaround to this?

[Kamen Bundev]

Hello Jhonny,

This issue was fixed in the service pack that was released the previous week, please upgrade to fix it. Alternatively, the fix is rather simple, so I'm including a patch for it.

Greetings,
Kamen Bundev
the Telerik team

[Chris]

[ deleted by poster ]

[Alexey]

I am using the latest 2011.3.1407, but the issue is still there.

I confirm that the patch provided in this forum is applied to the source code I have.

I see no javascript errors, but all the panel items are expanded and could not collapse.

When I remove ".kendoTreeView()" calls from the script everything works just fine.

Here is my HTML:

<ul id="formNavPanel">

        <li>Mailbox

            <ul id="forms-1">

                    <li id="form-10">Inbox</li>

                    <li id="form-11">Unread</li>

                    <li id="form-12">Outbox</li>

                    <li id="form-13">Draft</li>

            </ul>

        </li>

        <li>Tender

            <ul id="forms-2">

                    <li id="form-20">Tender Document</li>

                    <li id="form-21">Decision Required</li>

                    <li id="form-22">Request for Information</li>

                    <li id="form-23">Response</li>

            </ul>

        </li>

        <li>Design

            <ul id="forms-3">

                    <li id="form-30">Design Document</li>

                    <li id="form-31">Design Variation</li>

                    <li id="form-32">Meeting Request</li>

            </ul>

        </li>

</ul>

 

<script type="text/javascript">

    $(document).ready(function() {

        $("#formNavPanel").kendoPanelBar({

            expandMode: "single"

        });

        $("#forms-1").kendoTreeView();

        $("#forms-2").kendoTreeView();

        $("#forms-3").kendoTreeView();

    });

</script>

 
P.S. When I initialize tree views before the panel bar then the panel bar works, but tree views are not shown (panels are empty).

P.P.S. When I add some items to trees then on each tree node I see both tree and panel expand icons.

[Kamen Bundev]

Hello Alexey,

You're placing the TreeView directly in the PanelBar items - this is not the way to go. There's no way how the PanelBar will know where it ends and where the TreeView starts. You need to place the TreeView in content elements (divs), like this:
<ul id="formNavPanel">
    <li>Mailbox
        <div>
            <ul id="forms-1">
                <li id="form-10">Inbox</li>
                <li id="form-11">Unread</li>
                <li id="form-12">Outbox</li>
                <li id="form-13">Draft</li>
            </ul>
        </div>
    </li>
    <li>Tender
        <div>
            <ul id="forms-2">
                <li id="form-20">Tender Document</li>
                <li id="form-21">Decision Required</li>
                <li id="form-22">Request for Information</li>
                <li id="form-23">Response</li>
            </ul>
        </div>
    </li>
    <li>Design
        <div>
            <ul id="forms-3">
                <li id="form-30">Design Document</li>
                <li id="form-31">Design Variation</li>
                <li id="form-32">Meeting Request</li>
            </ul>
        </div>
    </li>
</ul>

That said, there is a styling bug when the TreeView has sub items and when it is placed in a PanelBar. I've fixed it and the fix will be available with the next release in several weeks. I've also updated your points for the report.

Greetings,
Kamen Bundev
the Telerik team

[Alexey]

Thanks, Kamen!
It was really helpful :)