Refresh (Reload)

[Robert Madrian]

Hello,

How to reload a timeline (with Kendo grid I can use grid.dataSource.read();)

robert

[Nikolay]

Hello Robert,

You could rebind the DataSource of an existing Timeline using the setDataSource method:

      var timeline = $("#timeline").data().kendoTimeline;

      $("#btnSubmit").click(function(){
        timeline.setDataSource(new kendo.data.DataSource({
          data: [ {"id":1,"title":"First event","date": new Date(2025, 6, 30)}, 
                      {"id":2,"title":"Second event","date": new Date(2026, 6, 30) }]
        }));
      }); 

The Timeline component is a new one from the latest R3 2019 Kendo UI release. If you like, we can convert this thread to a Feature Request so people can vote for its implementation. Once the request gains popularity, we will apply the necessary changes.

Hope the above helps and please contact us back if you need further assistance.

Regards,
Nikolay
Progress Telerik

[Robert Madrian]

My Timeline is bound to a controller method:

@(Html.Kendo().Timeline<MitgliedgeschichteViewModel>()
            .Name("tmlMitgliedgeschichte")
            .DataDateField("Meilensteindatum")
            .DataDescriptionField("Beschreibung")
            .EventHeight(120)
            .DateFormat("dd MMMM yyyy")
            .DataTitleField("Meilenstein")
            .Orientation(TimelineOrientation.Horizontal)
            .DataSource(
                dt => dt.Read("ReadTimeline", "Mitgliedgeschichte", new { mitgliedid = ViewContext.RouteData.Values["mitgliedid"] })
            )
)

[Nikolay]

Hi Robert,

To reload the dataSource of the Timeline you could use the read method the same way as it applies for the Grid:

 $("#Timeline").data("kendoTimeline").dataSource.read();

If there is anything else, we could help with, please contact us back.

Regards,
Nikolay
Progress Telerik

[Robert Madrian]

doesn't work here - nothing happens if I use dataSource.read()...

robert

[Nikolay]

Hi Robert,

Thank you for the feedback.

I would recommend you using the setDataSource method. Please refer to my previous reply for further information.

In case you still would like to use the read method of the dataSource you can call the _renderContentHorizontal method to have the Timeline rendered once the data is read.

var timeline = $('#timeline').data('kendoTimeline')
var data = timeline.dataSource.data().slice(2)
timeline.dataSource.read().then(function(){
    timeline._renderContentVertical(timeline.dataSource.data()) // for horizontal mode use _renderContentHorizontal
})

Please try the above and let me know if it works.

Kind regards,
Nikolay
Progress Telerik

[Robert Madrian]

doesn't work - after using your code the timeline is without details and seems to be "frezzed"...

if I klick on it I get:

2kendo.all.js:118749 Uncaught TypeError: Cannot read property 'element' of undefined
    at init._setCurrentEvent (kendo.all.js:118749)
    at HTMLLIElement.e (jquery.js?v=hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8:2)
    at HTMLDivElement.dispatch (jquery.js?v=hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8:3)
    at HTMLDivElement.q.handle (jquery.js?v=hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8:3)

 

 

[Nikolay]

Hello Robert,

Thank you for the provided information.

I tested the implementation and from my end, it works as expected. Both options rebind the Timeline with the new data:

Using _renderContentVertical():

var timeline = $('#Timeline').data('kendoTimeline')
var data = timeline.dataSource.data()
var newData = data.slice(4)
timeline._renderContentVertical(newData)

and using setDataSource():

var timeline = $('#Timeline').data('kendoTimeline')
var data = timeline.dataSource.data()
var newData = data.slice(4)
timeline.setDataSource(newData)

For your convenience, I am attaching a small Kendo UI for ASP.NET Core project demonstrating the above. In case I misunderstood the issue you are experiencing, please get back to me with additional explanations. Feel free to change the attached project if needed. I will be happy to assist you.

Regards,
Nikolay
Progress Telerik

[Robert Madrian]

doesn't work with your sample - see video here: https://www.screencast.com/t/gXCvgcg4JgX

 

[Nikolay]

Hi Robert,

Thank you for the shared video.

When switching to Horizontal orientation two more methods need to be called to enable the Timeline rebinding:

<script>
    function rebindTimeline() {
        var timeline = $('#Timeline').data('kendoTimeline')
        var data = timeline.dataSource.data()
        var newData = data.slice(4);
        timeline._renderContentHorizontal(newData);
        timeline._redrawEvents();
        timeline._initHorizontal();
    }
</script>

Please accept my apologies for the inconvenience this might caused you. The project has been revised and you can find it attached.

Additionally, I have logged a feature request to add a refresh method to the component. A vote from your behalf has been added and you can get traction and receive votes from other people at the below links:

• UserVoice portal: https://feedback.telerik.com/aspnet-core-ui/1433876-refresh-reload-method
• GitHub: https://github.com/telerik/kendo-ui-core/issues/5328

If there is anything else we could help with, please contact us back.

Regards,

Nikolay
Progress Telerik

[Robert Madrian]

maybe this is a misunderstanding but this code doesn't rebind (load data from database) the timeline!
also what ist the number 4 in the data.slice(4)?

I want to load new data from the database...

@(Html.Kendo().Timeline<MitgliedgeschichteViewModel>()
                .Name("tmlMitgliedgeschichte")
                .DataDateField("Meilensteindatum")
                .DataDescriptionField("Beschreibung")
                .EventHeight(120)
                .DateFormat("dd MMMM yyyy")
                .DataTitleField("Meilenstein")
                .Orientation(TimelineOrientation.Horizontal)
                .DataSource(
                    dt => dt.Read("ReadTimeline", "Mitgliedgeschichte", new { mitgliedid = ViewContext.RouteData.Values["mitgliedid"] })
                )
    )

robert

[Alex Hajigeorgieva]

Hello, Robert,

My name is Alex and I am covering for my colleague Niko in his absence.

I tested the suggested approach and found that some scenarios and resolutions have unexpected behaviours. This is because there are other internal properties which need to be reset or changed. I addition to that, using private methods is not recommended as they are subject to change without notice.

Therefore, I am afraid that the only safe approach we can offer at the moment is to destroy and recreate the widget as new when you want to refresh it:

<script>
    function rebindTimeline() {
        var timeline = $('#Timeline').data('kendoTimeline');
        var options = timeline.options;
        timeline.destroy();
        $('#Timeline').empty();        
        $("#Timeline").kendoTimeline(options);
    }
</script>

We appreciate that this is not convenient bu it is the safest approach you can take to accomplish what you need while we look into refreshing the widget when its data source data is refreshed.

Please accept our apology for the inconvenience that this may have caused.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Robert Madrian]

Thank's that works

 

robert