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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. AutoScroll to DateTime.Now() and Highlight Today

AutoScroll to DateTime.Now() and Highlight Today

2 things.
BackStory:
I generate quite a large gantt diagram - which in turn has a quite long scrollbar (horizontally)

First thing:
is there a way for me to scroll the diagram into position so I have "Today" in the center of my View
Second thing:
is there a way to highlight Today - like we can highlight weekends etc.

4 Replies
JR John Rajaram Syncfusion Team March 12, 2015 09:00 AM UTC 

Hi Alex,
Thanks for using Syncfusion products.

Query

Syncfusion Comments

First thing:
is there a way for me to scroll the diagram into position so I have "Today" in the center of my View

At present there is no support to set focus/view on specific taskbar item on loading or scroll down the Gantt chart to Today’s position. We have already logged this as Feature Request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

But now we have achieved your requirement for auto scrolling the Gantt chart to today’s position while loading the Gantt control, through workaround with the help of “Create” client side event.

Please refer the below code snippets for more details.

Code Snippet:

<body style="position: static; margin: 0px; padding: 2px">

    @(Html.EJ().Gantt("Gantt").

    //...

    ClientSideEvents(eve =>

       {

           eve.Create("create");

       }).

    Datasource(ViewBag.dataSource)

    )

    @(Html.EJ().ScriptManager())

    <script type="text/javascript">

        function create(args) {

            var proxy = this, today, startDate, result,left;

                today = new Date();

                startDate = Globalize.parseDate(args.model.scheduleStartDate, this.model.dateFormat);

                result = Math.round((today - startDate) / (1000 * 60 * 60 * 24));

                left = result * 30;

            $("#ganttviewerbodyContianerejGanttChart" + this._id).ejScroller("option", "scrollLeft", left);

            $("#ganttviewerheaderContainerejGanttChart" + this._id).scrollLeft(left);

        }

    </script>

</body>

Second thing:
is there a way to highlight Today - like we can highlight weekends etc.

Yes, it is possible to highlight many number of days in the Gantt chart with the help of strip lines feature in Gantt control using the “Striplines” property.

Please refer the below code snippets for more details. Here we have highlighted the today’s date alone.

Code Snippet:

<body style="position: static; margin: 0px; padding: 2px">

    @(Html.EJ().Gantt("Gantt").

    //...

    StripLines(eve=>

       {

           eve.Label("Today").Day(DateTime.Now.ToString())

               .LineColor("Darkblue").LineStyle("dotted")

               .LineWidth(2).Add();

       }).

    Datasource(ViewBag.dataSource)

    )

    @(Html.EJ().ScriptManager())

</body>

We have also prepared a sample based on this. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118473/MVCSample177414859.zip

Please let us know if you require further assistance on this.

Regards,
John. R



AC Alex Carlsen March 12, 2015 09:19 AM UTC

Amazing Support as allways! you guys really do have the best support on the web

I have one issue though.

I've created a new StripLine, but the Diagram puts it as far to the right as it possibly can, although i've set the Day to be DateTime.Now.
 StripLines = new List<GanttStripLine>(){new GanttStripLine{Label = "Today", Day = DateTime.Now.ToString(),LineStyle = "Dotted", LineColor = "DarkBlue",LineWidth = 2}}

see attached screenshot

AC Alex Carlsen March 12, 2015 09:25 AM UTC

And in the sample you sent me, the stripline is far to the left - which is fairly odd

JR John Rajaram Syncfusion Team March 12, 2015 12:37 PM UTC 

Hi Alex,
We have modified the previous workaround of the Gantt chart auto scrolling for viewing the today’s date in the center position of the Gantt chart. So that Stripline also can be rendered at the center position of the Gantt chart as per your expectation. 
Please refer the below code snippets for auto scrolling the Gantt chart based on the today’s date to the center position of Gantt chart.

Code snippet:

<body style="position: static; margin: 0px; padding: 2px">

    @(Html.EJ().Gantt("Gantt").

    //...

 

    ClientSideEvents(eve =>

       {

           eve.Create("create");

       }).

    Datasource(ViewBag.dataSource)

    )

    @(Html.EJ().ScriptManager())

    <script type="text/javascript">

        function create(args) {

            var proxy = this, today, startDate, result,left;

                today = new Date();

                startDate = Globalize.parseDate(args.model.scheduleStartDate, this.model.dateFormat);

                result = Math.round((today - startDate) / (1000 * 60 * 60 * 24));

                left = (result-12) * 30;

            $("#ganttviewerbodyContianerejGanttChart" + this._id).ejScroller("option", "scrollLeft", left);

            $("#ganttviewerheaderContainerejGanttChart" + this._id).scrollLeft(left);

        }

    </script>

</body>

Please refer the below screen shot for more details.

We have also prepared a sample based on this. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118473/MVCSampleUp1684242035.zip

If this is not your expectation, please share more information regarding your query. In the last update we did not receive your screen shot. So could you please share your images in compressed file with us, if the above solution does not meet your requirement and it will be very helpful for us to understand your requirement clearly?

Please let us know if you require further assistance on this.

Regards,
John R



Loader.
Live Chat Icon For mobile
Up arrow icon