Page 1 of 1

autoLoad set to true does not initialize TaskStore data

Posted: Thu Sep 19, 2019 4:14 pm
by mmelcot
Hello,

we are testing the new JavaScript UI Bryntum Gantt v1.1.4 (trial version) but we are facing some issues.

In our Gantt configuration, we set:
taskStore: new TaskStore({
    autoLoad: true,
    modelClass: TaskModel,
    readUrl: '/get/my/tasks',
}),
in order to fetch the tasks from our backend upon load. This enables the correct rendering of the tasks in the Gantt, but the `data` field in the TaskStore object is actually empty (e.g. we have `NaN` durations in the task tooltip) until we call explicitly
gantt.taskStore.load();
Is this the expected behaviour? If we disable the the `autoLoad` flag we have to call the load method twice to get a consistent TaskStore.

Furthermore, we are not able to disable the drag/drop sorting of the cells (tasks) within the Gantt "name column". We tried with the following configurations:
column: {
    nameColumn: {
        draggable: false,
        sortable: false,
    }
}
and
columns: [
    {
        type: 'name', 
        text: 'Task Name', 
        draggable: false,
        sortable: false,
    }
],
but non of them worked. Can you suggest a different approach?

Please find attached a working example in HTML and the related JSON data.

Many thanks in advance for your help.


The html and json are herebelow
<html lang="en">
	<head>
        <meta charset="utf-8"/>
        <script src="https://www.bryntum.com/examples/build/gantt.module.js" type="module"></script>
        <link rel="stylesheet" type="text/css" href="https://www.bryntum.com/examples/build/gantt.default.css"/>

        <script type="module">
            import {Gantt, TaskModel, TaskStore} from 'https://www.bryntum.com/examples/build/gantt.module.js';

            const gantt = new Gantt({
                autoHeight: true,
                appendTo: 'gantt',
								taskStore: new TaskStore({
						        autoLoad: true,
						        modelClass: TaskModel,
						        readUrl: 'data.json',
						    }),
            });

						gantt.taskStore.load();
        </script>
	</head>

	<body>
        <div id="gantt"></div>
	</body>
</html>
[
  {
    "id": 1,
    "name": "Task 1",
    "startDate": "2019-09-18",
    "endDate": "2019-09-22",
    "expanded": true,
    "children": [
      {
        "id": 2,
        "name": "Task 2",
        "startDate": "2019-09-18",
        "endDate": "2019-09-19"
      },
      {
        "id": 3,
        "name": "Task 3",
        "startDate": "2019-09-20",
        "endDate": "2019-09-22"
      }
    ]
  }
]

Re: autoLoad set to true does not initialize TaskStore data

Posted: Thu Sep 19, 2019 5:04 pm
by saki
Much easier would be to start with the Gantt Simple Example where you can see that it works easiest with `project` that contains much more than tasks.

Let us please know if this approach works for you.

Re: autoLoad set to true does not initialize TaskStore data

Posted: Fri Sep 20, 2019 10:27 am
by mmelcot
Thanks Saki. Actually we started to work with "Gantt Simple Example".

We tried the following options in the Gantt configuration:
- "Project"
- "CRUD Manager"
crudManager : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    },
project : new ProjectModel({
        autoLoad : true,
        transport : {
            load : {
                url : '...'
            }
        }
    }),
But we faced the same issues.

Our trial version is 1.1.4, but we noticed that on the hosted examples, it is 1.1.5. Could it be why I need to load twice the store?

Many thanks

Re: autoLoad set to true does not initialize TaskStore data

Posted: Fri Sep 20, 2019 1:12 pm
by saki
The following modifications in app.js of basic gantt example work for me:
/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Gantt from '../../lib/Gantt/view/Gantt.js';
import ProjectModel from '../../lib/Gantt/model/ProjectModel.js';
import '../../lib/Gantt/feature/TaskContextMenu.js';

const project = new ProjectModel({
    autoLoad : true,
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
});

new Gantt({
    appendTo : 'container',

    project : project,

    columns : [
        { type : 'name', field : 'name', width : 250 }
    ]
});

// project.load();
You can find more info about project data here.