New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Templates

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        task_template.cshtml
                    
                        Task_TemplateController.cs

Also available for:

API REFERENCE

# if (resources[0]) { # <div class="template" style="background-color: #= resources[0].color #;"> <img class="resource-img" src="../content/web/gantt/resources/#:resources[0].id#.jpg" alt="#: resources[0].id #" /> <div class="wrapper"> <strong class="title">#= title # </strong> <span class="resource">#= resources[0].name #</span> </div> <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div> </div> # } else { # <div class="template"> <div class="wrapper"> <strong class="title">#= title # </strong> <span class="resource">no resource assigned</span> </div> <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div> </div> # } # <img class="tree-list-img" src="../content/web/gantt/resources/#:TeamLead#.jpg" alt="#: TeamLead #" /> <span class="team-lead-name">#= TeamLead #</span> kendo.syncReady(function(){jQuery("#gantt").kendoGantt({"columns":[{"field":"title","title":"Title","editable":true,"sortable":{"Enabled":true,"Compare":{"TemplateDelegate":null,"HandlerName":null}}},{"field":"resources","title":"Assigned Resources","editable":true,"sortable":{"Enabled":true,"Compare":{"TemplateDelegate":null,"HandlerName":null}}},{"field":"TeamLead","title":"Team Lead","editable":false,"sortable":{"Enabled":true,"Compare":{"TemplateDelegate":null,"HandlerName":null}},"template":jQuery('#column-template').html()}],"assignments":{"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/gantt/templates_read_assignments"},"prefix":"","update":{"url":"/aspnet-mvc/gantt/templates_update_assignment"},"create":{"url":"/aspnet-mvc/gantt/templates_create_assignment"},"destroy":{"url":"/aspnet-mvc/gantt/templates_destroy_assignment"}},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"ID","fields":{"ID":{"type":"number"},"TaskID":{"type":"number"},"ResourceID":{"type":"number"},"Units":{"type":"number"}}}}},"dataResourceIdField":"ResourceID","dataTaskIdField":"TaskID","dataValueField":"Units"},"snap":false,"height":700,"showWorkDays":false,"showWorkHours":false,"taskTemplate":jQuery('#task-template').html(),"views":[{"type":"day"},{"selected":true,"type":"week"}],"rowHeight":62,"resources":{"dataColorField":"Color","dataSource":{"transport":{"read":{"url":"/aspnet-mvc/gantt/templates_read_resources"}},"schema":{"data":"Data","model":{"id":"ID"}}},"dataTextField":"Name","field":"resources"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/gantt/templates_read_tasks"},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"TaskID","fields":{"TaskID":{"type":"number"},"parentId":{"from":"ParentID","defaultValue":null,"type":"number"},"title":{"from":"Title","type":"string"},"start":{"from":"Start","type":"date"},"end":{"from":"End","type":"date"},"plannedStart":{"from":"PlannedStart","type":"date"},"plannedEnd":{"from":"PlannedEnd","type":"date"},"TeamLead":{"type":"string","defaultValue":""},"summary":{"from":"Summary","type":"boolean"},"expanded":{"from":"Expanded","type":"boolean","defaultValue":true},"percentComplete":{"from":"PercentComplete","type":"number"},"orderId":{"from":"OrderId","type":"number"}}}}},"dependencies":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/gantt/templates_read_dependencies"},"prefix":"","create":{"url":"/aspnet-mvc/gantt/templates_create_dependency"},"destroy":{"url":"/aspnet-mvc/gantt/templates_destroy_dependency"}},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"DependencyID","fields":{"DependencyID":{"type":"number"},"predecessorId":{"from":"PredecessorID","type":"number"},"successorId":{"from":"SuccessorID","type":"number"},"type":{"from":"Type","type":"number"}}}}}});}); /*center treelist cell content vertically*/ .k-gantt .k-treelist td { vertical-align: middle; } /*hide the resource labels, as they are present in the task template*/ .k-gantt .k-resource { display: none; } /*style the task template*/ .k-task-template { height: 100%; padding: 0 !important; } .template { height: 100%; overflow: hidden; } .resource-img { float: left; width: 32px; height: 32px; border-radius: 50%; margin: 8px; } .tree-list-img { float: left; width: 32px; height: 32px; border-radius: 50%; } .wrapper { padding: 8px; color: #fff; } .k-task-template .wrapper > * { display: block; overflow: hidden; text-overflow: ellipsis; } .title { font-weight: bold; font-size: 13px; } .resource { text-transform: uppercase; font-size: 9px; margin-top: .5em; } .progress { position: absolute; left: 0; bottom: 0; width: 0%; height: 4px; background: rgba(0, 0, 0, .3); } .team-lead-name { display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px; }

Templates

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo