Gantt - Modifying the Mouse-over information on a project -
good morning;
i looking modify gantt chart title found on left , showing on project same when hove mouse on it, show different set of information. know best way separate weeks noticeable break line runs entire gantt chart. here 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 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 information desired found on 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, }; } }
ok turned out simple, added , can add item in taskviewmodel make show up
.tooltip(t => t.template("contractor: #=task.contactname #,
phone: #=task.phone #"))
Comments
Post a Comment