GanttView ColumnDefinitions

6 posts, 0 answers
  1. Anne Lyon
    Anne Lyon avatar
    87 posts
    Member since:
    Jan 2010

    Posted 02 Sep 2014 Link to this post

    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>
  2. Anne Lyon
    Anne Lyon avatar
    87 posts
    Member since:
    Jan 2010

    Posted 03 Sep 2014 Link to this post

    Also, is there a way to set the visibility on the columns? I cant find a visibility property.
  3. DevCraft banner
  4. Polya
    Admin
    Polya avatar
    200 posts

    Posted 05 Sep 2014 Link to this post

    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.
     
  5. Anne Lyon
    Anne Lyon avatar
    87 posts
    Member since:
    Jan 2010

    Posted 05 Sep 2014 in reply to Polya Link to this post

    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.
  6. Anne Lyon
    Anne Lyon avatar
    87 posts
    Member since:
    Jan 2010

    Posted 05 Sep 2014 Link to this post

    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).
  7. Kalin
    Admin
    Kalin avatar
    1209 posts

    Posted 08 Sep 2014 Link to this post

    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
     
    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.
     
Back to Top
DevCraft banner