甘特图 - 修改项目的 Mouse-over 信息

Question

早上好；

我想修改甘特图，使左侧的标题和当前显示在项目上的标题相同，但是当您将鼠标悬停在它上面时，它会显示一组不同的信息。还想知道用运行整个甘特图的明显断线分隔周的最佳方法。这是代码：

页数：

@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>

控制器：

 #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();
        }

和核心：（请注意，所需信息可在标题 1 中找到）

 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

好的，事实证明它真的很简单，我只是添加了这个并且可以在 taskViewModel 中添加任何项目以使其显示

.工具提示(t => t.Template("Contractor: #=task.ContactName #,
Phone: #=task.Phone #"))

甘特图 - 修改项目的 Mouse-over 信息

Gantt - Modifying the Mouse-over information on a project

gantt-chart

kendo-gantt