Gantt - Client Templates

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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">
        <telerik:RadGantt RenderMode="Lightweight" runat="server" ID="RadGantt1" RowHeight="72" Height="570" ReadOnly="true" SelectedView="WeekView" AutoGenerateColumns="false">
            <MonthView UserSelectable="false" />
            <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">
                </telerik:GanttBoundColumn>
            </Columns>
            <CustomTaskFields>
                <telerik:GanttCustomField PropertyName="Color" ClientPropertyName="color" />
                <telerik:GanttCustomField PropertyName="Manager" ClientPropertyName="manager" />
            </CustomTaskFields>
        </telerik:RadGantt>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?