JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Gantt Gantt Chart first Column is freezed while scrolling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #101898
    Up
    0
    Down

    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.

    #101901
    yavordashew
    Member
    Up
    0
    Down

    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/

    #101910
    Up
    0
    Down

    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>
    #101919
    yavordashew
    Member
    Up
    0
    Down

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.