<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.GanttExamples.Functionality.ClientTemplates.DefaultCS" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container no-bg">
<script>
function toolbar_click(button, ev) {
var gantt = $telerik.$(button).closest(".RadGantt")[0].control;
var tasksInProgressCount = 0;
var allTasks = gantt.get_allTasks();
for (var i = 0; i < allTasks.length; i++) {
if (0 < allTasks[i].get_percentComplete() && allTasks[i].get_percentComplete() < 1) {
tasksInProgressCount++;
}
}
alert("Tasks in progress: " + tasksInProgressCount + "!");
return false;
}
</script>
<telerik:RadGantt RenderMode="Lightweight" runat="server" ID="RadGantt1" RowHeight="72" Height="570" ReadOnly="true" SelectedView="WeekView" AutoGenerateColumns="false">
<MonthView UserSelectable="false">
</MonthView>
<Toolbar>
<ClientTemplate>
<a class="k-button" href="" onclick="return toolbar_click(this, event)">Count tasks in progress</a>
</ClientTemplate>
</Toolbar>
<WeekView>
<DayHeaderTemplate>
<em>#=kendo.toString(start, 'ddd M/dd')#</em>
</DayHeaderTemplate>
<WeekHeaderTemplate>
<strong>#=kendo.toString(start, 'ddd M/dd')# - #=kendo.toString(kendo.date.addDays(end, -1), 'ddd M/dd')#</strong>
</WeekHeaderTemplate>
</WeekView>
<%-- Task template --%>
<ClientTemplate>
<div class="template" style="background-color: #: color#;">
<div class="wrapper">
<img class="resource-img" src="images/#: manager#.png" />
<div class="info-container">
<strong class="title">#= title # </strong>
<span class="manager">Manager: #= manager # </span>
</div>
</div>
</div>
</ClientTemplate>
<Columns>
<telerik:GanttBoundColumn DataField="Title"></telerik:GanttBoundColumn>
<telerik:GanttBoundColumn DataField="PercentComplete"></telerik:GanttBoundColumn>
<telerik:GanttBoundColumn DataField="Manager" HeaderText="Manager" DataType="String" UniqueName="Manager">
<%-- Column Header template --%>
<ClientHeaderTemplate>
<strong>#= this.title#</strong>
</ClientHeaderTemplate>
<%-- Column template --%>
<ClientTemplate>
<div class="template" style="background-color: #: color#; overflow: hidden;">
<div class="wrapper" style="display: inline-block">
<img class="resource-img" src="images/#: manager#.png" />
<div class="info-container" style="display: flex">
<strong class="title">#= manager # </strong>
</div>
</div>
</div>
</ClientTemplate>
</telerik:GanttBoundColumn>
</Columns>
<TasksTooltipSettings>
<%-- Task Tooltip template --%>
<ClientTemplate>
<div class="#=kendo.htmlEncode(styles.taskDetails)#" >
<strong>#=kendo.htmlEncode(task.title)#</strong>
<div class="wrapper" >
<img class="resource-img" src="images/#: task.manager#.png" />
<div class="info-container" style="display: inline-block">
<strong class="title">Manager</strong>
<span class="manager">#= task.manager # </span>
</div>
</div>
<ul class="#=styles.reset#">
<li>#=messages.start#: #=kendo.toString(task.start, "h:mm tt ddd, MMM d")#</li>
<li>#=messages.end#: #=kendo.toString(task.end, "h:mm tt ddd, MMM d")#</li>
</ul>
</div>
</ClientTemplate>
</TasksTooltipSettings>
<CustomTaskFields>
<telerik:GanttCustomField PropertyName="Color" ClientPropertyName="color" />
<telerik:GanttCustomField PropertyName="Manager" ClientPropertyName="manager" />
</CustomTaskFields>
</telerik:RadGantt>
</div>
</form>
</body>
</html>