Gantt chart view change

[Mariam]

Hi, 

I have an issue related to Gantt view changes. If I'm in week view, and I scroll it to some period, for example from Jun 25 to Jun 30 (see day.png), and then I change view to month, period is changed, and it goes to December (see month.png). Is there any way to fix this period after view change?

Thanks in advance. 

[Stoyan]

Hi, Mariam,
Thank you for your question.

You can configure each of the Gantt views to have their own timeframe defined by the configuration method views.range. You can set identical ranges to the views and also set identical views.date which configures the initial focus date of each view.

If you wish to dynamically change the range and selected date I recommend our Gantt Demo on Selected Date and Range which demonstrates how to achieve this.

Hopefully, I've been helpful to you. If the above does not answer your question please elaborate on the scenario you have. Sending a runnable example where I can observe the behavior will help me provide a better suggestion on the case.

Regards,
Stoyan
Progress Telerik

[Mariam]

Your solution doesn't solve my problem. 

https://demos.telerik.com/kendo-ui/gantt/index

Here you can reproduce it. If view is 'Week" and you scroll it to "Sun 7/06 - Sat 7/12", then change the view to "Day", it shows "Tue 6/03". But my clients wants see the same period, in this example "Sun 7/06".

[Stoyan]

Hi, Mariam, 

There is a way to capture a header of the table. The following snippet allows you to get the text of the first whole header shown by the table. You can use that value with the date method when a view is changed.

  $("#getDate").click(function() {
          	var gantt = $("#gantt").getKendoGantt(),
                headersTable =  $(gantt.timeline._headerTree.root).find("table"),
                headers = headersTable.find(".k-header[colspan=1]"),
                scrollPosition = gantt.timeline.element.find(".k-grid-content").scrollLeft();
        
            var total = headersTable.width() / 100;
            var current = parseInt((headersTable.width() - scrollPosition) / 100, 10);                      
            var currentHeader = $(headers[total - current]);
            console.log(currentHeader);
            console.log(currentHeader.text());
          });

I am also applying the running sample that includes the snippet above.

Should more questions arise, please don't hesitate to reach out.

Regards, Author nickname Progress Telerik