Data Grid General Settings

Overview

Data Grid - is one of the main parts of Gantt Chart. It usually contains main data about tasks and resources of the project. This tutorial covers main topics of Data Grid visualization options.

Data Grid consists of the many configurable elements, illustration below names them:

to top

Turning On/Off

By default Data Grid is turned on. If you need to show only timeline and timeline plot - you cant turn data grid off. To do so set enabled attribute to "False" in <datagrid> node.

XML Sample to turn data grid off:

<anygantt>
  
<datagrid enabled="False" />
</anygantt>

to top

Setting width

You can define the width of Data Grid using width attribute in <datagrid> node. The width is set in pixels and the default width is 325 pixels.

To change the width you should set the following:

<anygantt>
  
<datagrid width="450" />
</anygantt>

to top

Headers

You can tune the visual appearance of data grid header, its normal, hovered and selected state. Also you can tune vertical separators between columns and separator between header and data grid body.

Fill

By default header fill is interactive and it changes when user hovers or clicks the column header.

You can override defaults and do all settings yourself:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<cell>
          
<fill enabled="true" type="Solid" color="#A5D9A5" />
        
</cell>
      
</header>
    
</style>
  
</datagrid>
</anygantt>

Fill can be solid and gradient, sample below shows headers with solid color fill:

Data-Grid-Header-Cell-Fill-Settings - Click to see Live Chart Preview
Data-Grid-Header-Cell-Fill-Settings - Click to see Live Chart Preview

to top

Font

To configure common font settings is done the same way as common fill. Font can change the style in different states, just as fill, too.

XML to tune header font:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<cell>
          
<font face="Times New Roman" size="12" bold="true" underline="true" color="#992020" />
        
</cell>
      
</header>
    
</style>
  
</datagrid>
</anygantt>

Sample of tuned header font:

Data-Grid-Header-Font-Settings - Click to see Live Chart Preview
Data-Grid-Header-Font-Settings - Click to see Live Chart Preview

to top

Interactivity and States

In previous section it has been told that headers can interact with user and change its appearance. There are five possible states and you can set fill and font for each of them.

XML to tune appearance of header in different states:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<cell>
          
<states>
            
<normal>
              
<fill enabled="true" type="Solid" color="Gray" />
              
<font face="Verdana" size="10" bold="false" />
            
</normal>
            
<hover>
              
<fill enabled="true" type="Solid" color="Yellow" />
              
<font face="Verdana" size="10" bold="true" underline="true" />
            
</hover>
            
<pushed>
              
<fill enabled="true" type="Solid" color="Magenta" />
              
<font face="Verdana" size="9" bold="true" underline="true" />
            
</pushed>
            
<selected_normal>
              
<fill enabled="true" type="Solid" color="DeepSkyBlue" />
              
<font face="Verdana" size="10" bold="false" />
            
</selected_normal>
            
<selected_hover>
              
<fill enabled="true" type="Solid" color="Cyan" />
              
<font face="Verdana" size="10" bold="true" underline="true" />
            
</selected_hover>
          
</states>
        
</cell>
      
</header>
    
</style>
  
</datagrid>
</anygantt>

As you can see all states are listed in <states> node and each state contains settings for font and fill.

Table below lists and illustrates the states:

State XML Node Preview
Normal <normal>
Hover <hover>
Pushed <pushed>
Selected Normal <selected_normal>
Selected Hover <selected_hover>

Live sample below shows header with different fill and font in every possible state:

Data-Grid-Header-States - Click to see Live Chart Preview
Data-Grid-Header-States - Click to see Live Chart Preview

to top

Column Separators

To change lines that separate columns in data grid header use <vertical_separator> node. You can configure how line looks like and space between header borders and separator start and end. Spaces are set using padding attribute (in pixels).

This XML shows how column separators are configured:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<vertical_separator enabled="true" padding="0" color="Red" thickness="2" caps="None" />
      
</header>
    
</style>
  
</datagrid>
</anygantt>

Live sample that shows separators colored in Red:

Data-Grid-Header-Vertical-Separators - Click to see Live Chart Preview
Data-Grid-Header-Vertical-Separators - Click to see Live Chart Preview

to top

Header Separator

Header Separator is a line between header and data grid body, <bottom_line> node is used to configure it. Below you can see that bottom_line is a simple line and how it can be tuned:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<bottom_line enabled="true" type="Solid" color="Magenta" thickness="1" opacity="1" />
      
</header>
    
</style>
  
</datagrid>
</anygantt>

Live sample for Header Separator settings:

Data-Grid-Header-Bottom-Line - Click to see Live Chart Preview
Data-Grid-Header-Bottom-Line - Click to see Live Chart Preview

to top

Cells

You can configure font and fill of data grid cells. There are two modes: common (all cells have the common settings) and interlaced (odd and even rows are colored differently). Interlaced mode is enabled by default.

The settings of data grid cell can be overridden by Task Styles and Resource Styles. See styles section for more information about this.

Common Settings

Common settings style all cells (all rows and columns) in data grid in a uniform way. To enable this you need to disable interlaced mode in <style> node (set interlaced="False"), afterwards settings in <cell> node will be applied to all cells.

XML for common settings look as follows:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<bottom_line enabled="true" type="Solid" color="Magenta" thickness="1" opacity="1" />
      
</header>
    
</style>
  
</datagrid>
</anygantt>

Live sample that colors all table into White with font colored Blue:

Data-Grid-Cell-Styling-Single-Mode - Click to see Live Chart Preview
Data-Grid-Cell-Styling-Single-Mode - Click to see Live Chart Preview

to top

Interlaced mode

Be default rows are colored in interlaced mode and settings are different for even and odd rows: <even> and <odd> accordingly.

Here is sample how you can use gradient fill with interlaced mode:

<anygantt>
  
<datagrid>
    
<style interlaced="true">
      
<even>
        
<fill enabled="true" type="Gradient">
          
<gradient angle="90">
            
<key color="White" />
            
<key color="#D7DCF2" />
          
</gradient>
        
</fill>
        
<font face="Arial" size="12" bold="false" color="#393939" />
      
</even>
      
<odd>
        
<fill enabled="true" type="Gradient">
          
<gradient angle="90">
            
<key color="White" />
            
<key color="#CAF2D2" />
          
</gradient>
        
</fill>
        
<font face="Arial" size="12" bold="false" color="#393939" />
      
</odd>
    
</style>
  
</datagrid>
</anygantt>

As you can see we've modified fill and left the same font, font can be tuned too, but it rarely looks appealing and useful.

Live sample shows these setting at work:

Data-Grid-Cell-Styling-Interlaced-Mode - Click to see Live Chart Preview
Data-Grid-Cell-Styling-Interlaced-Mode - Click to see Live Chart Preview

to top

Interactivity and States

There are two states for rows in data grid: normal andhover. States are defined in <states> node which is placed in <cell> or <even_cell> and <odd_cell> depending on the mode described above.

Here is a sample for common settings mode. normal state uses solid white fill and hover uses gradient fill with font settings modified:

Data-Grid-Cell-Styling-Interactivity-Single-Mode - Click to see Live Chart Preview
Data-Grid-Cell-Styling-Interactivity-Single-Mode - Click to see Live Chart Preview

Live sample of the states defined in interlaced mode. Rows use black and gray fills for normal state, and bright yellow with modified font for hover state.

Data-Grid-Cell-Styling-Interactivity-Interlaced-Mode - Click to see Live Chart Preview
Data-Grid-Cell-Styling-Interactivity-Interlaced-Mode - Click to see Live Chart Preview

to top

Cells Separators

To change the cell borders you have to configure so called column and row separators, please take a look at this illustration:

You can tune how line is displayed or turn it off at all. XML for this is the following:

<anygantt>
  
<datagrid>
    
<style>
      
<row_separator enabled="false" />
      
<column_separator enabled="false" />
    
</style>
  
</datagrid>
</anygantt>

As you can see<row_separator> and <column_separator> nodes are used and they have identical functions.

To turn off separators just set enabled to False, as shown below:

<anygantt>
  
<datagrid>
    
<style>
      
<row_separator enabled="true" color="DarkRed" thickness="1" />
      
<column_separator enabled="true" color="Green" thickness="1" />
    
</style>
  
</datagrid>
</anygantt>

This sample demostrates separator configuration:

Data-Grid-Rows-Columns-Separators - Click to see Live Chart Preview
Data-Grid-Rows-Columns-Separators - Click to see Live Chart Preview

The samples shown doen't demostrate all possible settings please see XML Reference for more.

to top

Data Grid - Time Line Plot Separator Settings

AnyGantt has a special separator between data grid and time line - it allows user to change the size of data grid in a real time:

By default this separator is interactive and has gradient fill with dark borders, you can change the width, the fill the border and tune the interactivity. Sample XML follows:

<anygantt>
  
<datagrid>
    
<timeline_separator width="4" allow_drag="true">
      
<states>
        
<normal>
          
<border enabled="true" color="#787878" opacity="0.5" />
          
<fill type="Gradient">
            
<gradient angle="0">
              
<key color="Orange" />
              
<key color="Yellow" />
            
</gradient>
          
</fill>
        
</normal>
        
<pushed>
          
<border enabled="true" color="Red" opacity="1" />
          
<fill enabled="true" type="Gradient">
            
<gradient angle="0">
              
<key color="Cyan" />
              
<key color="RoyalBlue" />
            
</gradient>
          
</fill>
        
</pushed>
      
</states>
    
</timeline_separator>
  
</datagrid>
</anygantt>

As you can see in XML it is called <timeline_separator>. Interactivity can be changed disabled setting allow_drag to false, and you can tune appearance in normal and pushed states.

Here is a live sample where separator is made "gold":

Data-Grid-Timeline-Separator - Click to see Live Chart Preview
Data-Grid-Timeline-Separator - Click to see Live Chart Preview

The sample shown doen't demostrate all possible settings please see XML Reference for more.

to top

Expand/Collapse Button Settings

Expand/Collapsr Buttons are the special elements of the data grid, they apeear autmatically when the summary task apppears in the plot. Be default it is red, but you can change in normal and hover states.

XML below shows how to make these button "Blue":

<anygantt>
  
<datagrid>
    
<collapser>
      
<states>
        
<normal>
          
<fill enabled="true" color="#61AEDC" />
          
<border enabled="true" color="#136599" />
        
</normal>
        
<hover>
          
<fill enabled="true" color="#ABE0FF" />
          
<border enabled="true" color="#007FD8" />
        
</hover>
      
</states>
    
</collapser>
  
</datagrid>
</anygantt>

You can see that you can change <fill> and<border> for normal andhover states.

Live sample shows these setting in work:

Data-Grid-Collapser-Settings - Click to see Live Chart Preview
Data-Grid-Collapser-Settings - Click to see Live Chart Preview

The sample shown doen't demostrate all possible settings please see XML Reference for more.

to top

Data Grid Fill and Border

Dats grid has its own border and fill, most of the tim fill is covered by the cells, but sometimes you may need to tune it aling with the borders.

XML syntax for this is the following:

<anygantt>
  
<datagrid>
    
<style>
      
<header>
        
<cell>
          
<font face="Times New Roman" size="12" bold="true" underline="true" color="#992020" />
        
</cell>
      
</header>
    
</style>
  
</datagrid>
</anygantt>

And this is the live sample of Data Grid Fill and Border configuration:

Data-Grid-Background - Click to see Live Chart Preview
Data-Grid-Background - Click to see Live Chart Preview

to top

Tooltips

No matter what project type you use you can set the special settings for showing tooltip in the data grid, it is not the same tooltip you have for tasks and periods. Data grid tooltip is intended to show detailed data about resources or tasks.

To tune tooltip you should do the following (for example) settings for Project Chart:

<anygantt>
  
<styles>
    
<defaults>
      
<task>
        
<task_style>
          
<row_datagrid>
            
<tooltip>
              
<text>{%Name} lasts from {%ActualStart} till {%ActualEnd} ({%Complete}% complete)</text>
            
</tooltip>
          
</row_datagrid>
        
</task_style>
      
</task>
    
</defaults>
  
</styles>
</anygantt>

In other words - tooltip for data grid is configured within task style in Task orinented project - just because the task entity is shown in data grid. You can change these tooltips settings just as any other task style related option.

Live sample with these settings:

Data-Grid-Tooltip-Task - Click to see Live Chart Preview
Data-Grid-Tooltip-Task - Click to see Live Chart Preview

See Tooltip in Project Chart tutorial for more.

Or the following (another style usage example us shown) for Resources Chart:

<anygantt>
  
<styles>
    
<defaults>
      
<resource>
        
<resource_style>
          
<row_datagrid>
            
<tooltip>
              
<text>Server: {%Name}</text>
            
</tooltip>
          
</row_datagrid>
        
</resource_style>
      
</resource>
    
</defaults>
  
</styles>
  
<resource_chart>
    
<resources>
      
<resource id="res_1" name="Server 1" />
      
<resource id="res_2" name="Server 2" />
      
<resource id="res_3" name="Sun Rack" />
      
<resource id="res_4" name="Intel Quad" />
    
</resources>
    
<periods>
      
<period resource_id="res_1" start="2008.01.13" end="2008.04.25" />
      
<period resource_id="res_1" start="2008.06.01" end="2008.06.29" />
      
<period resource_id="res_2" start="2008.03.18" end="2008.08.14" />
      
<period resource_id="res_2" start="2008.09.10" end="2008.09.18" />
      
<period resource_id="res_3" start="2008.01.22" end="2008.04.29" />
      
<period resource_id="res_3" start="2008.06.03" end="2008.06.11" />
      
<period resource_id="res_3" start="2008.11.02" end="2008.12.07" />
      
<period resource_id="res_4" start="2008.02.27" end="2008.11.01" />
    
</periods>
  
</resource_chart>
</anygantt>

In other words - tooltip for data grid is configured within resource style in Resource oriented project - just because the resource entity is shown in data grid. You can change these tooltips settings just as any other task style related option.

Live sample with these settings:

Data-Grid-Tooltip-Resource - Click to see Live Chart Preview
Data-Grid-Tooltip-Resource - Click to see Live Chart Preview

See Tooltip in Resource Chart tutorial for more.

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

to top

Summary Features Example

Now we will put almost all settings described in this tutorial all together and show you how datagrid in AnyGantt can tottally change its default look and functionality.

We will create a clean black and white Task oriented sample with red hovers over the tasks, and make tooltips match this style as well, column set is altered, datagrid size is fixed and resizing is disabled.

XML for these configuration is rather large, but you can view it in the live sample below:

Data-Grid-Summary-Sample - Click to see Live Chart Preview
Data-Grid-Summary-Sample - Click to see Live Chart Preview

Whenever you need to know anything about attributes and nodes mentioned above - please see XML Reference.

 

to top