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

• Overview demo