From 7beff6883500048f996f2868c4c6e555110fe92a Mon Sep 17 00:00:00 2001 From: Mathanraj3786 Date: Tue, 11 Jun 2024 09:25:29 +0530 Subject: [PATCH 1/4] 890529: timeline template --- .../tooltip/timelineTemplate/image/1.svg | 22 +++++ .../tooltip/timelineTemplate/image/2.svg | 19 +++++ .../tooltip/timelineTemplate/image/3.svg | 19 +++++ .../tooltip/timelineTemplate/image/4.svg | 22 +++++ .../tooltip/timelineTemplate/image/5.svg | 12 +++ .../gantt/tooltip/timelineTemplate/razor | 64 +++++++++++++++ .../gantt/tooltip/timelineTemplate/tagHelper | 81 +++++++++++++++++++ .../timelineTemplate/timelineTemplate.cs | 5 ++ ej2-asp-core-mvc/gantt/time-line/time-line.md | 36 +++++++++ 9 files changed, 280 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/1.svg create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/2.svg create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/3.svg create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/4.svg create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/5.svg create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/timelineTemplate.cs diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/1.svg b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/1.svg new file mode 100644 index 0000000000..b5a5e6e524 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/1.svg @@ -0,0 +1,22 @@ + + + + Sunny@2x + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/2.svg b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/2.svg new file mode 100644 index 0000000000..b469d8692e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/2.svg @@ -0,0 +1,19 @@ + + + + Rainy@2x + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/3.svg b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/3.svg new file mode 100644 index 0000000000..b469d8692e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/3.svg @@ -0,0 +1,19 @@ + + + + Rainy@2x + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/4.svg b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/4.svg new file mode 100644 index 0000000000..b5a5e6e524 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/4.svg @@ -0,0 +1,22 @@ + + + + Sunny@2x + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/5.svg b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/5.svg new file mode 100644 index 0000000000..8bdf83a091 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/image/5.svg @@ -0,0 +1,12 @@ + + + + cloudy@2x + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor new file mode 100644 index 0000000000..20c4588586 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor @@ -0,0 +1,64 @@ + @Html.EJS().Gantt("Gantt").DataSource((IEnumerable)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name( + "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).TimelineTemplate("#timelineTemplates") .TimelineSettings(ts => ts.TimelineUnitSize(100).TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week).Format("MMM dd, yyyy")) + .BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day).Count(1))).Holidays(hol => { + hol.From("04/04/2019").To("04/05/2019").Label("Local Holiday").Add(); + hol.From("04/12/2019").To("04/12/2019").Label("Public holiday").Add(); + }) .LabelSettings(ls => ls.LeftLabel("TaskName")).Render() + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper new file mode 100644 index 0000000000..887ea46af1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/timelineTemplate.cs b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/timelineTemplate.cs new file mode 100644 index 0000000000..eec9005cde --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/timelineTemplate.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = GanttData.ProjectNewData(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/gantt/time-line/time-line.md b/ej2-asp-core-mvc/gantt/time-line/time-line.md index 49726302bb..f6e5c642b7 100644 --- a/ej2-asp-core-mvc/gantt/time-line/time-line.md +++ b/ej2-asp-core-mvc/gantt/time-line/time-line.md @@ -209,3 +209,39 @@ In the Gantt control, you can enable or disable the mouse hover tooltip of timel ![Alt text](images/timelinecellTooltip.png) + +## Timeline template + +In the Gantt component, you can customize timeline cells using the [timelineTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.GanttTimelineTemplate.html) property, allowing for the customization of HTML content within timeline cells. This feature enhances the visual appeal and enables personalized functionality. + +When designing the timeline cells, you can utilize the following context properties within the template: + +* `date`: Defines the date of the timeline cells. +* `value`: Defines the formatted date value that will be displayed in the timeline cells. +* `tier`: Defines whether the cell is part of the top or bottom tier. + +The following code example how to customize the top tier to display the week's weather details and the bottom tier to highlight working and non-working days, with formatted text for holidays. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/tooltip/timelineTemplate/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="timelineTemplate.cs" %} +{% include code-snippet/gantt/tooltip/timelineTemplate/timelineTemplate.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/tooltip/timelineTemplate/razor %} +{% endhighlight %} +{% highlight c# tabtitle="timelineTemplate.cs" %} +{% include code-snippet/gantt/tooltip/timelineTemplate/timelineTemplate.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + From e783888c34570c075bdff37bf1d9329e0f2e9ca0 Mon Sep 17 00:00:00 2001 From: Mathanraj3786 Date: Tue, 11 Jun 2024 17:58:39 +0530 Subject: [PATCH 2/4] 890529: timeline template --- .../gantt/tooltip/timelineTemplate/razor | 102 ++++++++-------- .../gantt/tooltip/timelineTemplate/tagHelper | 110 +++++++++--------- 2 files changed, 104 insertions(+), 108 deletions(-) diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor index 20c4588586..ae97cbc37b 100644 --- a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor @@ -5,60 +5,58 @@ hol.From("04/12/2019").To("04/12/2019").Label("Public holiday").Add(); }) .LabelSettings(ls => ls.LeftLabel("TaskName")).Render() - - ${/if} - - + \ No newline at end of file + } + const bgColor = (value, date) => { + if (value === "S") { + return "#7BD3EA" + } + var ganttObj = document.getElementById("Gantt").ej2_instances[0]; + const parsedDate = new Date(date); + for (let i = 0; i < ganttObj.holidays.length; i++) { + const holiday = ganttObj.holidays[i]; + const fromDate = new Date(holiday.from); + const toDate = new Date(holiday.to) + if (parsedDate >= fromDate && parsedDate <= toDate) { + return "#97E7E1"; + } + } + return "#E0FBE2" + }; + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper index 887ea46af1..32fac3369d 100644 --- a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/tagHelper @@ -1,4 +1,4 @@ - + @@ -22,60 +22,58 @@ - + + + \ No newline at end of file + } + const bgColor = (value, date) => { + if (value === "S") { + return "#7BD3EA" + } + var ganttObj = document.getElementById("Gantt").ej2_instances[0]; + const parsedDate = new Date(date); + for (let i = 0; i < ganttObj.holidays.length; i++) { + const holiday = ganttObj.holidays[i]; + const fromDate = new Date(holiday.from); + const toDate = new Date(holiday.to) + if (parsedDate >= fromDate && parsedDate <= toDate) { + return "#97E7E1"; + } + } + return "#E0FBE2" + }; + \ No newline at end of file From b86b4763a3f65bf6da8fba23668659731b8fb16e Mon Sep 17 00:00:00 2001 From: Mathanraj3786 Date: Tue, 11 Jun 2024 18:48:30 +0530 Subject: [PATCH 3/4] 890529: timeline template --- .../gantt/tooltip/timelineTemplate/razor | 28 ++++++++++++++----- .../gantt/tooltip/timelineTemplate/tagHelper | 28 +++++++++---------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor index ae97cbc37b..e7e4594b19 100644 --- a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/timelineTemplate/razor @@ -1,10 +1,24 @@ - @Html.EJS().Gantt("Gantt").DataSource((IEnumerable)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name( - "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).TimelineTemplate("#timelineTemplates") .TimelineSettings(ts => ts.TimelineUnitSize(100).TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week).Format("MMM dd, yyyy")) - .BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day).Count(1))).Holidays(hol => { - hol.From("04/04/2019").To("04/05/2019").Label("Local Holiday").Add(); - hol.From("04/12/2019").To("04/12/2019").Label("Public holiday").Add(); - }) .LabelSettings(ls => ls.LeftLabel("TaskName")).Render() - +@Html.EJS().Gantt("Gantt").DataSource((IEnumerable < object >)ViewBag.DataSource).Height("450px").AllowSelection(true).TreeColumnIndex(1) + .TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress") + .Dependency("Predecessor").Child("SubTasks")).TimelineTemplate("#timelineTemplates").TimelineSettings(ts => ts.TimelineUnitSize(100).TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Week).Format("MMM dd, yyyy")) + .BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day).Count(1))) +{ + col.Field("TaskId").Visible(false).Add(); + col.Field("TaskName").Width(300).Add(); + col.Field("StartDate").Add(); + col.Field("EndDate").Add(); + col.Field("Duration").Add(); + col.Field("Progress").Add(); +}) + .LabelSettings(ls => ls.LeftLabel("TaskName")) + .SplitterSettings(sp => sp.ColumnIndex(1)) + .ProjectStartDate("03/31/2024") + .ProjectEndDate("04/23/2024") + .Holidays(hol => { + hol.From("04/04/2019").To("04/05/2019").Label("Local Holiday").Add(); + hol.From("04/12/2019").To("04/12/2019").Label("Public holiday").Add(); + }) + .Render()