timeline problem with setLanes

[claudiobosticco]

v13.0p_2023-11-20/AllModules Development Only

Chrome on MacOS

Hello, please try this test case in the showcase:

isc.Timeline.create({
    ID: "timeline",
    data: events,
    top: 50,
    height: 475,
    startDate: isc.DateUtil.getStartOf(new Date(), "W", false),
    endDate: isc.DateUtil.getEndOf(new Date(), "W", false),
    headerLevels: [{unit: "month"}, {unit: "day"}],
    laneFields: [{name: "title", title: "Developer", minWidth: 120, autoFitWidth: true}],
    canEditLane: true,
    showEventDescriptions: false
});

isc.Button.create({
    title: "test",
    click: function () {
        var dataDevelopers = [
            {name: "charlesMadigen", title: "Charles Madigen"},
            {name: "tamaraKane", title: "Tamara Kane"},
            {name: "darcyFeeney", title: "Darcy Feeney"},
            {name: "kaiKong", title: "Kai Kong"},
            {name: "shellyFewel", title: "Shelly Fewel"},
            {name: "garretMonroe", title: "Garret Monroe"}
        ];
        let lanes = [];
        for (let index = 0; index < dataDevelopers.length; index++) {
            lanes.add({
                name: dataDevelopers[index].name,
                title: dataDevelopers[index].title, height: 30
            });
        }
        timeline.setLanes(lanes);
    }
})

with this taskData:

var events = [

{
    eventId: 1,
    name: "Add new Timeline view",
    description: "Add a new calendar Timeline component",
    startDate: new Date(2023, 10, 20, 10, 0),
    endDate: new Date(2023, 10, 20, 10, 15),
    lane: "charlesMadigen"
},
{
    eventId: 3,
    name: "PDF Import/Export",
    description: "Implement native PDF import/export",
    startDate: new Date(2023, 10, 20, 10, 0),
    endDate: new Date(2023, 10, 20, 10, 15),
    lane: "darcyFeeney"
},
{
    eventId: 5,
    name: "ListGrid cell-level selection",
    description: "Implement spreadsheet-like selection in ListGrid",
    startDate: new Date(2023, 10, 20, 10, 0),
    endDate: new Date(2023, 10, 20, 10, 15),
    lane: "shellyFewel"
}];

if you click the button, you'll get:



if you remove the lanes height, ie modify the test case like this:

isc.Timeline.create({
    ID: "timeline",
    data: events,
    top: 50,
    height: 475,
    startDate: isc.DateUtil.getStartOf(new Date(), "W", false),
    endDate: isc.DateUtil.getEndOf(new Date(), "W", false),
    headerLevels: [{unit: "month"}, {unit: "day"}],
    laneFields: [{name: "title", title: "Developer", minWidth: 120, autoFitWidth: true}],
    canEditLane: true,
    showEventDescriptions: false
});

isc.Button.create({
    title: "test",
    click: function () {
        var dataDevelopers = [
            {name: "charlesMadigen", title: "Charles Madigen"},
            {name: "tamaraKane", title: "Tamara Kane"},
            {name: "darcyFeeney", title: "Darcy Feeney"},
            {name: "kaiKong", title: "Kai Kong"},
            {name: "shellyFewel", title: "Shelly Fewel"},
            {name: "garretMonroe", title: "Garret Monroe"}
        ];
        let lanes = [];
        for (let index = 0; index < dataDevelopers.length; index++) {
            lanes.add({
                name: dataDevelopers[index].name,
                title: dataDevelopers[index].title
            });
        }
        timeline.setLanes(lanes);
    }
})

then you'll get this after clicking the button:


where the 2nd and 3rd events are on the wrong lanes.

If you'll modify the test case like this instead (ie without button but executing the code in the click handler immediately after creating the timeline):

isc.Timeline.create({
    ID: "timeline",
    data: events,
    top: 50,
    height: 475,
    startDate: isc.DateUtil.getStartOf(new Date(), "W", false),
    endDate: isc.DateUtil.getEndOf(new Date(), "W", false),
    headerLevels: [{unit: "month"}, {unit: "day"}],
    laneFields: [{name: "title", title: "Developer", minWidth: 120, autoFitWidth: true}],
    canEditLane: true,
    showEventDescriptions: false
});

var dataDevelopers = [
    {name: "charlesMadigen", title: "Charles Madigen"},
    {name: "tamaraKane", title: "Tamara Kane"},
    {name: "darcyFeeney", title: "Darcy Feeney"},
    {name: "kaiKong", title: "Kai Kong"},
    {name: "shellyFewel", title: "Shelly Fewel"},
    {name: "garretMonroe", title: "Garret Monroe"}
];
let lanes = [];
for (let index = 0; index < dataDevelopers.length; index++) {
    lanes.add({
        name: dataDevelopers[index].name,
        title: dataDevelopers[index].title
    });
}
timeline.setLanes(lanes);

then you'll get the correct timeline (with or without the lanes height setting):

[Isomorphic]

hi Claudio - we see the issue and we'll update here when it's been fixed.

[Isomorphic]

This one has been fixed in affected branches for tomorrow's builds, dated November 29 or later.

[claudiobosticco]

Thank you very much, I don't see new 13.0 or 13.1 builds, is everything ok with the builds?

[claudiobosticco]

Hello, sorry for the delay, but I can confirm it's fixed