Data Grid

Data Grid - is one of the main parts of JavaScript Gantt Chart. It usually contains main data about tasks and resources of the project, it displays nesting (for a hierarchical model configuration).

Columns

Columns Set

By default, JS Gantt Chart displays two columns: rows counts and names of Gantt elements (tasks or resources).

JsFiddle Playground

The set of columns is set and defined using the .column() method:

//create new column contains names
dataGrid.column(4).width(100).textFormatter(function(item) {
    return item.get('name');
  }).title('Resources');

Just see simple code below. You can create new columns using this method and their ids can assume different values that do not have to be consecutive.

//this code in fact creates only two columns
var firstColumn = dataGrid.column(10);

var secondColumn = dataGrid.column(20);

For more information about the textFormatter() method see the Content topic.

The sample below shows Resource Gantt Chart, note that the third column is created to display the start data value.

JsFiddle Playground

The same for Project Gantt Chart. The next sample shows the data grid with the actual start and actual end values.

JsFiddle Playground

You can create and display custom fields in data items:

    'id': '1',
    'name': 'Task 1',
    'owner': 'Anthony Quayle',
    'actualStart': Date.UTC(2008, 7, 9),
    'actualEnd': Date.UTC(2008, 7, 20)

JsFiddle Playground

Title

Each column has its own title, so it is possible to tune the visual appearance of data grid headers, e.g. set the custom title value:

//set title values
title.text("new column");
title.fontWeight("bold").fontStyle("italic");
title.hAlign("left");

Content

Column content can be tuned as well as its title. The easiest way to manage column content is using presets. The advanced one is textFormatter() method. It used to define a cell text value formatter, so you can pass your own custom function as an argument.

//create a column contains all IDs
column.textFormatter(function(item) {
    return item.get('id') + '';
});

Or it can be more complicated:

//create the third column
dataGrid.column(2).textFormatter(customColumnTextFormatter);

//define a custom content with actual start values
function customColumnTextFormatter(item){
    var start = item.get("actualStart");
    var end = item.get("actualEnd");
    var duration = end - start;
    var hours = duration/1000/60/60;
    if (hours>24){
        return hours + " hours <a style='color: #7c868e;'>(" + (hours/24).toFixed(0) + " days)<a>";
    }else{
        return hours + " hours";
    }
}

Here is a sample with the complex textFormatter().

JsFiddle Playground

Width

You should use the width() method for customizing the column width.

//set column width to 30
dataGrid.column(0).width(30);

Visual Settings

These methods can be used to change the background color:

Method Description
backgroundFill() Allows to set background fill.
rowFill() Used to collapse all tasks.

var dataGrid = chart.dataGrid();
dataGrid.backgroundFill('blue .4');
dataGrid.rowFill('green .2');

Interlaced mode

By default, the odd and the even fields are differentiated by their fill. To change them you have to use the corresponding methods.

Method Description
rowOddFill() Used to set row odd fill.
rowEvenFill() Used to set row even fill.

var dataGrid = chart.dataGrid();

dataGrid.rowOddFill('#8a2be2 .2');
dataGrid.rowEvenFill('#8a2be2 .4');

Use these methods to change the rows fill color of the main chart plot:

Method Description
rowOddFill() Used to set row odd fill.
rowEvenFill() Used to set row even fill.

//get chart timeline link to change color
var timeline = chart.getTimeline();

timeline.rowEvenFill('green .4');
timeline.rowOddFill("#add8e6");

In the sample below the odd rows are colored with a solid fill as well as the even rows.

JsFiddle Playground

General Settings

Turning On/Off

By default Data Grid is turned on. If you need to show only timeline and timeline plot - you can turn Data Grid off using the .dataGrid() with false as the argument:

//disable data grid
chart.dataGrid(false);

And here is a simple illustration of this idea:

JsFiddle Playground

Data Grid Width

It is possible to configure your html5 Gantt Charts by simply dragging and dropping data grid splitter. Also you can define the width of Data Grid with .splitterPosition() method:

//set width to 100
chart.splitterPosition(100);

Expand/Collapse

Data Grid supports hierarchical data representation, so if the data is complicated, the Data Grid will display expanded/collapsed icons next to each group header row. You are free to expand and collapse child groups to see more data.

JsFiddle Playground

Please note that it is also possible to configure the expand/collapse button settings using the .collapseExpandButtons() method.

column.collapseExpandButtons(false);

You can set the left padding in a cell depending on a tree data item's depth with .depthPaddingMultiplier() method to to customize the data view.

column.depthPaddingMultiplier(8);

In the example below we have disabled the default appearance of the expand/collapse buttons in the second column and put them into the first.

JsFiddle Playground

You are looking at an outdated 7.10.0 version of this document. Switch to the 8.0.1 version to see the up to date information.