jQuery UI Widgets › Forums › Navigation › Tree › Control tree from link in splitter

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 12 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Control tree from link in splitter Posts
  • August 20, 2012 at 7:17 pm Control tree from link in splitter #6911

    txspiderman
    Member

    I really like the tree in the splitter view. I would like to be able to do the following.

    1) On load have the first parent opened
    2) have all the children disabled
    3) display parent in splitter window, like demo
    4) Click next from splitter enable next child OR top level in tree
    5) Click previous and select parent

    August 21, 2012 at 7:37 am Control tree from link in splitter #6922

    Dimitar
    Participant

    Hello txspiderman,

    Here is how to have the first list item selected and opened when the page is loaded. Its text will be shown on the right. The example is based on the one in the demo.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this sample is demonstrated how to create a basic navigation
            with jqxTree and jqxSplitter. </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'classic';
                // Create jqxTree
                $('#jqxTree').jqxTree({ theme: theme, height: '100%', width: '100%' });
                $("#splitter").jqxSplitter({ theme: theme, width: 650, height: 400, panels: [{ size: 250}] });
                $('#jqxTree').bind('select', function (event) {
                    $("#TextContent").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>");
                });
                //finds all the li elements in the jqxTree
                var Desc = $("#jqxTree").find("li");
                // enables and selects the first item
                $('#jqxTree').jqxTree('enableItem', Desc[0]);
                $('#jqxTree').jqxTree('selectItem', Desc[0]);
            });
        </script>
    </head>
    <body class='default'>
        <div id="splitter">
            <div>
                <div style="border: none;" id='jqxTree'>
                    <ul>
                        <li id="Mail" item-expanded='true'>
                            <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
                                item-title="true">Mail</span>
                            <ul>
                                <li id="Calendar" item-expanded='true'>
                                    <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
                                        item-title="true">Calendar</span> </li>
                                <li id="Contacts">
                                    <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                        item-title="true">Contacts</span> </li>
                                <li id="Inbox">
                                    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                        item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
                                    <ul>
                                        <li id="jQWidgets">
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">jQWidgets</span>
                                            <ul>
                                                <li id="Admin">
                                                    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                        item-title="true">Admin</span> </li>
                                                <li id="Corporate">
                                                    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                        item-title="true">Corporate</span> </li>
                                                <li id="Finance">
                                                    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                        item-title="true">Finance</span> </li>
                                                <li id="Other">
                                                    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                        item-title="true">Other</span> </li>
                                            </ul>
                                        </li>
                                        <li id="Personal">
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">Personal</span> </li>
                                    </ul>
                                </li>
                                <li id="Deleted Items" item-expanded='true'>
                                    <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
                                        item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                    <ul>
                                        <li id="Today">
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">Today</span> </li>
                                        <li id="Last Week">
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">Last Week</span> </li>
                                        <li id="Last Month">
                                            <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                item-title="true">Last Month</span> </li>
                                    </ul>
                                    <li id="Notes">
                                        <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
                                            item-title="true">Notes</span> </li>
                                    <li id="Settings">
                                        <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
                                            item-title="true">Settings</span> </li>
                                    <li id="Favorites">
                                        <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                            item-title="true">Favorites</span> </li>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="ContentPanel">
                <div id="TextContent">
                </div>
            </div>
        </div>
    </body>
    </html>

    Unfortunately, at this time, we do not have an API which to implement your other queries with.

    Best Regards,
    Dimitar

    jqWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.