Skip to content

Commit f9ea696

Browse files
attilaantalattilaantal
committed
docs(gantt): create help article for templates
1 parent a97a874 commit f9ea696

File tree

1 file changed

+159
-0
lines changed

1 file changed

+159
-0
lines changed

‎controls/gantt/functionality/client-templates.md‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
title: Client Templates
3+
page_title: Client Templates in RadGantt
4+
description: Client templates in RadGantt for Task, Column, ColumnHeader, View, Task Tooltip, ToolBar Buttons.
5+
slug: gantt/functionality/client-templates
6+
tags: gantt, templates
7+
published: True
8+
position: 8
9+
---
10+
11+
# Client Templates
12+
13+
**RadGantt** uses [Kendo UI Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview) to provide full control over the rendering of Tasks, Columns, Column headers, View headers, and Toolbar. The control supports the following templates:
14+
15+
- [Task Template](#task-template)
16+
17+
- [Column Template and Column Header Template](#column-template-and-column-header-template)
18+
19+
- [View Header Template](#view-header-template)
20+
21+
- [Toolbar Template](#toolbar-template)
22+
23+
- [Task Tooltip Template](#task-tooltip-template)
24+
25+
You can use the following expressions to evaluate code in the ClientTemplates:
26+
27+
- **\#= ... #** - Data - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.
28+
- **\# ... #** - Code - Evaluates the JavaScript code expression inside. Does not output value.
29+
- **\#: ... #** - HTML-encode - Same as the data expression, but HTML-encodes the result.
30+
31+
32+
For runnable examples on how to use templates in **RadGantt** check out the [Client Templates](https://demos.telerik.com/aspnet-ajax/gantt/examples/functionality/client-templates/defaultcs.aspx) demo.
33+
34+
## Task Template
35+
36+
To customize the way the tasks of the Gantt are rendered, use the **ClientTemplate** inner tag of the RadGantt.
37+
38+
This is the template that is rendered for each individual task in the timeline veiw. It receives the `data` parameter that points to the dataItem for the corresponding task, so you can use all its data source fields
39+
40+
41+
````ASPX
42+
<ClientTemplate>
43+
<div class="template" style="background-color: #: color#;">
44+
<div class="wrapper">
45+
<img class="resource-img" src="images/#: data.manager#.png" />
46+
<div class="info-container">
47+
<strong class="title">#= data.title # </strong>
48+
<span class="manager">Manager: #= data.manager # </span>
49+
</div>
50+
</div>
51+
</div>
52+
</ClientTemplate>
53+
````
54+
55+
56+
## Column Template and Column Header Template
57+
58+
The TreeList portion of the **RadGantt** can also be customized using templates. Since R2 2021 Gantt control exposes client-side templates for the columns and their headers.
59+
60+
````
61+
<telerik:GanttBoundColumn DataField="Title" AllowEdit="true" DataType="String">
62+
<ClientHeaderTemplate>
63+
<strong><a href="https://www.google.com/search?q=task">Task</a></strong>
64+
</ClientHeaderTemplate>
65+
<ClientTemplate>
66+
<a href= #= "https://www.google.com/search?q=" + data.title #> #= data.title #</a>
67+
</ClientTemplate>
68+
</telerik:GanttBoundColumn>
69+
````
70+
71+
72+
## View Header Template
73+
74+
In the same manner the headers of the [Views]({%slug gantt/views/overview%}) of RadGantt can also be customized using client templates. Each of the four default views - [Day]({%slug gantt/views/day-view%}), [Week]({%slug gantt/views/week-view%}), [Month]({%slug gantt/views/month-view%}), and [Year]({%slug gantt/views/year-view%}), contain a header field and time span header cells that can be modified with templates. The Header templates fo each view can be defined in the respective inner tag.
75+
76+
For instance:
77+
78+
````
79+
<DayView>
80+
<TimeHeaderTemplate>#=kendo.toString(start, 't')#</TimeHeaderTemplate>
81+
<DayHeaderTemplate>#=kendo.toString(start, 'ddd M/dd')#</DayHeaderTemplate>
82+
</DayView>
83+
<WeekView>
84+
<DayHeaderTemplate>#=kendo.toString(start, 'ddd M/dd')#</DayHeaderTemplate>
85+
<WeekHeaderTemplate>#=kendo.toString(start, 'ddd M/dd')# - #=kendo.toString(kendo.date.addDays(end, -1), 'ddd M/dd')#</WeekHeaderTemplate>
86+
</WeekView>
87+
<MonthView>
88+
<WeekHeaderTemplate>#=kendo.toString(start, 'ddd M/dd')# - #=kendo.toString(kendo.date.addDays(end, -1), 'ddd M/dd')#</WeekHeaderTemplate>
89+
<MonthHeaderTemplate>#=kendo.toString(start, 'MMMM, yyyy')#</MonthHeaderTemplate>
90+
</MonthView>
91+
<YearView UserSelectable="true">
92+
<MonthHeaderTemplate>#=kendo.toString(start, 'MMM')#</MonthHeaderTemplate>
93+
<YearHeaderTemplate>#=kendo.toString(start, 'yyyy')#</YearHeaderTemplate>
94+
</YearView>
95+
````
96+
97+
## Toolbar Template
98+
99+
As of R2 2021 the Toolbar of RadGantt gets customizable. New client templates are exposed - one for or the Toolbar itself and one for its items.
100+
101+
* The Toolbar template is declared in the **ClientTemplate** inner tag. When this template is used, the default action buttons are not rendered.
102+
103+
````
104+
<Toolbar>
105+
<ClientTemplate>
106+
<%--Custom Toolbar definition--%>
107+
</ClientTemplate>
108+
</Toolbar>
109+
````
110+
111+
* In the **Items** inner tag, the default action buttons can be defined declaratively. Additional custom Toolbar Items can also be added, including such with client-side templates:
112+
113+
````
114+
<Toolbar>
115+
<Items>
116+
<telerik:GanttToolbarItem Name="pdf" Text="Pdf export" />
117+
<telerik:GanttToolbarItem Name="append" Text="add new task" />
118+
<telerik:GanttToolbarItem Name="custom" Text="Custom" />
119+
<telerik:GanttToolbarItem Name="test">
120+
<ClientTemplate>
121+
<a class="k-button" href="" onclick="return toolbar_click()">Command</a>
122+
</ClientTemplate>
123+
</telerik:GanttToolbarItem>
124+
</Items>
125+
</Toolbar>
126+
````
127+
128+
>note The "Add New Task" button will only work when the RadGantt is editable (`ReadOnly` property is **not** set to true). For the "Export to PDF" action button to work you need to set `EnablePdfExport` property to **true**.
129+
130+
## Task Tooltip Template
131+
132+
With R2 2021 a Task Tooltip Template is also available in the RadGantt component. It can be used for customizing the tooltip rendered when hovering over a task in the Gantt Timeline. The client-side Tooltip template is defined inside the **TaskTooltipSettings**, like shown below:
133+
134+
````
135+
<TasksTooltipSettings>
136+
<ClientTemplate>
137+
<div class="#=kendo.htmlEncode(styles.taskDetails)#" >
138+
<strong>#=kendo.htmlEncode(task.title)#</strong>
139+
140+
<div class="#=styles.taskDetailsPercent#">
141+
Progress: #=kendo.toString(task.percentComplete, "p0")#
142+
</div>
143+
<ul class="#=styles.reset#">
144+
<li>#=messages.start#: #=kendo.toString(task.start, "h:mm tt ddd, MMM d")#</li>
145+
<li>#=messages.end#: #=kendo.toString(task.end, "h:mm tt ddd, MMM d")#</li>
146+
</ul>
147+
<span class="manager"> #= task.manager # </span>
148+
</div>
149+
</ClientTemplate>
150+
</TasksTooltipSettings>
151+
````
152+
153+
# See Also
154+
155+
* [Kendo UI Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview)
156+
157+
* [Client Templates - demo](https://demos.telerik.com/aspnet-ajax/gantt/examples/functionality/client-templates/defaultcs.aspx)
158+
159+

0 commit comments

Comments
 (0)