Hey sematik…thanks for trying to reproduce the effect I was describing…
I am not sure how to add this code to save on your site so I am posting as-is and it’s a simple ssample that tries to simulate clicking on a “report” to trigger an external function to tally totals and apply to chart and to replace report records in records tab (not simulated as that’s not an issue)
Here you should see:
-
Clicking on a report radio function triggers a printChart function - this works as needed but I cannot figure out why trying to attach a chart to a tabbar layout does not work but attaches fine to a layout not within a tabbar. (See where I commented out //chart_01.data.parse(pieData_01);
-
I added a layour in a tabbar and without and marked accordingly. If you refresh the page (F5) you will see the tabbar clearly collapses and looks like it “repaints” the table cell when empty whereas the layout below simply replaces the data. Also…switching tabs the data disappears…chart too but i cannot simulate that here
-
Once data is in the table onload ot triggering from a radio button …try to go to Tab 02 and go back to see the data disappeears …the chart will too but I cannot figure out how to get it attached to a tabbar in this code
-
Your example for the tab 02 or grid is different than mine (from the grid 5 it was called i believe smart rendering mode)…so I do not know if that is the difference as ALL my records are loaded at once. I still see a “repaint or refresh” effect on your example but it is very subtle with the rendering added. With mine if you move the scrollbar all the way to the right OR the side scroll to the bottom you should see how switching between tabs causes the scrolling to “re scroll” versus a static position of where it was left off as in dhx 5 grid. Please note that it does the same thing in your example.
See dhtmlx 5 grid attached to a tabbar and you should see how nothing is refreshed or resorted or refreshed/painted as in 8 version:
https://dhtmlx.com/docs/products/dhtmlxTabbar/samples/04_components/01_grid_inside.html
If this is the desired effect the developers wanted then ok…but it’s not for me unfortunately.so, is there a way to simulate a tab bar …I don’t need the animate line but something like 2 conatiners and hide one while clicking on the opposite “tab” and show the other? Like dhx 5 “views”
Always appreciate your time and input!
<html>
<head>
<script src="dhtmlxSuite_v80_std/suite.min.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlxSuite_v80_std/suite.min.css"/>
<style>
.top_border {border-top: 1px solid #dedede; }
.right_border {border-right: 1px solid #dedede; }
.left_border {border-left: 1px solid #dedede; }
.bottom_border {border-bottom: 1px solid #dedede; }
body {margin: 0px;}
</style>
<script>
function printChart()
{
var total_01 = Math.floor(Math.random() * 100) + 1;
var total_02 = Math.floor(Math.random() * 100) + 1;
var total_03 = Math.floor(Math.random() * 100) + 1;
document.getElementById("total_C101").innerText = total_01;
document.getElementById("total_C102").innerText = total_02;
document.getElementById("total_C103").innerText = total_03;
const pieData_01 = [
{ id: "C1-01", value: total_01, color: "rgba(254, 185, 56, 0.8)", total: "total_01" },
{ id: "C1-02", value: total_02, color: "rgba(253, 148, 21, 0.8)", total: "total_02" },
{ id: "C1-02", value: total_03, color: "rgba(226, 50, 1, 0.8)", total: "total_03" }
];
//chart_01.data.parse(pieData_01);
document.getElementById("total_C201").innerText = total_01;
document.getElementById("total_C202").innerText = total_02;
document.getElementById("total_C203").innerText = total_03;
const pieData_02 = [
{ id: "C2-01", value: total_01, color: "rgba(254, 185, 56, 0.8)", total: "total_01" },
{ id: "C2-02", value: total_02, color: "rgba(253, 148, 21, 0.8)", total: "total_02" },
{ id: "C2-03", value: total_03, color: "rgba(226, 50, 1, 0.8)", total: "total_01" }
];
chart_02.data.parse(pieData_02);
}
</script>
</head>
<body onload="printChart();">
<div id="layout"></div>
<script>
record_data=[
{col_01:"Row 01 data",col_02:"Row 01 data",col_03:"Row 01 data",col_04:"Row 01 data"},
{col_01:"Row 02 data",col_02:"Row 02 data",col_03:"Row 02 data",col_04:"Row 02 data"},
{col_01:"Row 03 data",col_02:"Row 03 data",col_03:"Row 03 data",col_04:"Row 03 data"},
{col_01:"Row 04 data",col_02:"Row 04 data",col_03:"Row 04 data",col_04:"Row 04 data"},
{col_01:"Row 05 data",col_02:"Row 05 data",col_03:"Row 05 data",col_04:"Row 05 data"},
{col_01:"Row 06 data",col_02:"Row 06 data",col_03:"Row 06 data",col_04:"Row 06 data"},
{col_01:"Row 07 data",col_02:"Row 07 data",col_03:"Row 07 data",col_04:"Row 07 data"},
{col_01:"Row 08 data",col_02:"Row 08 data",col_03:"Row 08 data",col_04:"Row 08 data"},
{col_01:"Row 09 data",col_02:"Row 09 data",col_03:"Row 00 data",col_04:"Row 09 data"},
{col_01:"Row 10 data",col_02:"Row 10 data",col_03:"Row 10 data",col_04:"Row 10 data"}
]
var html_01 = `<table id="C-1" style="height:250px;width:400px;margin:10px; " cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" id='chart_01' style='width:250px;height:250px;border:1px solid #ddd;'></td>
</tr>
<tr>
<td id="total_C101" style="width:33%;text-align:center;padding:5px;border:1px solid #ddd;"></td>
<td id="total_C102" style="width:33%;text-align:center;padding:5px;border:1px solid #ddd;"></td>
<td id="total_C103" style="width:33%;text-align:center;padding:5px;border:1px solid #ddd;"></td>
</tr>
</table>`
var html_02 = `<table id="C-2" style="height:250px;width:400px;margin:10px;" cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" id='chart_02' style='width:250px;height:250px;border:1px solid #ddd;'></td>
</tr>
<tr>
<td id="total_C201" style="width:33%;text-align:center;padding:5px;border:1px solid #ddd;">0</td>
<td id="total_C202" style="width:33%;text-align:center;padding:5px;border:1px solid #ddd;">0</td>
<td id="total_C203" style="width:33%;text-align:center;padding:5px;border:1px solid #ddd;">0</td>
</tr>
</table>`
const layout = new dhx.Layout("layout", {
type: "none",
rows: [
{
cols: [
{
width: 275,
type: "none",
rows: [
{
id: "filter",
height: "100%",
css: "right_border"
}
]
},
{
type: "none",
rows: [
{
id: "tab_container",
header: "Tab Container",
height: "50%"
},
{
id: "layout_container",
header: "Layout Container",
html: html_02,
css: "top_border"
},
]}
]
}
]
});
const form = new dhx.Form(null, {
padding: 15,
rows: [
{
id: "report",
name: "report",
type: "radioGroup",
required: false,
label: "Report",
labelPosition: "top",
value: "group_01",
options: {
rows: [
{
type: "radioButton",
text: "Report 01",
value: "R01",
height: 30
},
{
type: "radioButton",
text: "Report 02",
value: "R02",
height: 30
},
{
type: "radioButton",
text: "Report 03",
value: "R03",
height: 30
}
]
}
}
]
});
form.getItem("report").events.on("change", function(value) {
if (value=="R01" || value=="R02" || value=="R03")
{
printChart();
}
});
const tabbar = new dhx.Tabbar(null, {
mode: "top",
views:[
{ id: "tab_01", tab: "Dashboard"},
{ id: "tab_02", tab: "Records"}
]
});
layout.getCell("tab_container").attach(tabbar);
layout.getCell("filter").attach(form);
const layout_tab_01 = new dhx.Layout(null, {
type: "none",
rows: [
{
cols: [
{
type: "none",
rows: [
{
id: "dashboard",
html: html_01
}
]}
]
}
]
});
const config_01 = {
type: "pie",
series: [
{ subType: "none",
showText: false,
value: "value",
color: "color",
text: "total",
strokeWidth: 0,
paddings:0
}
]
};
const chart_01 = new dhx.Chart("chart_01", config_01);
const config_02 = {
type: "pie",
series: [
{ subType: "none",
showText: false,
value: "value",
color: "color",
text: "total",
strokeWidth: 0,
paddings:0
}
]
};
const chart_02 = new dhx.Chart("chart_02", config_02);
tabbar.getCell("tab_01").attach(layout_tab_01);
recs = new dhx.Grid(null,
{
columns:
[
{ width: 200, id: "col_01", header: [{ text: "Column 01" }]},
{ width: 200, id: "col_02", header: [{ text: "Column 02" }]},
{ width: 800, id: "col_03", header: [{ text: "Column 03" }]},
{ width: 800, id: "col_04", header: [{ text: "Column 04"}]}
], resizable: true, selection:"row", leftSplit: 2
});
recs.data.parse(record_data);
tabbar.getCell("tab_02").attach(recs);
</script>
</body>
</html>