Smart UI Components

@aminesonyryder

Forum Replies Created

Viewing 1 post (of 1 total)
Author

Posts
June 18, 2021 at 12:18 pm in reply to: Gantt Chart first Column is freezed while scrolling #101910
aminesonyryder
Member
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>
Author

Posts
Viewing 1 post (of 1 total)