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

Sorting

RadTimeline provides a built-in sorting mechanism for its events when the control is bound client-side, allowing you to sort them in ascending or descending order.

By default, the datasource is not sorted and the events might not show chronologically. To ensure the events are in chronological order, set the sort order, Asc or Desc, via the SortExpressions of the internal WebServiceClientDataSource or the external ClientDataSource.

Example 1: RadTimeline with data sorted descending by Date

<telerik:RadTimeline runat="server" ID="RadTimeline1" AlternatingMode="true" CollapsibleEvents="true" Orientation="Vertical">
    <WebServiceClientDataSource>
        <WebServiceSettings>
            <Select Url="events-vertical-part1.json" DataType="JSON" />
        </WebServiceSettings>
        <Schema>
            <Model>
                <telerik:ClientDataSourceModelField DataType="Date" FieldName="date" />
            </Model>
        </Schema>
            <SortExpressions>
                <telerik:ClientDataSourceSortExpression FieldName="date" SortOrder="Desc" />
            </SortExpressions>
    </WebServiceClientDataSource>
</telerik:RadTimeline>

Toggle Sorting Direction

The sorting can be toggled via the internal Kendo widget. Here is an example how a Button click will change the sorting direction of RadTimeline on the client-side:

<telerik:RadButton runat="server" ID="RadButton1" Text="Reverse Timeline events order" AutoPostBack="false" OnClientClicked="OnClientClicked" />
<script>
    function OnClientClicked(sender, args) {
        var toggleSort = { "asc": "desc", "desc": "asc" };
        var kendoDS = $find("<%= RadClientDataSource1.ClientID %>").get_kendoWidget();
        var sort = kendoDS.sort();
        sort[0].dir = toggleSort[sort[0].dir];
        kendoDS.sort(sort);
    }
</script>

See Also

In this article
Not finding the help you need? Improve this article