GanttView ColumnDefinitions

[Anne Lyon]

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>

[Anne Lyon]

Also, is there a way to set the visibility on the columns? I cant find a visibility property.

[Polya]

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

 

 

[Anne Lyon]

Setting all columns to IsFrozenColumn="True" makes all the columns visible on startup. The problem now is that the gridsplitter is stuck. I cannot move it because of the frozen columns, so that solution is no good.

[Anne Lyon]

Besides, I find it strange that there is no Visibility property on the columns. Doing this in codebehind, and having to reset the template for each time a visibility is updated seems like a cumbersome way to do it, instead of providing a similar function as RadGridView. (Which works like a charm).

[Kalin]

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