This is a migrated thread and some comments may be shown as answers.

Overlaping items

2 Answers 36 Views
TimeLine
This is a migrated thread and some comments may be shown as answers.
Amige
Top achievements
Rank 1
Veteran
Amige asked on 07 Mar 2015, 12:17 AM
Hello,

In my application I have a RadTimeline control which has a custom row index generator like this:

class CustomRowIndexGenerator : IItemRowIndexGenerator
    {
        public void GenerateRowIndexes(List<TimelineRowItem> dataItems)
        {
            foreach(TimelineRowItem item in dataItems)
            {
                if (item.RowIndex > 0)
                    item.RowIndex = 0;
            }
        }
    }

This is because when some items share a time space I want them to overlap and show them in a single row. 

When this occur, the newest item is shown on the top.

I'd like to know if it is possible to show the items in the opposite way, the oldest item on top.

I've attached an image to show my case, first a normal case (no overlap), then a case using the row index generator (overlaping items) and the last one, the case that I'd like to accomplish.

Thanks in advance,

Alberto


2 Answers, 1 is accepted

Sort by
0
Accepted
Martin Ivanov
Telerik team
answered on 11 Mar 2015, 11:36 AM
Hi Amige,

The stack order in the panel that arranges the timeline items is determined by the order in which the items are added in the panel. However, this panel derives from the Panel class and you can use its ZIndex attached property to adjust the timeline item's stack order, but to achieve this you will need to write custom code. A possible approach to do this is through a custom attached property on the timeline control. Here is an example:
public class TimelineUtilities
{
    public static int GetItemZIndex(DependencyObject obj)
    {
        return (int)obj.GetValue(ItemZIndexProperty);
    }
 
    public static void SetItemZIndex(DependencyObject obj, int value)
    {
        obj.SetValue(ItemZIndexProperty, value);
    }
             
    public static readonly DependencyProperty ItemZIndexProperty =
        DependencyProperty.RegisterAttached("ItemZIndex", typeof(int), typeof(TimelineUtilities), new PropertyMetadata(0, OnItemZIndexChanged));
 
    private static void OnItemZIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var element = d as UIElement;           
        if (element != null)
        {
            ContentPresenter parentControl = element.ParentOfType<ContentPresenter>();
            if (parentControl != null)
            {
                Panel.SetZIndex(parentControl, (int)e.NewValue);
            }               
        }
    }
}
.
<Window.Resources>
    <Style TargetType="telerik:TimelineItemControl">       
        <Setter Property="local:TimelineUtilities.ItemZIndex" Value="{Binding DataItem.ZIndex}" />
    </Style>
</Window.Resources>
Or if you are using the TimelineItemTemplate you can attach the property directly to the UI element in the template.
<telerik:RadTimeline.TimelineItemTemplate>
    <DataTemplate>
        <Border local:TimelineUtilities.ItemZIndex="{Binding DataItem.ZIndex}" />
    </DataTemplate>
</telerik:RadTimeline.TimelineItemTemplate>
I also attached a sample project demonstrating this implementation. Please give it a try and let me know if it works for you.

Regards,
Martin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Amige
Top achievements
Rank 1
Veteran
answered on 11 Mar 2015, 04:28 PM
Hello Martin,

Thanks for your help, that's what I was looking for.

Regards,

Alberto
Tags
TimeLine
Asked by
Amige
Top achievements
Rank 1
Veteran
Answers by
Martin Ivanov
Telerik team
Amige
Top achievements
Rank 1
Veteran
Share this question
or