Data Grid

Overview

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).

Editing

Data Grid cells can be made editable, see Live Edit UI and API: Data Grid.

Columns

Columns Set

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

Playground

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

var thirdColumn = dataGrid.column(2);
thirdColumn.title("Actual Start");
thirdColumn.width(100);
thirdColumn.labels().format("{%actualStart}{dateTimeFormat:MM/dd/yyyy}");

For more information about the format() method see the Text topic.

The sample below shows Resource Gantt Chart:

Playground

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

Playground

You can create and display custom fields in data items:

'id': '1',
'name': 'Task 1',
'owner': 'Anthony Quayle',
'actualStart': '2008-07-09',
'actualEnd': '2008-07-20'

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");

Text

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

// format with formatting string
chart.dataGrid().column(1).format("{%name}");

// format with function
chart.dataGrid().column(0).format(function(item) {
    return item.get('id') + '';
});

Here is a sample with the complex format().

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.

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:

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.

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.

Playground