tabs and grid demo - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, tab

This topic contains 4 replies, has 2 voices, and was last updated by akanis 9 years, 1 month ago.

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

Author

tabs and grid demo Posts
August 27, 2015 at 1:40 pm tabs and grid demo #75211
akanis
Participant
Hi, the tabs-and-grid.htm demo works fine. If i change (only!) the data source for initGrid2, Tab1 shows the initGrid (its true), Tab2 shows blanc and back to Tab1 now is showing initGrid2. I tried many variations, read the documentation of jqwidget, but without success. Anybody know the reason ?

Regards akanis

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This demo shows how to display jqxGrid in jqxTabs.
</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.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=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.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/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxchart.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var initGrid = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘../sampledata/nasdaq_vs_sp500.txt’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
columns: [
{ text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
{ text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
{ text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
]
});
}

var initGrid2 = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘datum’ },
{ name: ‘dax’ },
{ name: ‘nflx’ }
],
url: ‘../sampledata/nflx_vs_sp500.txt’
};
var dataAdapter2 = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter2,
columns: [
{ text: ‘Datum’, datafield: ‘datum’, cellsformat: ‘d’, width: 250 },
{ text: ‘DAX’, datafield: ‘dax’, width: 150 },
{ text: ‘NFLX’, datafield: ‘nflx’ }
]
});
}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initGrid2();
break;
}
}
$(‘#jqxTabs’).jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
});
</script>
</head>
<body class=’default’>
<div id=’jqxTabs’>
- Grid 2
<div style=”overflow: hidden;”>
<div style=”border:none;” id=”jqxGrid”>
</div>
</div>
<div style=”overflow: hidden;”>
<div style=”border:none;” id=”jqxGrid2″></div>
</div>
</div>
</body>
</html>
August 27, 2015 at 10:31 pm tabs and grid demo #75220
akanis
Participant
Hi, the same code, but better to read.

I hope for help, regards akanis

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This demo shows how to display jqxGrid in jqxTabs.
</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.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=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.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/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxchart.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var initGrid = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘../sampledata/nasdaq_vs_sp500.txt’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
columns: [
{ text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
{ text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
{ text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
]
});
}

var initGrid2 = function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘datum’ },
{ name: ‘dax’ },
{ name: ‘nflx’ }
],
url: ‘../sampledata/nflx_vs_sp500.txt’
};
var dataAdapter2 = new $.jqx.dataAdapter(source);
$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter2,
columns: [
{ text: ‘Datum’, datafield: ‘datum’, cellsformat: ‘d’, width: 250 },
{ text: ‘DAX’, datafield: ‘dax’, width: 150 },
{ text: ‘NFLX’, datafield: ‘nflx’ }
]
});
}
// init widgets.
var initWidgets = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initGrid2();
break;
}
}
$(‘#jqxTabs’).jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
});
</script>
</head>
<body class=’default’>
<div id=’jqxTabs’>
- Grid 2
<div style=”overflow: hidden;”>
<div style=”border:none;” id=”jqxGrid”>
</div>
</div>
<div style=”overflow: hidden;”>
<div style=”border:none;” id=”jqxGrid2″>
</div>
</div>
</div>
</body>
</html>
August 27, 2015 at 10:56 pm tabs and grid demo #75221

akanis
Participant

Sorry, here is a link to the code, i hope it works now

https://www.jseditor.io/?key=tabs-and-grids

Regards akanis

How can i delete stupid posts of me ?

August 28, 2015 at 7:41 am tabs and grid demo #75234

ivailo
Participant

Hi akanis,

You have to initialize #jqxGrid2 instead #jqxGrid in your initGrid2 function.

Here is the demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

August 28, 2015 at 8:16 am tabs and grid demo #75238

akanis
Participant

Hi Ivailo, thank you. I had copied a working code block und changed some items, but forgot #jqxGrid.

Best Regards akanis
Author

Posts

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

You must be logged in to reply to this topic.