As you may already know, our ASP.NET Subscription for WebForms, MVC and .NET Core includes a
feature-rich Gantt control.
With it, you can quickly integrate project planning and task scheduling functionality
in your next web application.
Over the coming weeks I'll discuss our ASP.NET Gantt control in greater detail, but for now,
I wanted to quickly share one of its newest features with you - Strip Lines.
Our ASP.NET Gantt control allows you to display task flows and dependencies between individual
tasks.
If you've used or created project planning software in the past, you'll know that on
occasion, you may need to display tasks that stretch across a long time period.
Strip Lines help address issues with tasks that these span long time periods.
Strip Lines make it easier for end-users to locate specific dates or time periods and
to navigate long timelines.
In short, Strip Lines offer three main benefits - they help highlight the current date, allow
you to highlight custom dates and custom time periods.
In this video I will use our Strip Lines demo to implement all three highlight options.
In addition, I will show you how to customize Strip Lines and modify their appearance via
custom CSS.
OK - time to explore each type of Strip Line.
Let's first take a look at time highlighting.
As you can see, the Gantt's current time marker is not displayed.
To display it, I'll need to use the ShowCurrentTime property.
By default, the current time is updated once a minute.
Our Gantt control allows you to modify this update interval via its CurrentTimeUpdateInterval
property.
The value must be specified in milliseconds.
For example, if set it to one second or 1000 milliseconds, I can see how the current time
Strip Line line moves when I scale the timeline.
Let me go ahead and do this now - I'll set CurrentTimeUpdateInterval to 1 second and
scale the timeline to see how the current time marker moves on-screen.
The current time Strip Line is styled based on an applied theme.
For example, if you apply the Moderno theme, the Strip Line will be blue.
To make this Strip Line more noticeable or if to mute the color to make it less visible,
I can customize its appearance using custom CSS styles.
Ok - to specify Strip Line style and color, I need to assign a custom CSS class via the
CurrentTimeCssClass property.
By using this property, I can change the color, opacity or any other characteristics of the
Strip Line itself.
I can also assign a custom title to the time marker via its CurrentTimeTitle property.
Let's see this in action - I'll make the modifications and take a look at my new Strip Line.
Very cool.
Now, in addition to the current time marker, you can highlight any custom date or date
interval within the Gantt.
To create either, you'll need to add a StripLine object to the StripLines collection.
For this video, I've added two.
Note that our StripLine object includes multiple properties.
Let's look at both Start and End properties.
If I only assign the Start property, my app will display a Strip Line.
If I enter both a Start and End Date, I'll generate a highlighted interval.
Obviously, if you set Start and End Date to the same date, you will generate a strip line
and not an interval.
The appearance of Custom Strip Lines and intervals are driven by the selected theme.
Like Current Time, you can customize their appearance via CSS.
In this example, we have two custom CSS classes.
I'll assign them to the Strip Lines.
Notice that we now have a custom Strip Line and a custom time interval.
Very cool.
Before I wrap up this short video, let me show you how to add strip lines in code.
I'll create two StripLine objects and add them to the StripLines collection.
I'll also assign Start, End, Title and CssClass properties for these StripLines.
It's important to note that the order in which intervals are added to the Gantt affects how
they are displayed when these intervals intersect.
The interval added last will always be displayed above others.
Ok, I've added the first and the second interval.
Let's now see how this looks - notice that the second interval is displayed above the
first.
I'll now change the order and see what happens.
And there it is, the first interval is now displayed above the second.
With that, I hope you've enjoyed this introductory video on Gantt Strip Lines.
I'll definitely share more information on our Gantt control in the coming months.
In the meantime, if you liked this video,?please give us a thumbs up?or post?comments below.?And
don't forget to subscribe to?this?channel for more great DevExpress videos.