Hiding Timeline period control

3 posts, 0 answers
  1. Alexey
    Alexey avatar
    4 posts
    Member since:
    Mar 2016

    Posted 10 Apr Link to this post

    Hello,

    I am investigating the Timeline control to determine if we are able to use it for our project.

    The first problem I am getting stuck on is I can't find a way to hide the period control.

    I am playing with a simple example.

    http://joxi.ru/GrqyRELhQVpbGr

    There is a form that shows a period information that I don't need to have.

    I am trying to use styles to hide it.

            <Style TargetType="telerik:TimelineGroupPeriodControl" >
                <Setter Property="Height" Value="0" />
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>
            <Style TargetType="telerik:TimelinePeriodControl" >
                <Setter Property="Height" Value="0" />
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>

    http://joxi.ru/VrwMkLqtObZgY2

    The period control is hidden but the place is still occupied.

    Is that any solution that would work for me?

     

    Thanks

     

     

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 11 Apr Link to this post

    Hello Alexey,

    There space between the timeline items and the top border of the control is there because the panel that holds the items has a padding set. This padding tells the container to position itself below the time periods. To position the timeline items on top of the control, you can target the TimelineItemContainer element using an implicit style, as you already doing for hiding the periods. And then set the Padding of its items panel to 0, or whatever value works for you. 

    Here is an example in code:
    <Style TargetType="telerik:TimelineItemContainer">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:TimelineItemGroupsPanel Padding="0" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Regards,
    Martin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alexey
    Alexey avatar
    4 posts
    Member since:
    Mar 2016

    Posted 11 Apr in reply to Martin Ivanov Link to this post

    Thank you Martin. Works for me.
Back to Top