TreeView Inside PanelBar conflict

6 posts, 1 answers
  1. Jhonny
    Jhonny avatar
    2 posts
    Member since:
    Jan 2012

    Posted 16 Feb 2012 Link to this post

    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?

  2.
  3. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Chris
    Chris avatar
    3 posts
    Member since:
    Jan 2012

    Posted 21 Feb 2012 Link to this post

    [ deleted by poster ]
  7. Alexey
    Alexey avatar
    3 posts
    Member since:
    Oct 2010

    Posted 03 Mar 2012 Link to this post

    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.
  8.
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Alexey
    Alexey avatar
    3 posts
    Member since:
    Oct 2010

    Posted 06 Mar 2012 Link to this post

    Thanks, Kamen!
    It was really helpful :)
Back to Top