jQuery UI Widgets Forums Dialogs and Notifications Window Problem with using Widgets

This topic contains 6 replies, has 2 voices, and was last updated by  norathem 10 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Problem with using Widgets #25563

    norathem
    Participant

    Hey there,
    I’m new to jQ Widges and after testing some Widges on theire own I now tried to use several at the same time and failed 😀

    The Idea is to have a Window, containing a Splitter and on the left part of the Splitter I want to have a NavigationBar with a Tree as one of its contents.

    Its working so far but it got some issues and I hope that you can help me to fix them:

    1. I seems like it dont accept some sizes for the window. Like it dossnt matter if I enter 1000px or 1500px for the width.
    2. The resizing of the Window dossnt work either as I can only make it smaller, not bigger.
    3. In the tree the Node User is expanded by default but it dossnt show any content before closing and reopening it again.
    4. Also the tree has some scrolling issues as you can’t scroll far enough to see all items.

    Heres my code so far:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    //Create Window
    $("#jqxwindow").jqxWindow({ width: '1300px', height: '700px', showCollapseButton: 'true', resizable: 'false' });
    // Create Splitter
    $("#jqxSplitter").jqxSplitter({ width: '100%', height: '100%'});
    // Create jqxNavigationBar
    $("#jqxnavigationbar").jqxNavigationBar({ width: 'auto', height: 'auto', expandMode: 'multiple'});
    // Create jqxTree
    $('#jqxTree').jqxTree({ height: 'auto', width: 'auto' });
    $('#jqxTree').bind('select', function (event) {
    var htmlElement = event.args.element;
    var item = $('#jqxTree').jqxTree('getItem', htmlElement);
    document.getElementById('label1').innerText = item.label;
    //alert(item.label);
    });
    });
    </script>
    </head>
    <body>
    <div id='jqxwindow'>
    <div>Header</div>
    <div>
    <div id='jqxSplitter'>
    <!--First Splitter Section-->
    <div>
    <h1>NavigationBar Test</h1>
    <div id='jqxnavigationbar'>
    <div>
    <!--Header-->
    Filter
    </div>
    <div>
    <!--Content-->
    Content 1
    <br>
    Content 2
    </div>
    <div>
    <!--Header-->
    Navigation
    </div>
    <div>
    <!--Content-->
    <div id='jqxTree'>
    <ul>
    <li item-selected='true' item-expanded='true'>User
    <ul>
    <li>Info
    <ul>
    <li>Info 1</li>
    <li>Info 2</li>
    </ul>
    </li>
    <li>Documents
    <ul>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    </ul>
    </li>
    <li>More Documents
    <ul>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    <li>Document 1</li>
    <li>Document 2</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <!--Second Splitter Section-->
    <div>
    <h1>Editor</h1>
    <h3 id='label1'>nothing clicked so far ...</h3>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    • This topic was modified 10 years, 11 months ago by  Peter Stoev. Reason: Moved to Window Forum
    Problem with using Widgets #25584

    Peter Stoev
    Keymaster

    Hi,

    The window has default maximum and minimum size set. If you want to use bigger than 600×600 size, you need to set the maxWidth and maxHeight properties, too.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Problem with using Widgets #25587

    norathem
    Participant

    Stupid me, should have thought about that .. thanks anyways.

    Any idea about the Tree issues?

    Problem with using Widgets #25647

    Peter Stoev
    Keymaster

    Hi,

    There are no settings “auto” for width and height. These are not supported. You can use either Fixed size or Percentage Size.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Problem with using Widgets #25660

    norathem
    Participant

    I tried using 100% instead of auto before but sadly it doesn’t work neither.
    The problem is that the second Navigation Tab (the on with the Tree in it) doesn’t expand correctly – it simply shows just a line of roughly 1px.

    I also tried to do the initialization of the tree inside the “initContent function” of the Navigation Bar but it didn’t made a difference.

    Problem with using Widgets #25699

    norathem
    Participant

    I made some more Testing with a simple Tree without any other Widgets and can narrow it down to the following:

    If I give the height in pixels it works fine – but since I dont know the exact hight its not really a solution
    If I give the height in percentage it simply showes a 1px line no matter what.
    If I use auto for the high it works, but it dosn’t show a scrollbar when the items extend the visible area.

    Problem with using Widgets #25709

    norathem
    Participant

    Ok the problem seems to be that im using ” expandMode: ‘multiple’ ” in the Navigation Bar and it doesn’t work with the Tree

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

You must be logged in to reply to this topic.