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

    Web Service Binding

      The Timeline uses the ClientDataSource internally and that allows it to easily bind to any WebService. This also gives more control over handling the request and response to the service.

      • DefaultVB.aspx
      • styles.css
      <%@ Page Language="vb" 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">
              <script>
                  function OnDataBound(sender, args) {
                     sender.expand(sender.get_items()[2])
                  }
              </script>
              <telerik:RadTimeline runat="server" ID="RadTimeline1" CollapsibleEvents="true"
                  DataDateField="ReleaseDate" AlternatingMode="true" >
                  <ClientEvents OnDataBound="OnDataBound" />
                  <EventTemplate>
                      <div class="k-card-header">
                          <h5 class="k-card-title">
                              <span class="k-event-title">#= data.Title #</span>
                                <span class="k-event-collapse k-button k-button-icon k-flat"><span class="k-icon k-i-arrow-chevron-right"></span></span>
                          </h5>
                          <h6 class="k-card-subtitle">by <strong>#= data.Author #</strong></h6>
                         
                      </div>
       
                      <div class="k-card-body">
                          <div class="k-card-description">
                              <div class="imageContainer">                                   
                                  <img src="#= data.Cover #" class="k-card-image">
                              </div>
                          </div>
                      </div>
       
                      <div class="k-card-actions">
                          <a class="k-button k-flat k-primary" href="#= data.Url #" target="_blank">Buy on Amazon</a>
                      </div>
                  </EventTemplate>
                  <WebServiceClientDataSource runat="server">
                      <WebServiceSettings>
                          <Select Url="BooksService.asmx/GetBooks" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                      </WebServiceSettings>
                      <Schema DataName="d">
                          <Model>
                              <telerik:ClientDataSourceModelField DataType="Date" FieldName="ReleaseDate" />
                          </Model>
                      </Schema>
                      <SortExpressions>
                          <telerik:ClientDataSourceSortExpression FieldName="ReleaseDate" SortOrder="Desc" />
                      </SortExpressions>
                  </WebServiceClientDataSource>
              </telerik:RadTimeline>
          </div>
          </form>
      </body>
      </html>

      Support & Learning Resources

      Find Assistance