jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › DockPanel › Host ListBox in a DockPanel

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Host ListBox in a DockPanel Posts
  • June 7, 2012 at 8:23 pm Host ListBox in a DockPanel #4701

    Don
    Member

    How can I host listboxes inside dockpanel members with auto-sizing and the nice listbox scroll-bars showing instead of the generic scroll bars of the dock panel?

    Current script:
    $(“#infodocks”).jqxDocking({ width: 200, height:”100%”, mode:”floating”, theme:”shinyblack”, orientation:”vertical”, cookies:true, cookieOptions:{expires: 3650} });
    $(“#newmls”).jqxListBox({ source: newmls, theme:”shinyblack” });
    $(“#newppl”).jqxListBox({ source: newppl, theme:”shinyblack” });

    Current HTML:

    New Listings

    New Realtors

    June 7, 2012 at 8:26 pm Host ListBox in a DockPanel #4702

    Don
    Member

    Also, why does the width of my dockpanel appear to inversely affect the area the dockpanel members are shown when positions are recalled via cookies? ie. with a width of 800 all the panel members are bunched together but with a width of 200 they appear as they were.

    June 8, 2012 at 8:03 am Host ListBox in a DockPanel #4707

    Peter Stoev
    Keymaster

    Hi Don,

    Here’s how to display a ListBox that fits to the Docking Window’s Content.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#docking').jqxDocking({ orientation: 'horizontal', width: 250, mode: 'default' });
                $('#listBox').jqxListBox({ width: '100%', height: '100%', source: ['item 1', 'item 2', 'item 3'] });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="docking">
                <div style="overflow: hidden;">
                    <div id="window0" style="overflow: hidden; height: 100px">
                        <div>Header 1</div>
                        <div style="overflow: hidden;"><div id="listBox"></div></div>
                    </div>
                    <div id="window1" style="height: 100px">
                        <div>Header 2</div>
                        <div>Content 2</div>
                    </div>
                </div>
                <div style="overflow: hidden;">
                    <div id="window2" style="height: 100px; ">
                        <div>Header 3</div>
                        <div>Content 3</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.