How do I change particular Grid cell background color in GOJS 1.6

how do I change particular Grid cell background color in GOJS 1.6

I assume you have already read GoJS Grid Patterns -- Northwoods Software to read about how to specify regularly recurring row or column colors.

If you are talking about specifying a particular cell’s color, you’ll need to put a GraphObject there. If you provided the code for your app’s use of a “grid”, we can provide a more precise answer.

Thanks for your quick reply; I am not interested in recurring row or column colors here. I have the following requirement; when I click a particular resource it has associated with 3 events; I want to change a background color of cell (not an event by itself) for one of the event which had potential issues.

Best Regards
Venkat

It sounds as if you don’t want to deal with grid cells but with real objects that can have state and appearance and behavior.

Have you read GraphObject Manipulation ?
(If you haven’t read Get Started with GoJS first, please do so.)

I am using grid cell. Her blow is my code

myDiagram.grid =
$go(go.Panel, “Grid”,
// { gridCellSize: new go.Size(setting.daylyX/24, setting.gridH) }
{
position: new go.Point(setting.resourceWidth, 0),
gridCellSize: new go.Size(setting.daylyX, setting.gridH)
}
, $go(go.Shape, “BarH”, { fill: “#F1F1F1”, interval: 2 })
, $go(go.Shape, “LineV”, { name: “dayly”, stroke: “#F5F5F5”, strokeWidth: 1, visible: true })
, $go(go.Shape, “LineV”, { stroke: “gray”, strokeWidth: 1 })
, $go(go.Shape, “LineH”, { stroke: “lightgray”, strokeWidth: 1 }));

How do i change grid cell background color on 17th row and 5 the column (shown in yellow background)

Best Regards
Venkat

Do you have a sample code by any chance; for changing a particular grid cell color using GraphObject?; your help is greatly appreciated here.

Best Regards
Venkat

You’ll need to add a Node or a Part there, with the desired size and appearance.

How did you add that orange “Receipt” Node or simple Part? Or more precisely, what is its template?

Hi Walter,

I have the following code

        setNodeTemplates(myDiagram);
        setGroupTemplates(myDiagram);
        setLinkTemplates(myDiagram);
        myDiagram.model = new go.GraphLinksModel();

Orange receipt is Node.

Best Regards
Venkat

That really doesn’t provide the information that anyone would need to help you.

What is the template used by that orange node?

Hi Walter,

Orange receipt is used by nodetemplate.

dgrm.nodeTemplateMap.add(“hbar”,
$go(go.Node, “Auto”,
{
desiredSize: new go.Size(setting.daylyX * 12, setting.hbarH),
toolTip:
$go(go.Adornment, “Auto”,
$go(go.Shape, { fill: “lightyellow” }),
$go(go.Panel, “Vertical”,
$go(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “label”))))
},
new go.Binding(“location”, “loc”)
, new go.Binding(“width”, “length”),
$go(go.Shape, “BarH”,
{
stretch: go.GraphObject.Fill,
strokeWidth: 1,
fill: “white”
} //, new go.Binding(“fill”, “color”)
)

      ));

Regards
Venkat

Maybe something like this:

var allHighlights = [];  // remember all cell highlighting Parts

function isHighlightCell(i, j) {
  var arr = allHighlights[j];
  if (arr === undefined) return false;
  var part = arr[i];
  if (part === undefined) return false;
  return true;
}

function highlightCell(i, j) {
  if (isHighlightCell(i, j)) return;  // if already highlighted, no-op
  var part = $go(go.Part,
    {
      layerName: "Grid",  // not pickable or selectable, behind everything else
      position: new go.Point(i * setting.daylyX, j * setting.hbarH),
      desiredSize: new go.Size(setting.daylyX, setting.gridH),  // full cell size
      background: "yellow"
    });
  // remember this cell highlighting Part
  var arr = allHighlights[j];
  if (arr === undefined) { arr = []; allHighlights[j] = arr; }
  arr[i] = part;
  dgrm.add(part);
}

function unhighlightCell(i, j) {
  if (!isHighlightCell(i, j)) return;  // if already not highlighted, no-op
  var part = allHighlights[j][i];
  dgrm.remove(part);
  allHighlights[j][i] = undefined;
}

I haven’t actually tried this code. Pardon me for any errors.

Hi Walter,

I will try with your code and let you know the results.

Thanks a lot.

Best Regards
Venkat

Hi Walter,
Can you provide me same code to change particular grid cell using bellow given example

    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",  // Diagram refers to its DIV HTML element by id
          {
            _widthFactor: 1,        // a scale for the nodes' positions and widths
            isReadOnly: true,       // deny the user permission to alter the diagram or zoom in or out
            allowZoom: false,
            "grid.visible": true,  // display a grid in the background of the diagram
            "grid.gridCellSize": new go.Size(30, 150)
          });

      // create the template for the standard nodes
      myDiagram.nodeTemplateMap.add("",
        $(go.Node, "Auto",
          // links come from the right and go to the left side of the top of the node
          { fromSpot: go.Spot.Right, toSpot: new go.Spot(0.001, 0, 11, 0) },
          $(go.Shape, "Rectangle",
            { height: 15 },
            new go.Binding("fill", "color"),
            new go.Binding("width", "width", function (w) { return scaleWidth(w); })),
          $(go.TextBlock,
            { margin: 2, alignment: go.Spot.Left },
            new go.Binding("text", "key")),
          // using a function in the Binding allows the value to
          // change when Diagram.updateAllTargetBindings is called
          new go.Binding("location", "loc",
                         function (l) { return new go.Point(scaleWidth(l.x), l.y); })
        ));

      // create the template for the start node
      myDiagram.nodeTemplateMap.add("start",
        $(go.Node,
          { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
          $(go.Shape, "Diamond",
            { height: 15, width: 15 }),
          // make the location of the start node is not scalable
          new go.Binding("location", "loc")
        ));

      // create the template for the end node
      myDiagram.nodeTemplateMap.add("end",
        $(go.Node,
          { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
          $(go.Shape, "Diamond",
            { height: 15, width: 15 }),
          // make the location of the end node (with location.x < 0) scalable
          new go.Binding("location", "loc",
                         function(l) {
                           if (l.x >= 0) return new go.Point(scaleWidth(l.x), l.y);
                           else return l;
                         })
        ));

      // create the template for the nodes displaying dates
      // no shape, only a TextBlock
      myDiagram.nodeTemplateMap.add("date",
        $(go.Part,
          { selectable: false },
          new go.Binding("location", "loc",
                         function (l) { return new go.Point(scaleWidth(l.x), l.y); }),
          $(go.TextBlock,
            new go.Binding("text", "key"))
        ));

      //create the link template
      myDiagram.linkTemplate =
        $(go.Link,
          {
            routing: go.Link.Orthogonal,
            corner: 3, toShortLength: 2,
            selectable: false
          },
          $(go.Shape,
            { strokeWidth: 2 }),
          $(go.Shape,
            { toArrow: "OpenTriangle" })
        );

      // add the nodes and links to the model
      myDiagram.model = new go.GraphLinksModel(
      [ // node data
        { key: "a", color: "coral", width: 120, loc: new go.Point(scaleWidth(0), 40) },
        { key: "b", color: "turquoise", width: 160, loc: new go.Point(scaleWidth(0), 60) },
        { key: "c", color: "coral", width: 150, loc: new go.Point(scaleWidth(120), 80) },
        { key: "d", color: "turquoise", width: 190, loc: new go.Point(scaleWidth(120), 100) },
        { key: "e", color: "coral", width: 150, loc: new go.Point(scaleWidth(270), 120) },
        { key: "f", color: "turquoise", width: 130, loc: new go.Point(scaleWidth(310), 140) },
        { key: "g", color: "coral", width: 155, loc: new go.Point(scaleWidth(420), 160) },
        { key: "begin", category: "start", loc: new go.Point(-15,20) },
        { key: "end", category: "end", loc: new go.Point(scaleWidth(575), 180) },
        { key: "23Jul", category: "date", loc: new go.Point(scaleWidth(0), 0) },
        { key: "30Jul", category: "date", loc: new go.Point(scaleWidth(150), 0) },
        { key: "6Aug", category: "date", loc: new go.Point(scaleWidth(300), 0) },
        { key: "13Aug", category: "date", loc: new go.Point(scaleWidth(450), 0) }
      ],
      [ // link data
        { from: "begin", to: "a" },
        { from: "begin", to: "b" },
        { from: "a", to: "c" },
        { from: "a", to: "d" },
        { from: "b", to: "e" },
        { from: "c", to: "e" },
        { from: "d", to: "f" },
        { from: "e", to: "g" },
        { from: "f", to: "end" },
        { from: "g", to: "end" }
      ]);
    }

    // scale the number according to the current widthFactor
    function scaleWidth(num) {
      return num * myDiagram._widthFactor;
    }

    // change the grid's cell size and the widthFactor,
    // then update Bindings to scale the widths and positions of nodes
    function rescale() {
      var val = parseFloat(document.getElementById("widthSlider").value);
      myDiagram.startTransaction("rescale");
      myDiagram.grid.gridCellSize = new go.Size(val, 150);
      highlightCell(2, 4);
      myDiagram._widthFactor = val / 30;
      myDiagram.updateAllTargetBindings();
      myDiagram.commitTransaction("rescale");
    }

That just looks like the existing Gantt sample: Gantt chart.

What code have you tried so far? What results did you get and how are they different from what you want?

Hi Walter,

I have some issues implementing your code in my code base; in the mean time can you help me out what went wrong while highlighting particular cell on a grid using below example

Gantt chart function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; // for conciseness in defining templates
  myDiagram =
    $(go.Diagram, "myDiagramDiv",  // Diagram refers to its DIV HTML element by id
      {
        _widthFactor: 1,        // a scale for the nodes' positions and widths
        isReadOnly: true,       // deny the user permission to alter the diagram or zoom in or out
        allowZoom: false
//  "grid.visible": true,  // display a grid in the background of the diagram
 //"grid.gridCellSize": new go.Size(30, 150)
      });


 // myDiagram.initialContentAlignment = go.Spot.TopLeft;




  // create the template for the standard nodes
  myDiagram.nodeTemplateMap.add("",
    $(go.Node, "Auto",
      // links come from the right and go to the left side of the top of the node
      { fromSpot: go.Spot.Right, toSpot: new go.Spot(0.001, 0, 11, 0) },
      $(go.Shape, "Rectangle",
        { height: 15 },
        new go.Binding("fill", "color"),
        new go.Binding("width", "width", function (w) { return scaleWidth(w); })),
      $(go.TextBlock,
        { margin: 2, alignment: go.Spot.Left },
        new go.Binding("text", "key")),
      // using a function in the Binding allows the value to
      // change when Diagram.updateAllTargetBindings is called
      new go.Binding("location", "loc",
                     function (l) { return new go.Point(scaleWidth(l.x), l.y); })
    ));

  // create the template for the start node
  myDiagram.nodeTemplateMap.add("start",
    $(go.Node,
      { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
      $(go.Shape, "Diamond",
        { height: 15, width: 15 }),
      // make the location of the start node is not scalable
      new go.Binding("location", "loc")
    ));

  // create the template for the end node
  myDiagram.nodeTemplateMap.add("end",
    $(go.Node,
      { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
      $(go.Shape, "Diamond",
        { height: 15, width: 15 }),
      // make the location of the end node (with location.x < 0) scalable
      new go.Binding("location", "loc",
                     function(l) {
                       if (l.x >= 0) return new go.Point(scaleWidth(l.x), l.y);
                       else return l;
                     })
    ));

  // create the template for the nodes displaying dates
  // no shape, only a TextBlock
  myDiagram.nodeTemplateMap.add("date",
    $(go.Part,
      { selectable: false },
      new go.Binding("location", "loc",
                     function (l) { return new go.Point(scaleWidth(l.x), l.y); }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    ));

  //create the link template
  myDiagram.linkTemplate =
    $(go.Link,
      {
        routing: go.Link.Orthogonal,
        corner: 3, toShortLength: 2,
        selectable: false
      },
      $(go.Shape,
        { strokeWidth: 2 }),
      $(go.Shape,
        { toArrow: "OpenTriangle" })
    );

 var eqLayer = new go.Layer();
  eqLayer.name = "Grid";


  myDiagram.grid =
   $(go.Panel, "Grid",
     { gridCellSize: new go.Size(10, 10) },
     $(go.Shape, "LineH", { stroke: "lightblue" }),
     $(go.Shape, "LineV", { stroke: "lightgreen" }),
     $(go.Shape, "LineH", { stroke: "blue", interval:10 }),
     $(go.Shape, "LineV", { stroke: "green", interval: 10 })
     );



  myDiagram.initialContentAlignment = go.Spot.Center;

  // add the nodes and links to the model
  myDiagram.model = new go.GraphLinksModel(
  [ // node data
    { key: "a", color: "coral", width: 120, loc: new go.Point(scaleWidth(0), 40) },
    { key: "b", color: "turquoise", width: 160, loc: new go.Point(scaleWidth(0), 60) },
    { key: "c", color: "coral", width: 150, loc: new go.Point(scaleWidth(120), 80) },
    { key: "d", color: "turquoise", width: 190, loc: new go.Point(scaleWidth(120), 100) },
    { key: "e", color: "coral", width: 150, loc: new go.Point(scaleWidth(270), 120) },
    { key: "f", color: "turquoise", width: 130, loc: new go.Point(scaleWidth(310), 140) },
    { key: "g", color: "coral", width: 155, loc: new go.Point(scaleWidth(420), 160) },
    { key: "begin", category: "start", loc: new go.Point(-15,20) },
    { key: "end", category: "end", loc: new go.Point(scaleWidth(575), 180) },
    { key: "23Jul", category: "date", loc: new go.Point(scaleWidth(0), 0)},
    { key: "30Jul", category: "date", loc: new go.Point(scaleWidth(150), 0) },
    { key: "6Aug", category: "date", loc: new go.Point(scaleWidth(300), 0) },
    { key: "13Aug", category: "date", loc: new go.Point(scaleWidth(450), 0) }
  ],
      { position: new go.Point(100, 0), background: "lightgreen" }
  [ // link data
    { from: "begin", to: "a" },
    { from: "begin", to: "b" },
    { from: "a", to: "c" },
    { from: "a", to: "d" },
    { from: "b", to: "e" },
    { from: "c", to: "e" },
    { from: "d", to: "f" },
    { from: "e", to: "g" },
    { from: "f", to: "end" },
    { from: "g", to: "end" }
  ]);

 // myDiagram.model.addChangedListener(modelChangeListener);

  myDiagram.addChangedListener(function (e) {
     
      if (e.isTransactionFinished) {
        
          var tx = e.object;
          if (tx instanceof go.Transaction && window.console) {
              window.console.log(tx.toString());
              tx.changes.each(function (c) {
                  // consider which ChangedEvents to record
                  if (c.model) window.console.log("  " + c.toString());
              });
          }
      }
  });
  
  function mouseEnter(e, obj) {
      var shape = obj.findObject("GRID");
      shape.fill = "#6DAB80";
      shape.stroke = "#A6E6A1";
      var text = obj.findObject("TEXT");
      text.stroke = "white";
  };



  myDiagram.initialContentAlignment = go.Spot.Center; 
  var allHighlights = [];  // remember all cell highlighting Parts

  function isHighlightCell(i, j) {
  
      var arr = allHighlights[j];
      if (arr === undefined) return false;
      var part = arr[i];
      if (part === undefined) return false;
      return true;
  }

  function highlightCell(i, j) {
    
      if (isHighlightCell(i, j)) return;  // if already highlighted, no-op
     
      var part = $go(go.Panel, "Grid",
        {
            position: new go.Point(scaleWidth(j), i), background: "red"
        }
         );
     
      // remember this cell highlighting Part
  
      var arr = allHighlights[j];
      if (arr === undefined) { arr = []; allHighlights[j] = arr; }
      arr[i] = part;
      myDiagram.add(part);
   
  }

  function unhighlightCell(i, j) {
      if (!isHighlightCell(i, j)) return;  // if already not highlighted, no-op
      var part = allHighlights[j][i];
      myDiagram.remove(part);
      allHighlights[j][i] = undefined;
  }

 

  highlightCell(0,500);
  

  
}

// scale the number according to the current widthFactor
function scaleWidth(num) {
  return num * myDiagram._widthFactor;
}

// change the grid's cell size and the widthFactor,
// then update Bindings to scale the widths and positions of nodes
function rescale() {
  var val = parseFloat(document.getElementById("widthSlider").value);
  myDiagram.startTransaction("rescale");
  myDiagram.grid.gridCellSize = new go.Size(val, 150);
 
  myDiagram._widthFactor = val / 30;
  myDiagram.updateAllTargetBindings();
  myDiagram.commitTransaction("rescale");
}
</script>

GoJS Gantt Chart

Spacing:

This sample demonstrates a simple Gantt chart. Gantt charts are used to illustrate project schedules, denoting the start and end dates for terminal and summary elements of the project.

You can zoom in on the diagram by changing the "Spacing" value, which scales the diagram using a data binding function for nodes' widths and locations. This is in place of changing the Diagram.scale.

If you only posted the code that mattered to your question, it would be a lot easier for someone to answer.

Here’s all of the modified Gantt chart sample code:

    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",  // Diagram refers to its DIV HTML element by id
          {
            _widthFactor: 1,        // a scale for the nodes' positions and widths
            isReadOnly: true,       // deny the user permission to alter the diagram or zoom in or out
            allowZoom: false,
            "grid.visible": true,  // display a grid in the background of the diagram
            "grid.gridCellSize": new go.Size(30, 150)
          });

      // create the template for the standard nodes
      myDiagram.nodeTemplateMap.add("",
        $(go.Node, "Auto",
          // links come from the right and go to the left side of the top of the node
          { fromSpot: go.Spot.Right, toSpot: new go.Spot(0.001, 0, 11, 0) },
          $(go.Shape, "Rectangle",
            { height: 15 },
            new go.Binding("fill", "color"),
            new go.Binding("width", "width", function (w) { return scaleWidth(w); })),
          $(go.TextBlock,
            { margin: 2, alignment: go.Spot.Left },
            new go.Binding("text", "key")),
          // using a function in the Binding allows the value to
          // change when Diagram.updateAllTargetBindings is called
          new go.Binding("location", "loc",
                         function (l) { return new go.Point(scaleWidth(l.x), l.y); })
        ));

      // create the template for the start node
      myDiagram.nodeTemplateMap.add("start",
        $(go.Node,
          { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
          $(go.Shape, "Diamond",
            { height: 15, width: 15 }),
          // make the location of the start node is not scalable
          new go.Binding("location", "loc")
        ));

      // create the template for the end node
      myDiagram.nodeTemplateMap.add("end",
        $(go.Node,
          { fromSpot: go.Spot.Right, toSpot: go.Spot.Top, selectable: false },
          $(go.Shape, "Diamond",
            { height: 15, width: 15 }),
          // make the location of the end node (with location.x < 0) scalable
          new go.Binding("location", "loc",
                         function(l) {
                           if (l.x >= 0) return new go.Point(scaleWidth(l.x), l.y);
                           else return l;
                         })
        ));

      // create the template for the nodes displaying dates
      // no shape, only a TextBlock
      myDiagram.nodeTemplateMap.add("date",
        $(go.Part,
          { selectable: false },
          new go.Binding("location", "loc",
                         function (l) { return new go.Point(scaleWidth(l.x), l.y); }),
          $(go.TextBlock,
            new go.Binding("text", "key"))
        ));

      myDiagram.nodeTemplateMap.add("cell",
        $(go.Part,
          { layerName: "Grid", background: "red" },
          new go.Binding("location", "", function(d) { return new go.Point(scaleWidth(d.x * 30), d.y * 150); }),
          new go.Binding("desiredSize", "", function() { return myDiagram.grid.gridCellSize; }),
          new go.Binding("background", "color")
        ));

      //create the link template
      myDiagram.linkTemplate =
        $(go.Link,
          {
            routing: go.Link.Orthogonal,
            corner: 3, toShortLength: 2,
            selectable: false
          },
          $(go.Shape,
            { strokeWidth: 2 }),
          $(go.Shape,
            { toArrow: "OpenTriangle" })
        );

      // add the nodes and links to the model
      myDiagram.model = new go.GraphLinksModel(
      [ // node data
        { key: "a", color: "coral", width: 120, loc: new go.Point(scaleWidth(0), 40) },
        { key: "b", color: "turquoise", width: 160, loc: new go.Point(scaleWidth(0), 60) },
        { key: "c", color: "coral", width: 150, loc: new go.Point(scaleWidth(120), 80) },
        { key: "d", color: "turquoise", width: 190, loc: new go.Point(scaleWidth(120), 100) },
        { key: "e", color: "coral", width: 150, loc: new go.Point(scaleWidth(270), 120) },
        { key: "f", color: "turquoise", width: 130, loc: new go.Point(scaleWidth(310), 140) },
        { key: "g", color: "coral", width: 155, loc: new go.Point(scaleWidth(420), 160) },
        { key: "begin", category: "start", loc: new go.Point(-15,20) },
        { key: "end", category: "end", loc: new go.Point(scaleWidth(575), 180) },
        { key: "23Jul", category: "date", loc: new go.Point(scaleWidth(0), 0) },
        { key: "30Jul", category: "date", loc: new go.Point(scaleWidth(150), 0) },
        { key: "6Aug", category: "date", loc: new go.Point(scaleWidth(300), 0) },
        { key: "13Aug", category: "date", loc: new go.Point(scaleWidth(450), 0) }
      ],
      [ // link data
        { from: "begin", to: "a" },
        { from: "begin", to: "b" },
        { from: "a", to: "c" },
        { from: "a", to: "d" },
        { from: "b", to: "e" },
        { from: "c", to: "e" },
        { from: "d", to: "f" },
        { from: "e", to: "g" },
        { from: "f", to: "end" },
        { from: "g", to: "end" }
      ]);

      highlightCell(0, 0, "yellow");
      highlightCell(1, 1, "green");
      highlightCell(3, 1, "lightblue");
    }

    var allHighlights = [];  // remember all cell highlighting Parts

    function isHighlightCell(i, j) {
      var arr = allHighlights[j];
      if (arr === undefined) return false;
      var data = arr[i];
      if (data === undefined) return false;
      return true;
    }

    function highlightCell(i, j, color) {
      if (isHighlightCell(i, j)) return;  // if already highlighted, no-op
      var data = { category: "cell", x: i, y: j, color: color };
      // remember this cell highlighting Part
      var arr = allHighlights[j];
      if (arr === undefined) { arr = []; allHighlights[j] = arr; }
      arr[i] = data;
      myDiagram.model.addNodeData(data);
    }

    function unhighlightCell(i, j) {
      if (!isHighlightCell(i, j)) return;  // if already not highlighted, no-op
      var data = allHighlights[j][i];
      myDiagram.model.removeNodeData(data);
      allHighlights[j][i] = undefined;
    }

    // scale the number according to the current widthFactor
    function scaleWidth(num) {
      return num * myDiagram._widthFactor;
    }

    // change the grid's cell size and the widthFactor,
    // then update Bindings to scale the widths and positions of nodes
    function rescale() {
      var val = parseFloat(document.getElementById("widthSlider").value);
      myDiagram.startTransaction("rescale");
      myDiagram.grid.gridCellSize = new go.Size(val, 150);
      myDiagram._widthFactor = val / 30;
      myDiagram.updateAllTargetBindings();
      myDiagram.commitTransaction("rescale");
    }

Hi Walter,

Thanks a lot.