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

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.