Gantt Chart first Column is freezed while scrolling

This topic has 3 replies, 2 voices, and was last updated 2 years, 10 months ago by yavordashew.

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

Author

Posts

June 17, 2021 at 2:01 pm #101898

Member

Hallo,
I have a problem regarding the Gantt Chart web component.
I have a lot of tasks in multiple projects. While scrolling down, the first column is frozen and doesn’t move like all the other columns.
Thanks in advance.

June 17, 2021 at 2:59 pm #101901

yavordashew

Member

Hi Amine Le,
I have tested the SmartGantt Chart component in a similar use case as from the information that you have shared.
However I was unable to reproduce the issue that you mention that’s why I would suggest is to create a code example which reproduce the issue in order to be able to give you a solution about it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

June 18, 2021 at 12:18 pm #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>

June 21, 2021 at 2:22 pm #101919

yavordashew

Member

Hi Amine Le,
Thank you for sharing the code example!
With it I was able to reproduce the issue and unfortunately this is a bug for which I will add a work item and we will work to fix it as soon as we can.
However a temporary relief for this is in your case is to set the height so that you don’t need to scroll the Gantt Chart.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

Author

Posts

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

You must be logged in to reply to this topic.