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

GanttView ColumnDefinitions

5 Answers 219 Views

GanttView

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

This question is locked. New answers and comments are not allowed.

Anne Lyon asked on 02 Sep 2014, 10:50 AM

Hi
I have added additional columns in the grid for GanttView, but the default size is hiding the columns.

I found a way to set the ColumnDefinitions in style, but this resulted in the GridSplitter dissapearing.

Is there a way to either set the ColumnDefinition somewhere else, or bring back the GridSplitter?

This is my styling code:

<Style TargetType="telerik:GanttItemsPresenter">

<Setter Property="Background" Value="Transparent" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:GanttItemsPresenter">

<telerik:GanttPresenterPanel>

<telerik:GanttPresenterPanel.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition MinWidth="3" Width="3*"/>

<ColumnDefinition Width="2*" />

<ColumnDefinition Width="Auto" />

</telerik:GanttPresenterPanel.ColumnDefinitions>

<telerik:VirtualizedGridPanel x:Name="FrozenCellsPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="4 -1 0 0"

telerik:GanttPresenterPanel.Column="0" telerik:GanttPresenterPanel.Area="Content" />

<telerik:VirtualizedGridPanel x:Name="CellsPanel" telerik:GanttPresenterPanel.Column="1" telerik:GanttPresenterPanel.Area="Content"

Margin="-1 -1 4 0" HorizontalAlignment="Left" VerticalAlignment="Top"

VerticalOffset="{Binding VerticalOffset, ElementName=FrozenCellsPanel, Mode=TwoWay}"

HorizontalOffset="{Binding HorizontalOffset, ElementName=ColumnsPanel, Mode=TwoWay}" />

<telerik:TreeRenderingPanel Orientation="Horizontal" x:Name="ColumnsPanel" telerik:GanttPresenterPanel.Column="1" telerik:GanttPresenterPanel.Area="Header"

HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="-1 0 4 0" />

<telerik:TreeRenderingPanel Orientation="Horizontal" x:Name="FrozenColumnsPanel" telerik:GanttPresenterPanel.Column="0" telerik:GanttPresenterPanel.Area="Header"

Margin="4 0 0 0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<ScrollBar telerik:GanttPresenterPanel.Column="1" telerik:GanttPresenterPanel.Area="ScrollBar" Orientation="Horizontal" Minimum="0"

Maximum="{Binding ExtentWidth, ElementName=ColumnsPanel}"

Value="{Binding HorizontalOffset, ElementName=ColumnsPanel, Mode=TwoWay}"

ViewportSize="{Binding ViewportWidth, ElementName=ColumnsPanel}"

SmallChange="40"

LargeChange="{Binding ViewportWidth, ElementName=ColumnsPanel}"

Visibility="{Binding CalculatedHorizontalScrollBarVisibility, ElementName=ColumnsPanel}" />

<telerik:GanttPresenterSplitter Visibility="Visible" telerik:GanttPresenterPanel.Column="1" telerik:GanttPresenterPanel.Area="Splitter" />

<telerik:LogicalCanvasPanel x:Name="EventsPanel" telerik:GanttPresenterPanel.Column="2" telerik:GanttPresenterPanel.Area="Content"

VerticalOffset="{Binding VerticalOffset, ElementName=CellsPanel, Mode=TwoWay}" Background="Transparent" Margin="0 -1 0 0"

VerticalAlignment="Top" HorizontalAlignment="Left" />

<telerik:LogicalCanvasPanel x:Name="TimeRulerPanel" telerik:GanttPresenterPanel.Column="2" telerik:GanttPresenterPanel.Area="Header"

VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="Transparent"

HorizontalOffset="{Binding HorizontalOffset, ElementName=EventsPanel, Mode=TwoWay}" />

<ScrollBar telerik:GanttPresenterPanel.Column="2" telerik:GanttPresenterPanel.Area="ScrollBar" Orientation="Horizontal" Minimum="0"

Maximum="{Binding ExtentWidth, ElementName=EventsPanel}"

Value="{Binding HorizontalOffset, ElementName=EventsPanel, Mode=TwoWay}"

ViewportSize="{Binding ViewportWidth, ElementName=EventsPanel}"

SmallChange="20"

LargeChange="{Binding ViewportWidth, ElementName=EventsPanel}"

Visibility="{Binding CalculatedHorizontalScrollBarVisibility, ElementName=EventsPanel}" />

<ScrollBar telerik:GanttPresenterPanel.Column="3" telerik:GanttPresenterPanel.Area="Content" Orientation="Vertical" Minimum="0"

Maximum="{Binding ExtentHeight, ElementName=CellsPanel}"

Value="{Binding VerticalOffset, ElementName=CellsPanel, Mode=TwoWay}"

ViewportSize="{Binding ViewportHeight, ElementName=CellsPanel}"

Visibility="{Binding CalculatedVerticalScrollBarVisibility, ElementName=CellsPanel}"

SmallChange="10"

LargeChange="{Binding ViewportHeight, ElementName=CellsPanel}" />

</telerik:GanttPresenterPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

This is my GanttView code:

<telerik:RadGanttView

Background="White"

Name="xGanttView"

TasksSource="{Binding GanttTaskSource}"

HighlightedItemsSource="{Binding GanttHighlightedTasks}"

VisibleRange="{Binding GanttVisibleRange}"

PixelLength="{Binding PixelLength}"

SelectionChanged="GanttSelectionChangedEvent"

TaskSaving="xGanttView_TaskSaving"

>

<telerik:RadGanttView.TimeRulerLines>

<telerik:MajorTickLine>

<telerik:TickInterval Interval="OneMonth" FormatString="{}{0:MM}"/>

</telerik:MajorTickLine>

</telerik:RadGanttView.TimeRulerLines>

<telerik:RadGanttView.Columns>

<telerik:ColumnDefinition Header="!" ColumnWidth="22" >

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal" ToolTipService.ToolTip="{Binding Progress, Converter={StaticResource IntToTootltipConverter}}">

<Image x:Name="asd" HorizontalAlignment="Center" Height="13" Width="13" Source="{Binding Progress, Converter={StaticResource IntToImageConverter}}" Stretch="UniformToFill"/>

</StackPanel>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:TreeColumnDefinition Header="asd" MemberBinding="{Binding Title}" ColumnWidth="150"/>

<telerik:ColumnDefinition Header="asd" Width="250" ColumnWidth="250" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:ColumnDefinition Header="asd" ColumnWidth="40" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:ColumnDefinition Header="asd" ColumnWidth="40" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:ColumnDefinition Header="asd" ColumnWidth="40" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:ColumnDefinition Header="asd" ColumnWidth="40" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:ColumnDefinition Header="asd" ColumnWidth="80" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

<telerik:ColumnDefinition Header="asd" ColumnWidth="80" MemberBinding="{Binding asd}">

<telerik:ColumnDefinition.CellTemplate>

<DataTemplate>

<TextBlock Text="{Binding OriginalEvent.asd}"/>

</DataTemplate>

</telerik:ColumnDefinition.CellTemplate>

</telerik:ColumnDefinition>

</telerik:RadGanttView.Columns>

<telerik:RadGanttView.ResizeBehavior>

<ViewModel:CustomGranttViewFeatures/>

</telerik:RadGanttView.ResizeBehavior>

<telerik:RadGanttView.DragDependenciesBehavior>

<ViewModel:CustomGranttDragDependenciesFeatures/>

</telerik:RadGanttView.DragDependenciesBehavior>

<telerik:RadGanttView.DragDropBehavior>

<ViewModel:CustomGrantDragDropFeatures/>

</telerik:RadGanttView.DragDropBehavior>

</telerik:RadGanttView>

5 Answers, 1 is accepted

answered on 05 Sep 2014, 07:54 AM

GanttColumnsSL.zip

Hi Anne Lyon,

In the RadGanttView frozen columns will be displayed before all non frozen columns in their full extent. If there is enough space the RadGanttView will visualize all frozen columns. That said, you can set the IsFrozenColumn property of the ColumnDefinitions to true in order to display them all.
If you want to achieve a hide/show functionality I suggest adding and removing ColumnDefinitions at runtime. In order for this to work we need to reset the RadGanttView template whenever we change the ColumnDefinitions.
Please find attached a sample project demonstrating this approach.

Hopefully this helps and is suitable for your scenario.

Regards,
Polya
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

answered on 08 Sep 2014, 11:15 AM

GanttColumnsSL.zip

Hi Anne,

I would like to thank you for your feedback, we will consider your suggestions. However you would be able to achieve the same using non frozen columns - note that this might cause the Columns part to get scrolled or resized whenever columns have been added or removed. I have modified the same project in order to demonstrate the same approach.

Hope this work for you.

Regards,
Kalin
Telerik