Gantt - Modifying the Mouse-over information on a project - gantt-chart

Question

Good Morning;
I am looking to modify a Gantt Chart so that the Title found on the left and currently showing on the project are the same but when you hove the mouse over it, it will show a different set of information. Would also like to know the best way to separate the weeks with a noticeable break line that runs the entire gantt chart. Here is the code:
Page:
#using Kendo.Mvc.UI
<p></p>
<h2>#ViewBag.Title</h2>
#(Html.Kendo().Gantt<cpr_web.Models.TaskViewModel, cpr_web.Models.DependencyViewModel>()
.Name("Gantt")
.Views(views =>
{
views.WeekView(w => w.DayHeaderTemplate("#=kendo.toString(start, 'dd' )#").SlotSize(40));
views.MonthView(m => m.WeekHeaderTemplate("#=kendo.toString(start,'d', end,'d')#").SlotSize(150));
//views.YearView();
})
.Columns(columns =>
{
columns.Bound("title").Editable(false).Sortable(true).Width(100);
//columns.Bound("start").Format("{0:MM-dd}").Sortable(true).Width(10);
columns.Bound("State").Editable(false).Sortable(true).Width(30);
columns.Bound("City").Editable(false).Sortable(true).Width(40);
//columns.Bound("PercentComplete").Sortable(true).Width(10).Title("Complete");
})
.Events(e => {
e.Edit("editingGantt");
e.DataBound("databoundGantt");
e.Remove("unsupported");
e.Change("unsupported");
e.Move("unsupported");
e.MoveEnd("unsupported");
e.MoveStart("unsupported");
e.Resize("unsupported");
e.ResizeEnd("unsupported");
e.ResizeStart("unsupported");
})
.Navigatable(false)
.Editable(e => e.Confirmation(false))
.Toolbar(t =>
{
t.Add().Name("Menu").Template("<a href='/BackendSchedule/Index'>Schedule Menu</a>");
})
.ListWidth("450")
.ShowWorkDays(false)
.ShowWorkHours(false)
.Snap(true)
.Height(2000)
.DataSource(ds => ds
.Read(read => read
.Action("Tasks", "BackendSchedule")
)
.Model(m =>
{
m.Id(f => f.TaskID);
m.ParentId(f => f.ParentID);
m.OrderId(f => f.OrderId);
m.Field(f => f.Title);
m.Field(f => f.Title1);
m.Field(f => f.Start);
m.Field(f => f.End);
m.Field(f => f.Expanded).DefaultValue(false);
})
)
//.DependenciesDataSource(ds => ds
// .Read(read => read
// .Action("Dependencies", "BackendSchedule")
// )
// .Model(m =>
// {
// m.Id(f => f.DependencyID);
// m.PredecessorId(f => f.PredecessorID);
// m.SuccessorId(f => f.SuccessorID);
// m.Type(f => f.Type);
// })
//)
.Resources(r =>
{
r.Field("resources");
r.DataColorField("Color");
r.Field("PercentComplete");
r.DataSource(ds => ds
.Custom()
.Schema(s => s
.Model(m => m.Id("Id"))
.Data("Message")
)
.Transport(t =>
{
t.Read("GanttResources", "BackendSchedule");
})
);
})
)
#(Html.Kendo().Window().Name("utilityWindow")
.Title("Edit Job")
.Iframe(true)
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(500)
.Height(250)
.Events(evt => evt
.Close("closeWindow")
)
)
<script>
kendo.culture().calendar.firstDay = 1;
function closeWindow(e) {
$(this.element).empty();
}
function unsupported(e) {
// remove not supported/permitted in this app
e.preventDefault();
}
function editingGantt(e) {
var jobId = e.task.title.split(':')[0];
var win = $("#utilityWindow").data("kendoWindow");
win.refresh({ url: "/BackendSchedule/_Jobs?jobId=" + jobId + "&source=gantt" });
win.setOptions({
title: "Edit Jobs",
width: 1000,
height: 600,
});
win.center().open();
e.preventDefault();
}
function databoundGantt(e) {
var gantt = $("#Gantt").data("kendoGantt")
var data = gantt.dataSource.data();
$.each(data, function (i,row){
var taskElement = $("div[data-uid=\"" + data[i].uid + "\"]");
if (row.percentComplete == 0) {
taskElement.addClass("color-green");
} else {
taskElement.addClass("color-red");
}
//alert(row.percentComplete);
});
}
</script>
Controller:
#region Gantt
[Authorize(Roles = "Manager, Administrator, Responsible Party")]
public ActionResult Gantt()
{
ViewBag.Title = "Manage Schedule";
return View();
}
public JsonResult GanttResources()
{
List<MessageModel> resources = new List<MessageModel>();
MessageModel resource = new MessageModel();
resource.Id = "0";
resource.Message = "green";
resources.Add(resource);
resource = new MessageModel();
resource.Id = "1";
resource.Message = "red";
resources.Add(resource);
return Json(resources, JsonRequestBehavior.AllowGet);
}
[Authorize]
public JsonResult Tasks([DataSourceRequest] DataSourceRequest request)
{
Jobs jobs = new Jobs();
var tasks = jobs.GetTasks();
return Json(tasks.AsQueryable().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
public JsonResult Dependencies([DataSourceRequest] DataSourceRequest request)
{
var dependencies = new List<DependencyViewModel> {
new DependencyViewModel { DependencyID = 100, PredecessorID = 0, SuccessorID = 0, Type = DependencyType.FinishStart }
};
return Json(dependencies.AsQueryable().ToDataSourceResult(request));
}
public ActionResult Resources()
{
return View();
}
And Core: (Note the information desired is found on the title1)
public List<TaskViewModel> GetTasks()
{
List<TaskViewModel> tasks = new List<TaskViewModel>();
Teams teamObject = new Teams();
IEnumerable<TeamModel> teams = teamObject.GetTeam();
int taskId = 0;
int parentId = 0;
bool teamChanged = true;
foreach (TeamModel team in teams)
{
teamChanged = true;
taskId++;
parentId = taskId;
TaskViewModel task = new TaskViewModel();
task.TaskID = taskId;
task.ParentID = null;
task.Title = team.Name + ": " + team.LeadName;
task.Expanded = true;
task.Summary = true;
task.Start = DateTime.Today.AddDays(-7);
task.End = task.Start.AddMonths(3);
tasks.Add(task);
foreach (JobModel job in getJobs().Where(j => j.TeamId == team.Id).OrderBy(j => j.PlanStartDate))
{
taskId++;
task = new TaskViewModel();
task.TaskID = taskId;
task.ParentID = parentId;
task.Title = job.Id /*+ ": " + job.ContactName + ": " + job.Phone + ": " + job.FullAddress + ": " + job.City + ": " + job.State*/;
task.Title1 = job.Id + ": <p>" + job.ContactName + ": </br>" + job.Phone + ": </br>" + job.City + ": </br>" + job.State;
task.City = job.City;
task.State = job.State;
task.Start = job.PlanStartDate;
task.End = job.PlanEndDate;
task.Expanded =true;
task.Summary = false;
if (job.IsComplete)
{
task.PercentComplete = 0.001M;
}
else
{
task.PercentComplete = 0;
}
tasks.Add(task);
}
}
return tasks;
}
public IEnumerable<ScheduleModel> GetSchedule()
{
foreach (JobModel job in getJobs())
{
yield return new ScheduleModel
{
JobId = job.Id,
Title = job.Company,
ContactName = job.ContactName,
Email = job.Email,
Phone = job.Phone,
Start = job.PlanStartDate,
End = job.PlanEndDate,
IsAllDay = true,
TeamName=job.Company,
TeamId=job.CompanyId,
TeamColour=job.TeamId,
};
}
}

Answer 1

Ok so it turned out to be really simple, I just added this and can add any item in the taskViewModel to make it show up
.Tooltip(t =>
t.Template("Contractor: #=task.ContactName #, Phone: #=task.Phone #"))