Dynamically add to Sidebar/rows

[ka215]

Dynamically add to Sidebar/rows

[ka215]

Hi there,

I think you could resolve the problem by using "reload" method.
At using the "reload" method, you can rebuild the timeline included all events. At that time, usualy all events on the timeline will be re-rendered from cache in browser however you can replace new events to re-rendered the timeline if it set false to the "reloadCacheKeep" option.

Therefore you should reset currently events then modify to events retrieved via ajax before firing the "reload" method.

An example is as follows:

<div id="my-timeline">
  <ul class="timeline-events">
    <li data-timeline-node="{ start:'2019-01-20 14:00',end:'2019-01-24 13:59',row:1}">Default Event 1</li>
    <li data-timeline-node="{ start:'2019-01-21 10:30',end:'2019-01-25 9:59',row:2 }">Default Event 2</li>
  </ul>
</div>

let my_options = {
    type          : 'bar',
    startDatetime : '2019-01-17 0:00:00',
    scale         : 'day',
    minGridSize   : 24 * 2,
    sidebar       : {
        sticky : true,
        list   : [ 
            '<a href="#"> Row 1</a>', 
            '<a href="#" class="narrow-row2"> Row 2</a>', 
            '<a href="#"> Row 3</a>', 
            '<a href="#"> Row 4</a>', 
            '<a href="#"> Row 5</a>', 
            '<a href="#"> Row 6</a>', 
            '<a href="#"> Row 7</a>', 
        ]
    },
    ruler         : {
        top    : {
            lines      : [ 'year', 'month', 'day', 'weekday' ],
        },
    },
    reloadCacheKeep : false,
}
$('#my-timeline').Timeline( my_options )

// Fire reload
$(document).on('click','.narrow-row2',function() {
    // Reset currently events then modify to events retrieved via ajax
    $('.timeline-events').empty().append(`
        <li data-timeline-node="{ start:'2019-01-25 10:00',end:'2019-01-27 23:59',row:2,bgColor:'red',color:'yellow' }">Async loadead event-1</li>
        <li data-timeline-node="{ start:'2019-01-27 10:00',end:'2019-01-29 23:59',row:4,bgColor:'red',color:'yellow' }">Async loadead event-2</li>
    `);
    $('#my-timeline').Timeline('reload', {
        // You can override any options when reload the timeline
        sidebar : {
            list : [ 
                '<a href="#"> Row 2-1</a>', 
                '<a href="#"> Row 2-2</a>', 
                '<a href="#"> Row 2-3</a>', 
                '<a href="#"> Row 2-4</a>', 
            ]
        }
    }, function(e,c,d){ console.log( 'Reloaded Timeline!', e, c, d ) }, { userdata: 'custom' } )
})

Notice: if you retrieve events via async for re-rendering without deferred, the jquery.timeline plugin may be not able to get all events before re-rendering. At that time you should try to use jquery.deferred feature.

Thank you,