jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Splitter left show tree but in tab does not show grid
Tagged: splitter tree mysql jsp grid
This topic contains 4 replies, has 2 voices, and was last updated by ENVER2007 5 years, 9 months ago.
-
Author
-
<!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!
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,
MartinjQWidgets Team
https://www.jqwidgets.com/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.Hello ENVER2007,
Could you send us a fiddle example of this case, so we can reproduce and inspect this behavior?
Thank you!Best Regards,
MartinjQWidgets Team
https://www.jqwidgets.com/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.
-
AuthorPosts
You must be logged in to reply to this topic.