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

Client Templates

Description

A common scenario is to have the ability to custmize how the event details will be displayed in the RadTimeline for ASP.NET AJAX control.

This example demostrates how to render two images below the description text and take the advantage of using the built-in classes for the card elements.

RadTimeline uses Kendo UI Templates to provide full control over the way the events data is rendered, allowing you to customize customize them to your needs instead of using the default card. The template is very useful in scenarios in which you need to have more than one image rendered in each event card.

By default, the data for an item contains all DataFields declared in the Columns. If more fields from the server-side DataItems are needed, the properties can be added to the DataKeyNames collection, separated by a comma.

  • DefaultCS.aspx
  • styles.css
  • events-templates.json
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" runat="server">
        <telerik:RadTimeline ID="RadTimeline1" runat="server" Orientation="Horizontal">
            <EventTemplate>
                <div class="k-card-header">
                    <h5 class="k-card-title">#= data.title #</h5>
                    <h6 class="k-card-subtitle"><strong>#= kendo.toString(data.date, "MMM d, yyyy")#</strong></h6>
                </div>
                <div class="k-card-body">
                    <div class="k-card-description">
                        <p>#= data.description #</p>
                        <div class="imageContainer">
                            <img src="#= data.images[0].src #" class="k-card-image">
                            <img src="#= data.images[1].src #" class="k-card-image">
                        </div>
                    </div>
                </div>
                <div class="k-card-actions">
                    <a class="k-button k-flat k-primary" href="#= data.actions[0].url #" target="_blank">#= data.actions[0].text #</a>
                </div>
            </EventTemplate>
            <WebServiceClientDataSource>
                <WebServiceSettings>
                    <Select Url="events-templates.json" DataType="JSON" />
                </WebServiceSettings>
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField DataType="Date" FieldName="date" />
                    </Model>
                </Schema>
                <SortExpressions>
                    <telerik:ClientDataSourceSortExpression FieldName="date" SortOrder="Asc" />
                </SortExpressions>
            </WebServiceClientDataSource>
        </telerik:RadTimeline>
    </div>

    <qsf:MessageBox runat="server" Title="Description" Icon="Info">
        <p>
            A common scenario is to have the ability to custmize how the event details will be displayed in the RadTimeline for ASP.NET AJAX control.
        </p>
        <p>This example demostrates how to render two images below the description text and take the advantage of using the built-in classes for the card elements.</p>
    </qsf:MessageBox>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance