DataGrid Column Presets

• Overview
• Column Formatting
  • Presets
  • Custom Formatter

Overview

JavaScript Gantt chart consists of two parts: TimeLine, that contains visualized information, and DataGrid, that displays strings' numbers and names along with additional information. In this article we will describe how information in the dataGrid columns can be formatted using presets and how to create a custom column formatter.

Column Formatting

DataGrid columns can contain different types of information. You can format each column according to your needs and preferences. Use setColumnFormat() to define an information field in your dataset or a preset for data formatting.

var column = dataGrid().column(2);
column.title("dateDmyDots");
column.setColumnFormat("actualStart", "dateDmyDots");

Let's take a closer look at the presets.

Presets

There are several presets for the setColumnFormat()

method. Some of them are useful for formatting dates, some can adjust simple text and some can process numeric values:

Custom Formatter

If your data requires more complex customization you can use your own object with custom settings for data formatting and visual settings. Here is a sample of custom column content formatting:

  // data grid getter
  var dataGrid = chart.dataGrid();

  // create custom column
  var customColumn = dataGrid.column(2);

  // set title for custom column
  customColumn.title("Duration");

  // set custom formatter
  customColumn.setColumnFormat(
    // get id of each string
    "actualStart", 
    {
      // set formatting function
      "formatter": function(value){
        var date = new Date(value);
        // get minuts
        var minutes = date.getUTCMinutes();
        // get hours
        var hours = date.getUTCHours();
        // get month as a word 3 letters long
        var month = date.toLocaleDateString("en-US", {month: "short"});
        // if it is between 12.00 a.m. and 11.59 a.m.
        if (hours < 12) {
          // if 12.00 a.m.
          if (hours === 0 && minutes === 0)
          // display just month and day
            return month + " " + format(date.getUTCDate());
          // format and display hours, minutes, month and day
          return format(hours) + ":" + format(minutes) + " a.m. " + month + " " + format(date.getUTCDate());
          // if it is between 12.00 p.m. and 11.59 p.m
        }else{
          // format and display hours, minutes, month and day
          return format(hours) + ":" + format(minutes) + " p.m. " + month + " " + format(date.getUTCDate());
        }
        function format (number) {
          // if the number is less than 10
          if (number<10)
          // add zero before the digit
            return "0" + number;
          return number;
        }
      },
      // set text visual appearance
      "textStyle": {
        // set clue font color
        "fontColor": "blue"
      },
      // set custom column width
      "width": 150
    }
  );

The object for column customization may contain three parameters: width, textStyle and formatter. The width parameter sets custom column width, textStyle adjusts visual appearance of the text in the column and formatter is a function for adjusting the data in each cell of the column.
Note: If you want to use same formatter for several columns you can create custom function beyond the chart dataGrid scope and use it wherever you want.

var dataGrid = chart.dataGrid();

var column2 = dataGrid.column(2);
// Sets column formats.
column2.setColumnFormat("actualStart", {
  "formatter": columnFormatter
});

var column3 = dataGrid.column(3);
// Sets column formats.
column3.setColumnFormat("actualEnd", {
  "formatter": columnFormatter
});

// custom formatting function
function columnFormatter (value){
  /* code of your function */
}

Here is a sample with custom formatting function applied to two columns:

Note: In some cases it is more appropriate to use format() method than setColumnFormat() method. For example, if you need to use information from two or more fields of your data it is better to use format() instead of setColumnFormat(). Please, see the DataGrid article for more information.