Splitter left show tree but in tab does not show grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: splitter tree mysql jsp grid

This topic contains 4 replies, has 2 voices, and was last updated by ENVER2007 4 months, 2 weeks ago.

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

Author

Splitter left show tree but in tab does not show grid Posts
October 8, 2019 at 5:46 pm Splitter left show tree but in tab does not show grid #106956
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!
October 9, 2019 at 11:26 am Splitter left show tree but in tab does not show grid #106960

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/

October 9, 2019 at 11:39 am Splitter left show tree but in tab does not show grid #106961

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.

October 10, 2019 at 9:14 am Splitter left show tree but in tab does not show grid #106984

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/

October 10, 2019 at 12:08 pm Splitter left show tree but in tab does not show grid #106986

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.
Author

Posts

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

You must be logged in to reply to this topic.