JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › Gantt Chart first Column is freezed while scrolling › Reply To: Gantt Chart first Column is freezed while scrolling
June 18, 2021 at 12:18 pm
#101910
aminesonyryderMember
Hi,
Thank you for trying to help me. The code that I use for my SmartGantt Chart component looks like this.
<html>
<head>
<title>Gantt Chart Overview</title>
<link rel="stylesheet" type="text/css" href="https://www.htmlelements.com/demos/source/styles/smart.default.css"/>
<script type="text/javascript" src="https://www.htmlelements.com/demos/source/smart.elements.js"></script>
</head>
<body>
<smart-gantt-chart></smart-gantt-chart>
<style>
smart-gantt-chart {
--smart-gantt-chart-default-width: 1850px;
--smart-gantt-chart-default-height: 450px;
}
</style>
<script>
window.onload = function() {
const ganttChart = document.querySelector('smart-gantt-chart');
ganttChart.dataSource = [
{
"name": "CAD",
"synchronized": true,
"dragProject": true,
"type": "project",
"label": "CAD",
"expanded": true,
"dateStart": "2021-06-29T22:00:00.000Z",
"dateEnd": "2021-12-16T23:00:00.000Z",
"tasks": [
{
"type": "task",
"id": 98,
"label": "Automatisches Versenden Mail",
"dateStart": "2021-06-29T22:00:00.000Z",
"dateEnd": "2021-08-30T22:00:00.000Z"
},
{
"type": "task",
"id": 95,
"label": "Projekt 3",
"dateStart": "2021-08-30T22:00:00.000Z",
"dateEnd": "2021-12-16T23:00:00.000Z"
}
]
},
{
"name": "ABC",
"synchronized": true,
"dragProject": true,
"type": "project",
"label": "ABC",
"expanded": true,
"dateStart": "2021-04-14T22:00:00.000Z",
"dateEnd": "2022-02-04T23:00:00.000Z",
"tasks": [
{
"type": "task",
"id": 70,
"label": "Managmentsysteme",
"dateStart": "2021-12-04T23:00:00.000Z",
"dateEnd": "2022-02-04T23:00:00.000Z"
},
{
"type": "task",
"id": 94,
"label": "Dokumentation erstellen",
"dateStart": "2021-04-14T22:00:00.000Z",
"dateEnd": "2021-05-15T22:00:00.000Z"
},
{
"type": "task",
"id": 97,
"label": "Dokumentation erstellen",
"dateStart": "2021-06-05T22:00:00.000Z",
"dateEnd": "2021-07-12T22:00:00.000Z"
},
{
"type": "task",
"id": 69,
"label": "SQL Anweisung schreiben",
"dateStart": "2021-06-24T22:00:00.000Z",
"dateEnd": "2021-09-07T22:00:00.000Z"
},
{
"type": "task",
"id": 96,
"label": "Call Center arrangieren",
"dateStart": "2021-09-03T22:00:00.000Z",
"dateEnd": "2021-12-27T23:00:00.000Z"
},
{
"type": "task",
"id": 73,
"label": "PNG to SVG convert",
"dateStart": "2021-06-24T22:00:00.000Z",
"dateEnd": "2021-08-11T22:00:00.000Z"
},
{
"type": "task",
"id": 3,
"label": "Outlook Betreff automatisieren",
"dateStart": "2021-06-04T22:00:00.000Z",
"dateEnd": "2021-08-04T22:00:00.000Z"
},
{
"type": "task",
"id": 63,
"label": "Update McAffee",
"dateStart": "2021-07-03T22:00:00.000Z",
"dateEnd": "2021-09-04T22:00:00.000Z"
}
]
},
{
"name": "Einkauf",
"synchronized": true,
"dragProject": true,
"type": "project",
"label": "Einkauf",
"expanded": true,
"dateStart": "2021-06-30T22:00:00.000Z",
"dateEnd": "2021-08-30T22:00:00.000Z",
"tasks": [
{
"type": "task",
"id": 64,
"label": "Beschaffung zählen",
"dateStart": "2021-06-30T22:00:00.000Z",
"dateEnd": "2021-08-30T22:00:00.000Z"
}
]
},
{
"name": "ERP",
"synchronized": true,
"dragProject": true,
"type": "project",
"label": "ERP",
"expanded": true,
"dateStart": "2021-07-30T22:00:00.000Z",
"dateEnd": "2021-11-05T23:00:00.000Z",
"tasks": [
{
"type": "task",
"id": 2,
"label": "Bestandsaufnahme",
"dateStart": "2021-07-30T22:00:00.000Z",
"dateEnd": "2021-09-30T22:00:00.000Z"
},
{
"type": "task",
"id": 68,
"label": "Angebot einholen",
"dateStart": "2021-10-01T22:00:00.000Z",
"dateEnd": "2021-11-05T23:00:00.000Z"
}
]
},
{
"name": "Test",
"synchronized": true,
"dragProject": true,
"type": "project",
"label": "Vertrieb",
"expanded": true,
"dateStart": "2021-06-17T22:00:00.000Z",
"dateEnd": "2021-10-08T22:00:00.000Z",
"tasks": [
{
"type": "task",
"id": 86,
"label": "Test 3",
"dateStart": "2021-07-23T22:00:00.000Z",
"dateEnd": "2021-10-08T22:00:00.000Z"
},
{
"type": "task",
"id": 106,
"label": "Test 4",
"dateStart": "2021-06-17T22:00:00.000Z",
"dateEnd": "2021-06-21T22:00:00.000Z"
}
]
}
];
ganttChart.taskColumns = [
{
label: 'Abteilung',
value: 'label',
size : '40%'
},
{
label: 'Startdatum',
value: 'dateStart',
size : '20%'
},
{
label: 'Enddatum',
value: 'dateEnd',
size : '30%'
}
];
};
</script>
</body>
</html>