Buttons

Overview
Enabling / Disabling
Basic Settings
Advanced Settings
- Background Images
- Custom Drawing

Overview

If there are hierarchical relationships between data items, special buttons are shown in the second data grid column. They allow expanding or collapsing parent tasks or resources on the timeline as well as their labels on the data grid.

Buttons are defined as instances of the anychart.core.gantt.DataGridButton class.

To access buttons, combine dataGrid() with buttons().

This article explains how to configure the basic settings of buttons: content, font, background, etc. The advanced settings include background images and custom drawing.

Also, you can find button-relating settings in the following sections:

Columns: Buttons - enabling / disabling buttons on a column
Columns: Indentation - setting the hierarchical indentation for data grid labels
Basic Settings: Navigation - expanding / collapsing elements by default

Enabling / Disabling

To learn how to enable or disable buttons, see the Columns: Buttons section.

Basic Settings

To configure buttons, use these methods:

content() to set the content
useHtml() to enable HTML
fontColor(), fontWeight(), fontSize(), fontFamily(), etc. to configure the font
background() to set the background
height() and width() to set the height and width
cursor() + enums from anychart.enums.Cursor to adjust the cursor

With the help of the following methods, buttons can be configured in three states:

normal() - collapsed
hovered() - collapsed and hovered over
selected() - expanded

The sample below shows how to adjust buttons. Please note that they have different content and color in different states.

// access data grid buttons
var buttons = chart.dataGrid().buttons();

// configure data grid buttons
buttons.fontWeight(600);
buttons.fontSize(16);
buttons.fontFamily("Courier");
buttons.background().fill(null);
buttons.background().stroke(null);
buttons.width(30);
buttons.cursor("default");

// configure data grid buttons in the normal state
buttons.normal().content("[+]");
buttons.normal().fontColor("#ef6c00");

// configure data grid buttons in the hover state
buttons.hovered().content("[+]");
buttons.hovered().fontColor(anychart.color.lighten("#ef6c00"));

// configure data grid buttons in the selected state
buttons.selected().content("[-]");
buttons.selected().fontColor("#64b5f6");

Playground

Advanced Settings

Background Images

The background() method, combined with fill(), allows you to set a custom image as a background fill of data grid buttons.

In the following sample, different background images are used in different states. The default content and background stroke are disabled.

// access data grid buttons
var buttons = chart.dataGrid().buttons();

// disable the default settings of data grid buttons
buttons.normal().content(null);
buttons.hovered().content(null);
buttons.selected().content(null);
buttons.background().stroke(null);

// set the background fill of data grid buttons in the normal state
buttons.normal().background().fill({
   src: "https://cdn.anychart.com/samples/gantt-general-features/data-grid-buttons/close.png",
   mode: "stretch"
});

// set the background fill of data grid buttons in the selected state
buttons.selected().background().fill({
   src: "https://cdn.anychart.com/samples/gantt-general-features/data-grid-buttons/open.png",
   mode: "stretch"
});

Playground

Custom Drawing

You can replace the default content of data grid buttons with a custom drawing by passing a function to the content() method. To learn more, read Graphics.

In the sample below, a function is used to draw different images in different states. The default background fill and stroke are disabled.

// a function for drawing custom content for buttons
var drawingFunction = function () {
  var half = this.width / 2;
  switch (this.state) {
    case "normal":
      var shape = anychart.graphics.vector.primitives.cross(this.path.clear(), half, half, half);
      shape.fill("#ef6c00");
      break;
    case "hovered":
      var shape = anychart.graphics.vector.primitives.cross(this.path.clear(), half, half, half);
      shape.fill(anychart.color.lighten("#ef6c00"));
      break;
    case "selected":
      var shape = anychart.graphics.vector.primitives.hLine(this.path.clear(), half, half, half);
      shape.fill("#64b5f6");
      break;
  }
}

// access data grid buttons
var buttons = chart.dataGrid().buttons();

// disable the default settings of data grid buttons
buttons.background().fill(null);
buttons.background().stroke(null);

// set the content of data grid buttons in different states
buttons.normal().content(drawingFunction);
buttons.hovered().content(drawingFunction);
buttons.selected().content(drawingFunction);

Playground