We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Not Refelct Timescale Mode View (Yearly & Monthly View) in Gantt Control


Need your help on priority bases. I would like to know how we can enable the View Property of  Timescale Mode Section.

We are trying to implement the Timescale mode as described on following Link.


Please find attached file showing the issue we are facing.

It would be helpful if you can provide some sample example of Timescale Mode view in Gantt Control with proper steps.

Awaiting your prompt response in this regard.

Attachment: TimescaleMode_f7142e4a.zip

9 Replies

SR Suriyaprasanth Ravikumar Syncfusion Team August 10, 2017 11:37 AM UTC

 Hi Kuntal, 
We are analyzed the reported issue with our sample, this issue occurred due to “ejPropertiesPanel” method used in your sample. 
This method was used in MVC demo samples to render property window, this method is only available in MVC sample browser source. 
In Gantt,  by using “ScheduleHeaderSettings.ScheduleHeader” property we can use the different timescale modes. 
Please refer the following link to know more about schedule modes in Gantt. 
We have prepared a sample for your reference and provided option to switch the various schedule modes available in Gantt, please find the sample location as below, 
Suriyaprasanth R. 

KP Kuntal Patel August 22, 2017 05:28 AM UTC


Need your help on priority bases.

we have some doubts related to sample which you have provide.

1) Is it necessary to add jsonganttdata.js.

2) ScheduleStartDate and ScheduleEndDate would be dynamic or static.

3) Is it necessary to change  ej.web.all.min.js??

4) Is it required to add jsrender.min.js and jquery-3.0.0.min.js ??

5) As in sample have Onchange method where scheduleEndDateand scheduleStartDate have static data so that would be as it is or required to change as per our requirement.

SR Suriyaprasanth Ravikumar Syncfusion Team August 23, 2017 03:18 AM UTC

Hi Kuntal, 
Please find the response below. 
Query 1Is it necessary to add jsonganttdata.js. 
Answer: This is not necessary for your project. In our Gantt demo sample we have used different data sources for different schedule header type, hence we have referred this from external file called “jsonganttdata.min.js” 
Please refer this link to know about data-binding in Gantt control. 
Query 2: Is it necessary to change  ej.web.all.min.js?  Is it required to add jsrender.min.js and jquery-3.0.0.min.js ?? 
Answer:  Adding the required JavaScript files into your application plays an important role, without these files Gantt controls cannot be created. It mandatory to add some common script files, 
  •  jquery.min.js ( later versions)
  •  jsrender.min.js
  • e.web.all.min.js
For Further details about the necessary files required, please refer the link:https://help.syncfusion.com/aspnetmvc/getting-started#manual-integration 
Query 3ScheduleStartDate and ScheduleEndDate would be dynamic or static? 
As in sample have Onchange method where scheduleEndDateand scheduleStartDatehave static data so that would be as it is or required to change as per our requirement? 
Answer: In Gantt, ‘ScheduleStartDate’ and ScheduleEndDate“ can be automatically updated from the data source. When you change the date of any task item to the date that is beyondScheduleStartDate or ScheduleEndDate through cell editing, taskbar editing, dialog editing or toolbar operation, then the ‘ScheduleStartDate’ and ScheduleEndDate can be dynamically updated based on that task item’s date. 
And also we can manually define the project start and end date by using “ScheduleStartDate” and “ScheduleEndDate” properties. 
In provided sample we have defined different views for each schedule mode in order to show its behavior, we have changed the “ScheduleStartDate” and “ScheduleEndDate” depends on requirement. 
In our Gantt sample we have done many customization to showcase the sample. Now we have prepared sample with only option to switch the “scheduleHeaderType” property dynamically, please find the sample location below. 
Can you please share exact your requirement with proper details, it will helpful for us to serve you better. 
Please let us know if you need any other assistance. 
Suriyaprasanth R. 

KP Kuntal Patel August 23, 2017 06:58 AM UTC

Thanks for your quick response.

As i have implement Scheduler Mode based your provided sample but i have getting some error when change Week Start Day and Minute Interval  drop downs then twice column after render chartt.

Please find screenshot for better clarity on issue.

Attachment: Change_Gantt_behaviour_9223bc98.zip

SR Suriyaprasanth Ravikumar Syncfusion Team August 24, 2017 08:16 AM UTC

Hi Kuntal, 
When we update the “weekStartDay” and “minutesPerInterval”, Gantt will be refreshed based on the value of “weekStartDay” and “minutesPerInterval” property. 
On this action “Load” event will be triggered to refresh the columns collection in Gantt, hence the custom column get loaded once again. 
We have fixed this issue in sample level, please refer following code snippet. 
    <script type="text/javascript"> 
        function load() { 
            var columns = this.getColumns(), 
                CustomColumnIndex = columns.indexOf(ej.TreeGrid.getColumnByField(columns, "priority")); 
            if (CustomColumnIndex == -1) { 
                columns.splice(2, 0, 
                            field: "priority", 
                            headerText: "Priority", 
                            mappingName: "priority", 
                            width: "180px" 
                columns.splice(3, 0, 
                                field: "type", 
                                headerText: "Type", 
                                mappingName: "type", 
                                width: "180px" 
We have prepared a with options to switch “scheduleHeaderType”, “weekStartDay”, “minutesPerInterval” properties, please find the sample from below location. 
Please let us know if require further assistance on this. 
Suriyaprasanth R. 

KP Kuntal Patel August 24, 2017 11:24 AM UTC

Thanks for your response.After implementation It's working fine but we are facing one issue related to performance. When the Schedule Mode is set to HOUR and we try to set the Minutes Interval to One Minute it takes considerable amount of time to load the data and mean while the page becomes completely unresponsive. Same issue can be reproduced in the demo project earlier provided by you. Please look into this on priority bases. Let us know in case any further information needed.

Please find attach screenshots for better clarity

Attachment: Hour_Selection_117d4da5.zip

JS Jonesherine Stephen Syncfusion Team August 25, 2017 04:27 PM UTC

Hi Kuntal, 
Sorry for the inconvenience caused. 
We have analyzed the reported issue, this issue was occurred due to large time scale. We can resolve this by providing proper schedule startDate and endDate in hour schedule mode. 
We can also navigate to the required schedule date by using “PrevTimeSpan” and “NextTimeSpan” toolbar item. 
Please find the code example below: 
                  .ToolbarSettings(toolbar => 
                                 toolbar.ToolbarItems(new   List<GanttToolBarItems>() 
<script type="text/javascript"> 
        function onChange(args) { 
            var ganttObject = $("#ganttsample10").data("ejGantt"); 
            ganttObject.model.columns = null; 
            if (args.itemId == 0) { 
             ganttObject.model.scheduleEndDate = new Date("02/26/2014 07:00:00 AM"); 
             ganttObject.model.scheduleStartDate = new Date("02/23/2014 00:00:00 AM"); 
             ganttObject.model.dateFormat = "M/d/yyyy hh:mm:ss tt"; 
             ganttObject.option("scheduleHeaderSettings.scheduleHeaderType", ej.Gantt.ScheduleHeaderType.Hour); 
             $("#interval").ejDropDownList({ enabled: true, value: "Five minutes" }); 
             $("#startDay").ejDropDownList({ enabled: false }); 
        function onIntervalChange(args) { 
            var ganttObject = $("#ganttsample10").data("ejGantt"); 
            switch (args.text) { 
             case "One minute": 
             ganttObject.model.scheduleStartDate = new Date("02/23/2014 00:00:00 AM");                    
             ganttObject.model.scheduleEndDate = ""; 
             ganttObject.model.scheduleHeaderSettings.minutesPerInterval = "oneMinute"; 
Please find the sample from below location 
Jone sherine P S. 

KP Kuntal Patel August 29, 2017 11:10 AM UTC

Thanks for your quick response.It's Working Fine after implementation of your all solution regarding Schedule Mode.

I would like to give one suggestion regarding implementation of your sample.

I have facing one problem regarding implementation when change JS ej.web.all.min.js as per your sample then Schedule Mode feature  is working fine but other Solution Like Resource unit Mapping related features is not working  then I have revert ej.web.all.min.js and css then both the features working proper so when you give solution please make sure that all other feature is working properly so we don't want to spent time on all Gantt features testing.

So please mention how many things like (JS or CSS) need to change for this features when you provide solution.

right now all issue has been resolved. Thanks for your all quick responses.

It's feedback from our side.

SR Suriyaprasanth Ravikumar Syncfusion Team August 29, 2017 12:17 PM UTC

Hi Kuntal, 
We regret for the inconvenience caused. 
While preparing the  sample, we have missed to include the provided patch files to you in “ej.web.all.min” file. 
Hereafter we will consider this while providing the sample to customers. 
Suriyaprasanth R. 

Live Chat Icon For mobile
Up arrow icon