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