jQuery UI Widgets Forums General Discussions Splitter left show tree but in tab does not show grid

This topic contains 4 replies, has 2 voices, and was last updated by  ENVER2007 4 days, 16 hours ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • ENVER2007
    Participant

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>Using jqxTree with JSP and MySQL.</title>
    <link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../scripts/jquery-1.12.4.min.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxdata.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/jqxradiobutton.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../scripts/demos.js”></script>
    <style type=”text/css”>
    .demo-iframe {
    border: none;
    width: 600px;
    height: 400px;
    clear: both;
    }
    </style>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var source = {
    datatype: “json”,
    datafields: [{
    name: ‘EmployeeID’
    }, {
    name: ‘FirstName’
    }, {
    name: ‘Title’
    }, {
    name: ‘ReportsTo’
    }],
    id: ‘EmployeeID’,
    url: ‘jsp/select-tree-data.jsp’,
    async: false
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get the tree items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
    // the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
    // specifies the mapping between the ‘text’ and ‘label’ fields.
    var records = dataAdapter.getRecordsHierarchy(‘EmployeeID’,
    ‘ReportsTo’, ‘items’, [{
    name: ‘EmployeeID’,
    map: ‘id’
    }, {
    name: ‘FirstName’,
    map: ‘label’
    }, {
    name: ‘Title’,
    map: ‘value’
    }, {
    name: ‘ReportsTo’,
    map: ‘parentid’
    }]);
    $(‘#jqxTree1’).jqxTree({
    source: records,
    width: ‘200px’,
    height: ‘300px’,
    submitCheckedItems: true,
    checkboxes: true
    });
    $(‘#jqxTree1’).jqxTree(‘expandAll’);
    });
    </script>
    </head>
    <body class=’default’>
    <div style=’float: left;’>
    <<div style=”border: none;” id=’jqxTree1′>
    </div>
    </body>
    </html>

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=”Description”>Using jqxGrid with JSP and MySQL..</title>
    <link type=”text/css” rel=”Stylesheet” href=”../jqwidgets/styles/jqx.base.css” />
    <script type=”text/javascript” src=”../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxdata.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/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../scripts/demos.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var source = {
    datatype: “json”,
    datafields: [{
    name: ‘FirstName’,
    type: ‘string’
    }, {
    name: ‘LastName’,
    type: ‘string’
    }, {
    name: ‘Title’,
    type: ‘string’
    }, {
    name: ‘BirthDate’,
    type: ‘date’
    }],
    id: ‘EmployeeID’,
    url: ‘jsp/select-data.jsp’,
    async: true
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#jqxgrid”).jqxGrid({
    width: 550,
    autoheight: true,
    source: dataAdapter,
    columns: [{
    text: ‘First Name’,
    datafield: ‘FirstName’,
    width: 100
    }, {
    text: ‘Last Name’,
    datafield: ‘LastName’,
    width: 100
    }, {
    text: ‘Title’,
    datafield: ‘Title’,
    width: 180
    }, {
    text: ‘Birth Date’,
    datafield: ‘BirthDate’,
    cellsformat: ‘d’,
    align: ‘right’,
    cellsalign: ‘right’
    }]
    });
    });
    </script>
    </head>
    <body>
    <div id=”jqxgrid”></div>
    </body>
    </html>

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”jQuery Splitter, Splitter Widget, Splitter, jqxSplitter” />
    <meta name=”description” content=”This page demonstrates splitter’s events” />
    <title id=’Description’>This demonstration shows how to create a splitter that fits the entire browser window’s contents.
    </title>
    <link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../scripts/jquery-1.12.4.min.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”../jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var initWidgets = function (tab) {
    switch (tab) {
    case 0:
    $(‘#tab1’).load(‘grid.htm’);
    }
    }
    $(‘#splitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: ‘20%’, min: 150 }, { size: ‘80%’, min: 250}] });
    $(‘#jqxTree2’).load(‘tree.htm’);
    $(‘#ocsTabs’).jqxTabs({ width: ‘100%’,height: ‘100%’,initTabContent: initWidgets});
    });
    </script>
    <style type=”text/css”>
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id=’splitter’>
    <div>
    <div style=”border: none;” id=’jqxTree2′></div>
    </div>
    <div>
    <div id=’ocsTabs’>

    • Tab 1
    • Tab 2

    <div id=”tab1″ ></div>
    <div id=”tab2″ ></div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Tree shows but grid not!


    Martin
    Participant

    Hello ENVER2007,

    initTabContent is a method that loads the tabs’ content internally when the specific tabs is opened. You could not load an htm file inside in such a way.

    I would suggest you to follow the approach from this Demo.

    Best Regards,
    Martin

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


    ENVER2007
    Participant

    Funny thing is when use Firefox it is open only left content(tree) but not right content (grid inside tab), when use Chrome it is opposite
    open grid inside tab but not tree.


    Martin
    Participant

    Hello ENVER2007,

    Could you send us a fiddle example of this case, so we can reproduce and inspect this behavior?
    Thank you!

    Best Regards,
    Martin

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


    ENVER2007
    Participant

    Finally i found a particular solution but not generally. I change
    from:
    <div style=”border: none;” id=’jqxTree2′></div>
    to:
    <iframe src=”tree.htm”></iframe>

    Looks like we can not load two or more external pages.

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

You must be logged in to reply to this topic.