Columns Settings and Customization

Overview

Data Grid is a table on the left of the Project or Resource chart, it contains table like list of tasks or resources. You can choose what columns to include in the data grid and how they should look like, you can use built-in tokens or custom attributes as a source for the data in columns.

to top

Adding and Changing Columns

There are preset column set for any project type and you can always redefine this set. Columns are defined in <columns> subnode of <datagrid> node:

<anygantt>
  
<datagrid>
    
<columns>
      
<column width="30" cell_align="Center">
        
<header>
          
<text>#</text>
        
</header>
        
<format>{%RowNum}</format>
      
</column>
      
<column width="120" cell_align="LeftLevelPadding">
        
<header>
          
<text>Employee</text>
        
</header>
        
<format>{%Name}</format>
      
</column>
    
</columns>
  
</datagrid>
</anygantt>

As you can see we have defined two columns - <column> node should be added for each, set what text should be displayed in column headers <header> subnodes and what attributes are used as a source for table cells - <format> node sets that.

Data-Grid-Columns-Set - Click to see Live Chart Preview
Data-Grid-Columns-Set - Click to see Live Chart Preview

to top

General Settings

In general each column settings consist of header settings set in <header> node, and <cell> node which configures how data grid cells of the column looks like.

Also, each <column> node has width attribute and allow_autoresize attribute, which set column default width in pixels and define whether column can be resized automatically, or the size setting is strict.

to top

Text formatting

As shown in the sample above the text to be put into the cells of the data grid is defined in <format> node, you can put any text into this node, but to make this cells useful you should either use so-called Built-in tokens or tokens for Custom Attributes. You can combine them and format just like any other text (labels or tooltips).

Using Built-in tokens

There are several built-in tokens - data for the comes from the values of task, resource or period attributes, table below list all possible built-in tokens that can be used in data grid format - together or separately.

Token Description
{%RowNum} Row index (task, resource)
{%ID} Identifier (task, resource)
{%Name} Name (task, resource)
{%ActualStart}

Actual start (task). If task has several intervals - this refers to the first interval start.
If you have resource project - the first period start.

{%ActualEnd} Actual end (task). If task has several intervals - this refers to the last interval end.
If you have resource project - the last period end.
{%BaselineStart} Task only. Baseline start. If task has several intervals - this refers to the first interval start.
{%BaselineEnd} Task only. Baseline end. If task has several intervals - this refers to the last interval start.
{%Complete} Task only. Progress (without %)
{%CompleteDate} Task only. Progress date.
{%PeriodStart} Resource only. Period start.
{%PeriodEnd} Resource only. Period end.
{%IntervalStart} Task only. Interval start.
{%IntervalEnd} Task only. Interval End.
{%Duration} The duration of actual time for tasks or period duration.
{%BaselineDuration} Task only. Baseline plan duration.

You can format these tokens using AnyGantt formatting options - for example to change data format display, in the sample below we show the datagrid with the maximum number of built-in token used - for Project Chart:

<anygantt>
  
<datagrid width="100">
    
<columns>
      
<column width="80" cell_align="Center">
        
<header>
          
<text>{%RowNum}</text>
        
</header>
        
<format>{%RowNum}</format>
      
</column>
      
<column width="60" cell_align="Center">
        
<header>
          
<text>{%ID}</text>
        
</header>
        
<format>{%ID}</format>
      
</column>
      
<column width="90" cell_align="LeftLevelPadding">
        
<header>
          
<text>{%Name}</text>
        
</header>
        
<format>{%Name}</format>
      
</column>
      
<column width="180" cell_align="Center">
        
<header>
          
<text>{%ActualStart} - {%ActualEnd}</text>
        
</header>
        
<format>{%ActualStart}{dateTimeFormat:%dd %MMM} - {%ActualEnd}{dateTimeFormat:%dd %MMM}</format>
      
</column>
      
<column width="180" cell_align="Center">
        
<header>
          
<text>{%BaselineStart} - {%BaselineEnd}</text>
        
</header>
        
<format>{%BaselineStart}{dateTimeFormat:%dd/%MM} - {%BaselineEnd}{dateTimeFormat:%dd/%MM}</format>
      
</column>
      
<column width="90" cell_align="Center">
        
<header>
          
<text>{%Complete}</text>
        
</header>
        
<format>{%Complete}%</format>
      
</column>
      
<column width="180" cell_align="LeftLevelPadding">
        
<header>
          
<text>{%IntervalStart} - {%IntervalEnd}</text>
        
</header>
        
<format>{%IntervalStart}{dateTimeFormat:%d-%M-%y} - {%IntervalEnd}{dateTimeFormat:%d-%M-%y}</format>
      
</column>
    
</columns>
  
</datagrid>
</anygantt>

The live sample below shows this, use scroll to view all columns and note that there are no intervals defined for the tasks, so {%IntervalStart} and {%IntervalEnd} tokens are rendered as null:

Data-Grid-Columns-Built-In-Tasks - Click to see Live Chart Preview
Data-Grid-Columns-Built-In-Tasks - Click to see Live Chart Preview

The same for Resource Chart:

<anygantt>
  
<datagrid width="480">
    
<columns>
      
<column width="80" cell_align="Center">
        
<header>
          
<text>{%RowNum}</text>
        
</header>
        
<format>{%RowNum}</format>
      
</column>
      
<column width="60" cell_align="Center">
        
<header>
          
<text>{%ID}</text>
        
</header>
        
<format>{%ID}</format>
      
</column>
      
<column width="120" cell_align="LeftLevelPadding">
        
<header>
          
<text>{%Name}</text>
        
</header>
        
<format>{%Name}</format>
      
</column>
      
<column width="90" cell_align="LeftLevelPadding">
        
<header>
          
<text>{%PeriodStart}</text>
        
</header>
        
<format>{%PeriodStart}{dateTimeFormat:%dd %MMM}</format>
      
</column>
      
<column width="90" cell_align="LeftLevelPadding">
        
<header>
          
<text>{%PeriodEnd}</text>
        
</header>
        
<format>{%PeriodEnd}{dateTimeFormat:%dd/%MM}</format>
      
</column>
    
</columns>
  
</datagrid>
</anygantt>

And the sample for Resource Chart, note that both dates are formatted in a different way:

Data-Grid-Columns-Built-In-Resources - Click to see Live Chart Preview
Data-Grid-Columns-Built-In-Resources - Click to see Live Chart Preview

to top

Using Custom Attributes

You can define custom attributes for a task or resource, or period. Custom attribute can contain any data you have in your database and want to visualize on the chart. Typically one adds custom attributes like that - add some personal information about emploees:

<anygantt>
  
<resource_chart>
    
<resources>
      
<resource id="R1" name="Richard Roe">
        
<attributes>
          
<attribute name="title">CEO</attribute>
        
</attributes>
      
</resource>
      
<resource id="R2" name="Elke Mustermann">
        
<attributes>
          
<attribute name="title">Manager</attribute>
        
</attributes>
      
</resource>
      
<resource id="R3" name="Juan Perez">
        
<attributes>
          
<attribute name="title">Manager</attribute>
        
</attributes>
      
</resource>
      
<resource id="R4" name="Moshe Cohen">
        
<attributes>
          
<attribute name="title">Developer</attribute>
        
</attributes>
      
</resource>
      
<resource id="R5" name="Nanino Nanigashi">
        
<attributes>
          
<attribute name="title">Developer</attribute>
        
</attributes>
      
</resource>
    
</resources>
  
</resource_chart>
</anygantt>

As soon as attributes are defined you can use them in data grid just the same way as built-in attributes - the only difference is the fact that you define name yourself: {%title} in this sample

<datagrid width="210">
  
<columns>
    
<column width="110" cell_align="LeftLevelPadding">
      
<header>
        
<text>Name</text>
      
</header>
      
<format>{%Name}</format>
    
</column>
    
<column width="90" cell_align="LeftLevelPadding">
      
<header>
        
<text>Job Title</text>
      
</header>
      
<format>{%title}</format>
    
</column>
  
</columns>
</datagrid>

Let's add some custom data to the resources and show it in the data grid:

Data-Grid-Columns-Custom-Attributes - Click to see Live Chart Preview
Data-Grid-Columns-Custom-Attributes - Click to see Live Chart Preview

to top

Cell visualization

For any column you can define how its cells look like - use <cell> node for that. You can tune cell <fill>, <border> and <font> and five states: <normal>, <hover>, <selected_normal>, <selected_hover> and <pushed>.

Please note that this column cell settings are overridden if task or resource style define <cell> visualization in <row_datagrid>.

This sample shows columns colored using cell settings:

Data-Grid-Columns-Cell-Colored - Click to see Live Chart Preview
Data-Grid-Columns-Cell-Colored - Click to see Live Chart Preview

Please notice that the color of the "Do" task in data grid differs from other cells - it is modified by the style settings in.

You can always find all possible attributes and subnodes for cell configuration in XML Reference.

to top

Header visualization

Header visualization can, and almost always - should be different from the cell look. You can set all the same visual attributes, nodes and states as in column regular cells, but the <cell> node with settings should be placed into <header> node.

Sample below shows header cells styled in different colors.

Data-Grid-Columns-Header-Colored - Click to see Live Chart Preview
Data-Grid-Columns-Header-Colored - Click to see Live Chart Preview

You can always find all possible attributes and subnodes for cell configuration in XML Reference.

to top

to top