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

Client Templates

RadGantt now supports client templates. The templates are declared in the ClientTemplate tag and support the following expressions for evaluating code:
  • #= ... # - Data - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.
  • # ... # - Code - Evaluates the JavaScript code expression inside. Does not output value.
  • #: ... # - HTML-encode - Same as the data expression, but HTML-encodes the result.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.GanttExamples.Functionality.ClientTemplates.DefaultCS"  %>

<!DOCTYPE html>
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />

    <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">
        <telerik:RadGantt RenderMode="Lightweight" runat="server" ID="RadGantt1" RowHeight="72" Height="570" ReadOnly="true" SelectedView="WeekView" AutoGenerateColumns="false">
            <MonthView UserSelectable="false" />
                <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>
                <telerik:GanttBoundColumn DataField="Title"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="PercentComplete"></telerik:GanttBoundColumn>
                <telerik:GanttBoundColumn DataField="Manager" HeaderText="Manager" DataType="String" UniqueName="Manager">
                <telerik:GanttCustomField PropertyName="Color" ClientPropertyName="color" />
                <telerik:GanttCustomField PropertyName="Manager" ClientPropertyName="manager" />

Support & Learning Resources

Find Assistance