Moving the NodeImage to a different column

[Nico van der Merwe]

Hi,

Can you please assist in moving the NodeImage  into is own column next to the TaskName?

Regards,

[Vignesh Ramesh]

Hi Nico, 

Greetings from Syncfusion. 

We have analyzed your query to show the node images on right side of the cell. You can achieve this by customizing the ExpanderCellRenderer in GanttControl loaded event as per the below code snippet 

Code snippet: 

class GridCustomizationBehavior : Behavior<GanttControl> 

{ 

… 

void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e) 

{ 

   … 

   this.AssociatedObject.GanttGrid.Model.CellModels.Remove("ExpanderCell"); 

   this.AssociatedObject.GanttGrid.Model.CellModels.Add("ExpanderCell", new GridCellModel<GridTreeExpanderCellRendererExtension>()); 

   this.AssociatedObject.GanttGrid.InternalGrid.ExpandGlyphType = GridTreeExpandGlyph.PlusMinus; 

   var getVisualStyleMethod = this.AssociatedObject.GanttGrid.InternalGrid.GetType().GetMethod("GetVisualStyle", BindingFlags.Instance | BindingFlags.NonPublic); 

   var visualStyle = getVisualStyleMethod.Invoke(this.AssociatedObject.GanttGrid.InternalGrid, new object[] { this.AssociatedObject.GanttGrid.InternalGrid.VisualStyle }); 

 

   var applyGridVisualStyleMethod = this.AssociatedObject.GanttGrid.InternalGrid.GetType().GetMethod("ApplyGridVisualStyle", BindingFlags.Instance | BindingFlags.NonPublic); 

   applyGridVisualStyleMethod.Invoke(this.AssociatedObject.GanttGrid.InternalGrid, new object[] { visualStyle }); 

   … 

   } 

… 

} 

public class GridTreeExpanderCellRendererExtension : GridTreeExpanderCellRendererExt 

{ 

    BitmapImage image = null; 

    public override void OnRenderText(DrawingContext dc, RenderCellArgs rca, GridRenderStyleInfo style) 

    { 

     … 

       if (image != null) 

       { 

           if (textRectangle.Width > style.TextMargins.Left) 

               textRectangle.Width -= (image.Width + style.TextMargins.Left / 4); 

           else 

               textRectangle.Width = 0; 

       } 

     … 

    } 

 

    protected override Rect ClipNodeImage(Rect cellRect, double imageWidth, double imageHeight, GridRenderStyleInfo style) 

    { 

        cellRect.X = cellRect.Width + style.TextMargins.Left - imageWidth; 

       // Here you can set the cellRect.X position for set the image in right side 

       cellRect.Width = imageWidth - 2; 

       cellRect.Height = GridControl.Model.RowHeights.DefaultLineSize - style.TextMargins.Top - style.TextMargins.Bottom + 1; 

       if (imageHeight < cellRect.Height) 

       { 

           cellRect.Y += (cellRect.Height - imageHeight) / 2; 

           cellRect.Height = imageHeight; 

       } 

 

       return cellRect; 

    } 

} 

We have modified our sample browser sample to achieve the same. Please find it from the below link. 

Sample link : http://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomizedTable816842676  

Output: 

 

Please let us know if you have any other queries. 

Regards, 

Vignesh R

[Nico van der Merwe]

Hi,

Thank you for the information provided, but I woul like to put it in its own seperate column like the is completed and Risk columns in the image.

Regards, 

[Muneesh Kumar G]

Hi Nico, 

 

Thanks for an update. 

 

We have achieved your requirement by using DataBoundTemplate column as per the below code snippet. 

 

Code Snippet: 

C#:  

In GanttControl loaded: 

void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e) 

{ 

… 

GridTreeColumn imageColumn = new GridTreeColumn 

{ 

    MappingName = "ImageSource1", 

    HeaderText = "Image", 

    Width = 100, 

    StyleInfo = new GridStyleInfo 

    { 

        CellType = "DataBoundTemplate", 

        CellItemTemplateKey = "ImageCell" 

    } 

}; 

/// Inserting the custom image columns to GanttGrid(Table) 

this.AssociatedObject.GanttGrid.Columns.Insert(2, imageColumn); 

… 

} 

 

In XAML:  

<syncfusion:ChromelessWindow.Resources> 

    <local:ColorConverter x:Key="ColorConveter" /> 

… 

    <DataTemplate x:Key="ImageCell"> 

        <Image Height="30" Width="30" Source="{Binding CellBoundValue, Mode=TwoWay}" /> 

    </DataTemplate> 

… 

</syncfusion:ChromelessWindow.Resources> 

 

We have modified our sample to achieve the same. Please find it from the below link. 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomizedTable796995268  

 

Output: 

 

 

Hope it helps.  

 

Regards, 

Muneesh Kumar G.