It appears that all tasks for the project render. However, only a fraction of the visible gantt chart actually displays tasks. You can see in the following screenshots that as I scroll more tasks become visible but I would expect many more tasks to be visible at a time. Please let me know if I'm not being clear.
Thanks in advance for your help.
import { Gantt, ProjectModel, Toast, EffectResolutionResult } from '../../build/gantt.module.js?444008';
import shared from '../_shared/shared.module.js?444008';
/* eslint-disable no-unused-vars */
const project = new ProjectModel({
eventsData: [
{
"id": 1000,
"name": "Launch SaaS Product",
"percentDone": 50,
"startDate": "2019-01-02",
"expanded": true,
"children": [
{
"id": 3,
"name": "Setup Test Strategy",
"percentDone": 20,
"startDate": "2019-01-30",
"expanded": true,
"rollup": true,
"children": [
{
"id": 31,
"name": "Hire QA staff",
"percentDone": 45,
"startDate": "2019-01-30",
"duration": 5
},
{
"id": 33,
"name": "Write test specs",
"percentDone": 9,
"duration": 5,
"startDate": "2019-02-06",
"expanded": true,
"children": [
{
"id": 331,
"name": "Unit tests",
"percentDone": 20,
"startDate": "2019-02-06",
"duration": 10
},
{
"id": 332,
"name": "UI unit tests / individual screens",
"percentDone": 10,
"startDate": "2019-02-06",
"duration": 5
},
{
"id": 333,
"name": "Application tests",
"percentDone": 0,
"startDate": "2019-02-06",
"duration": 10
},
{
"id": 334,
"name": "Monkey tests",
"percentDone": 0,
"startDate": "2019-02-10",
"duration": 1
}
]
}
]
},
{
"id": 4,
"name": "Application Implementation",
"percentDone": 60,
"startDate": "2019-01-21",
"expanded": true,
"children": [
{
"id": 400,
"name": "Phase #1",
"expanded": true,
"children": [
{
"id": 41,
"name": "Authentication module",
"percentDone": 100,
"duration": 5
},
{
"id": 42,
"name": "Single sign on",
"percentDone": 100,
"duration": 3
},
{
"id": 43,
"name": "Implement role based access",
"percentDone": 0,
"duration": 4
},
{
"id": 44,
"name": "Basic test coverage",
"percentDone": 0,
"duration": 3
},
{
"id": 45,
"name": "Verify high test coverage",
"percentDone": 0,
"duration": 0
}
]
},
{
"id": 401,
"name": "Phase #2",
"expanded": true,
"children": [
{
"id": 4011,
"name": "Authentication module",
"percentDone": 70,
"duration": 15
},
{
"id": 4012,
"name": "Single sign on",
"percentDone": 60,
"duration": 5
},
{
"id": 4013,
"name": "Implement role based access",
"percentDone": 50,
"duration": 21
},
{
"id": 4014,
"name": "Basic test coverage",
"percentDone": 0,
"duration": 20
},
{
"id": 4015,
"name": "Verify high test coverage",
"percentDone": 0,
"duration": 4
}
]
},
{
"id": 402,
"name": "Acceptance phase",
"expanded": true,
"children": [
{
"id": 4031,
"name": "Company bug bash",
"percentDone": 70,
"duration": 3
},
{
"id": 4032,
"name": "Test all web pages",
"percentDone": 60,
"duration": 2
},
{
"id": 4033,
"name": "Verify no broken links",
"percentDone": 50,
"duration": 4
},
{
"id": 4034,
"name": "Make test release",
"percentDone": 0,
"duration": 3
},
{
"id": 4035,
"name": "Send invitation email",
"percentDone": 0,
"duration": 1
},
{
"id": 4036,
"name": "Celebrate launch",
"iconCls": "b-fa b-fa-glass-cheers",
"percentDone": 0,
"duration": 1
}
]
}
]
},
{
"id": 1,
"name": "Setup web server",
"percentDone": 50,
"duration": 10,
"startDate": "2019-01-02",
"expanded": true,
"children": [
{
"id": 11,
"name": "Install Apache",
"percentDone": 50,
"startDate": "2019-01-14",
"duration": 3
},
{
"id": 12,
"name": "Configure firewall",
"percentDone": 50,
"startDate": "2019-01-14",
"duration": 3
},
{
"id": 13,
"name": "Setup load balancer",
"percentDone": 50,
"startDate": "2019-01-14",
"duration": 3
},
{
"id": 14,
"name": "Configure ports",
"percentDone": 50,
"startDate": "2019-01-17",
"duration": 2
},
{
"id": 15,
"name": "Run tests",
"percentDone": 0,
"startDate": "2019-01-17",
"duration": 2
}
]
},
{
"id": 2,
"name": "Website Design",
"percentDone": 60,
"startDate": "2019-01-21",
"expanded": true,
"children": [
{
"id": 21,
"name": "Contact designers",
"percentDone": 70,
"startDate": "2019-01-21",
"duration": 5
},
{
"id": 22,
"name": "Create shortlist of three designers",
"percentDone": 60,
"startDate": "2019-01-26",
"duration": 1
},
{
"id": 23,
"name": "Select & review final design",
"percentDone": 50,
"startDate": "2019-01-26",
"duration": 2
},
{
"id": 24,
"name": "Inform management about decision",
"percentDone": 100,
"startDate": "2019-01-28",
"duration": 0
},
{
"id": 25,
"name": "Apply design to web site",
"percentDone": 0,
"startDate": "2019-01-28",
"duration": 7
}
]
}
]
}
],
dependenciesData: [
{
"id": 1,
"fromTask": 11,
"toTask": 15
},
{
"id": 2,
"fromTask": 12,
"toTask": 15
},
{
"id": 3,
"fromTask": 13,
"toTask": 15
},
{
"id": 4,
"fromTask": 14,
"toTask": 15
},
{
"id": 5,
"fromTask": 15,
"toTask": 21
},
{
"id": 7,
"fromTask": 21,
"toTask": 22
},
{
"id": 8,
"fromTask": 22,
"toTask": 23
},
{
"id": 9,
"fromTask": 23,
"toTask": 24
},
{
"id": 10,
"fromTask": 24,
"toTask": 25
},
{
"id": 11,
"fromTask": 31,
"toTask": 33
},
{
"id": 12,
"fromTask": 400,
"toTask": 401
},
{
"id": 13,
"fromTask": 401,
"toTask": 402
},
{
"id": 14,
"fromTask": 402,
"toTask": 403
},
{
"id": 15,
"fromTask": 3,
"toTask": 4
},
{
"id": 16,
"fromTask": 41,
"toTask": 45
},
{
"id": 17,
"fromTask": 42,
"toTask": 45
},
{
"id": 18,
"fromTask": 43,
"toTask": 45
},
{
"id": 19,
"fromTask": 44,
"toTask": 45
},
{
"id": 20,
"fromTask": 4034,
"toTask": 4035
}
]
});
project.load();
new Gantt({
adopt: 'container',
project,
startDate: "2019-01-02",
endDate: '2019-02-16',
columns: [
{
type: 'name',
field: 'name',
text: 'Task Name',
width: 250
}
],
height: screen.height - 300,
features: {
criticalPaths: {
disabled: false
}
}
});
project.load();posting the above code in the basic example I'm unable to replicate the issue. I should note that I am using script tags to import gantt.umd.js
In the console I'm showing the following error:
"VM1341:158852 Uncaught (in promise) Error: Trying to request without URL specified
at ProjectModel.sendRequest"
Thanks for the quick reply by the way 
here's the full page code. Will you be able to work with this?
var formatDataForGantt, getData, getDependenciesData, loadHTML;
console.clear();
$(function() {
var content, p, page_title, project;
content = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"> <link rel=\"stylesheet\" href=\"../../../premier_common/js/bryntum_gantt/build/gantt.stockholm.css\" id=\"bryntum-theme\"> <script src='../../../premier_common/js/bryntum_gantt/build/gantt.umd.js'></script> <div id='divContainer'><div id=\"container\"></div></div>";
page_title = 'Bryntum Gantt Test';
p = $('#premierMainContent').parent();
$('#premierMainContent').remove();
p.append('<div id=premierMainContent name=premierMainContent></div>');
$('#premierMainContent').html(page_title + content);
$('#heading span').css('width', '400px');
project = new bryntum.gantt.ProjectModel({
eventsData: [
{
"id": 1000,
"name": "Launch SaaS Product",
"percentDone": 50,
"startDate": "2019-01-02",
"expanded": true,
"children": [
{
"id": 3,
"name": "Setup Test Strategy",
"percentDone": 20,
"startDate": "2019-01-30",
"expanded": true,
"rollup": true,
"children": [
{
"id": 31,
"name": "Hire QA staff",
"percentDone": 45,
"startDate": "2019-01-30",
"duration": 5
},
{
"id": 33,
"name": "Write test specs",
"percentDone": 9,
"duration": 5,
"startDate": "2019-02-06",
"expanded": true,
"children": [
{
"id": 331,
"name": "Unit tests",
"percentDone": 20,
"startDate": "2019-02-06",
"duration": 10
},
{
"id": 332,
"name": "UI unit tests / individual screens",
"percentDone": 10,
"startDate": "2019-02-06",
"duration": 5
},
{
"id": 333,
"name": "Application tests",
"percentDone": 0,
"startDate": "2019-02-06",
"duration": 10
},
{
"id": 334,
"name": "Monkey tests",
"percentDone": 0,
"startDate": "2019-02-10",
"duration": 1
}
]
}
]
},
{
"id": 4,
"name": "Application Implementation",
"percentDone": 60,
"startDate": "2019-01-21",
"expanded": true,
"children": [
{
"id": 400,
"name": "Phase #1",
"expanded": true,
"children": [
{
"id": 41,
"name": "Authentication module",
"percentDone": 100,
"duration": 5
},
{
"id": 42,
"name": "Single sign on",
"percentDone": 100,
"duration": 3
},
{
"id": 43,
"name": "Implement role based access",
"percentDone": 0,
"duration": 4
},
{
"id": 44,
"name": "Basic test coverage",
"percentDone": 0,
"duration": 3
},
{
"id": 45,
"name": "Verify high test coverage",
"percentDone": 0,
"duration": 0
}
]
},
{
"id": 401,
"name": "Phase #2",
"expanded": true,
"children": [
{
"id": 4011,
"name": "Authentication module",
"percentDone": 70,
"duration": 15
},
{
"id": 4012,
"name": "Single sign on",
"percentDone": 60,
"duration": 5
},
{
"id": 4013,
"name": "Implement role based access",
"percentDone": 50,
"duration": 21
},
{
"id": 4014,
"name": "Basic test coverage",
"percentDone": 0,
"duration": 20
},
{
"id": 4015,
"name": "Verify high test coverage",
"percentDone": 0,
"duration": 4
}
]
},
{
"id": 402,
"name": "Acceptance phase",
"expanded": true,
"children": [
{
"id": 4031,
"name": "Company bug bash",
"percentDone": 70,
"duration": 3
},
{
"id": 4032,
"name": "Test all web pages",
"percentDone": 60,
"duration": 2
},
{
"id": 4033,
"name": "Verify no broken links",
"percentDone": 50,
"duration": 4
},
{
"id": 4034,
"name": "Make test release",
"percentDone": 0,
"duration": 3
},
{
"id": 4035,
"name": "Send invitation email",
"percentDone": 0,
"duration": 1
},
{
"id": 4036,
"name": "Celebrate launch",
"iconCls": "b-fa b-fa-glass-cheers",
"percentDone": 0,
"duration": 1
}
]
}
]
},
{
"id": 1,
"name": "Setup web server",
"percentDone": 50,
"duration": 10,
"startDate": "2019-01-02",
"expanded": true,
"children": [
{
"id": 11,
"name": "Install Apache",
"percentDone": 50,
"startDate": "2019-01-14",
"duration": 3
},
{
"id": 12,
"name": "Configure firewall",
"percentDone": 50,
"startDate": "2019-01-14",
"duration": 3
},
{
"id": 13,
"name": "Setup load balancer",
"percentDone": 50,
"startDate": "2019-01-14",
"duration": 3
},
{
"id": 14,
"name": "Configure ports",
"percentDone": 50,
"startDate": "2019-01-17",
"duration": 2
},
{
"id": 15,
"name": "Run tests",
"percentDone": 0,
"startDate": "2019-01-17",
"duration": 2
}
]
},
{
"id": 2,
"name": "Website Design",
"percentDone": 60,
"startDate": "2019-01-21",
"expanded": true,
"children": [
{
"id": 21,
"name": "Contact designers",
"percentDone": 70,
"startDate": "2019-01-21",
"duration": 5
},
{
"id": 22,
"name": "Create shortlist of three designers",
"percentDone": 60,
"startDate": "2019-01-26",
"duration": 1
},
{
"id": 23,
"name": "Select & review final design",
"percentDone": 50,
"startDate": "2019-01-26",
"duration": 2
},
{
"id": 24,
"name": "Inform management about decision",
"percentDone": 100,
"startDate": "2019-01-28",
"duration": 0
},
{
"id": 25,
"name": "Apply design to web site",
"percentDone": 0,
"startDate": "2019-01-28",
"duration": 7
}
]
}
]
}
],
dependenciesData: [
{
"id": 1,
"fromTask": 11,
"toTask": 15
},
{
"id": 2,
"fromTask": 12,
"toTask": 15
},
{
"id": 3,
"fromTask": 13,
"toTask": 15
},
{
"id": 4,
"fromTask": 14,
"toTask": 15
},
{
"id": 5,
"fromTask": 15,
"toTask": 21
},
{
"id": 7,
"fromTask": 21,
"toTask": 22
},
{
"id": 8,
"fromTask": 22,
"toTask": 23
},
{
"id": 9,
"fromTask": 23,
"toTask": 24
},
{
"id": 10,
"fromTask": 24,
"toTask": 25
},
{
"id": 11,
"fromTask": 31,
"toTask": 33
},
{
"id": 12,
"fromTask": 400,
"toTask": 401
},
{
"id": 13,
"fromTask": 401,
"toTask": 402
},
{
"id": 14,
"fromTask": 402,
"toTask": 403
},
{
"id": 15,
"fromTask": 3,
"toTask": 4
},
{
"id": 16,
"fromTask": 41,
"toTask": 45
},
{
"id": 17,
"fromTask": 42,
"toTask": 45
},
{
"id": 18,
"fromTask": 43,
"toTask": 45
},
{
"id": 19,
"fromTask": 44,
"toTask": 45
},
{
"id": 20,
"fromTask": 4034,
"toTask": 4035
}
]
});
project.load();
new bryntum.gantt.Gantt({
adopt: 'container',
project,
startDate: "2019-01-02",
endDate: '2019-02-16',
columns: [
{
type: 'name',
field: 'name',
text: 'Task Name',
width: 250
}
],
height: screen.height - 300,
features: {
criticalPaths: {
disabled: false
}
}
});
return console.log("done");
});
wpatterson,
The error above "request without URL specified" is because your project must have an url (https://www.bryntum.com/docs/gantt/#Gantt/model/ProjectModel#config-transport) :
...
ProjectModel({
transport : {
load : {
url : '../_datasets/launch-saas.json'
}
},
...
I just run your code and wasn't able to reproduce the problem:
Best regards,
Fabio
wpatterson, url is required because you are calling the project.load() method, this is why it is asking for url, but if you want static data is not necessary url but you can't call the project.load() method.
Read more about the method here: https://www.bryntum.com/docs/gantt/#Gantt/model/ProjectModel#function-load
If you have any question, please let me know.
Best regards,
Fabio