Is it possible to create Radio buttons using GoJS, which looks like as follows:
@ryanj, That’s brilliant on your part !
Could you please give a 1 liner explanation of each of the following code lines from the above link:
click: function (e, shape) {
var diagram = e.diagram;
myDiagram.startTransaction("Change radio button");
if (shape.part.data.group) {
var relatedRadios = diagram.findNodesByExample({ group: shape.part.data.group });
relatedRadios.iterator.each(function (radio) {
radio.findObject("SHAPE").fill = "white"
});
}
shape.fill = "black";
myDiagram.commitTransaction("Change radio button");
}
Thanks.
Ah, forgot to remove that code. This template is lifted from a Form-Builder sample we are in the process of making.
That code says if one radio node button in a group of radio node buttons is selected (filled in black), deselect all the others (fill in with white). So, if you have a Group of these radio button nodes, you can see this behavior. I updated the codepen to show this
@ryanj, i have checked this link.
I want to add “Buttons”, “Number Spinner” and “Radio buttons” in a single panel horizontally.
For “Number Spinner”, i have used the code from this link: https://codepen.io/rjohnson465/pen/yzGrNa and was able to add it along side “Buttons” like this:
Now, am trying to extend this code for adding “Radio buttons” along side “Number Spinner” like this:
But, using the “Radio button” code from codepen link, am not able to add “Radio buttons” like this:
Could you please help!
Thanks.
Store your button nodes, number spinner node, and radio button nodes in Horizontal Group.
I made a really rough version of that here (you’ll need to play with the Group templates to get it exactly how you want it to look) https://codepen.io/rjohnson465/pen/GMbpPN
Following are the code lines which am using for my activity:
myButtonDiagram =
$(go.Diagram, "myButtonDiagram",
{
initialContentAlignment: go.Spot.Left,
"undoManager.isEnabled": false,
});
myButtonDiagram.add(
$(go.Part, "Horizontal",
$(go.Panel, "Horizontal",
{alignment: go.Spot.Left},
$("Button",
{ margin: 1, row: 0, column: 5,
click: function() {
alert("Button 1 Clicked");
}
},
$(go.TextBlock, "Button 1")),
$("Button",
{ margin: 1, row: 0, column: 6,
click: function() {
alert("Button 2 Clicked");
}
},
$(go.TextBlock, "Button 2")),
$(go.TextBlock,
{ column: 0, margin: 3, text: "Breadth " }
),
$(go.Panel, "Auto",
{ column: 1,
stretch: go.GraphObject.Vertical
},
$(go.Shape, { fill: "white" }),
$(go.TextBlock,
{
name: "CURRENT_SPINNER_VALUE",
editable: false,
text: 4, width: 50
},
new go.Binding("text", "val").makeTwoWay()
)
),
$(go.Panel, "Vertical",
{ column: 2 },
$("Button",
$(go.Shape, "TriangleUp", { height: 4, width: 6 }),
{
click: function(e, obj) {
var node = obj.part;
e.diagram.startTransaction("Increment spinner");
var spinnerVal = node.findObject("CURRENT_SPINNER_VALUE").text;
node.findObject("CURRENT_SPINNER_VALUE").text = parseInt(spinnerVal) + 1;
e.diagram.commitTransaction("Increment spinner");
}
}
),
$("Button",
$(go.Shape, "TriangleDown", { height: 4, width: 6 }),
{
click: function(e, obj) {
var node = obj.part;
e.diagram.startTransaction("Decrement spinner");
var spinnerVal = node.findObject("CURRENT_SPINNER_VALUE").text;
node.findObject("CURRENT_SPINNER_VALUE").text = parseInt(spinnerVal) - 1;
e.diagram.commitTransaction("Decrement spinner");
}
}
)
),
$(go.TextBlock,
{ column: 0, margin: 3, text: "Views : " }
),
$(go.Shape, "Circle",
{
strokeWidth: 1,
name: "SHAPE",
desiredSize: new go.Size(12, 12),
fill: "white",
click: function (e, shape) {
var diagram = e.diagram;
e.diagram.startTransaction("Change radio button");
if (shape.part.data.group) {
var relatedRadios = diagram.findNodesByExample({ group: shape.part.data.group });
relatedRadios.iterator.each(function (radio) {
radio.findObject("SHAPE").fill = "white"
});
}
shape.fill = "black";
e.diagram.commitTransaction("Change radio button");
}
}),
$(go.TextBlock,
{ column: 0, margin: 3, text: " Radio 1 " }
),
$(go.Shape, "Circle",
{
strokeWidth: 1,
name: "SHAPE",
desiredSize: new go.Size(12, 12),
fill: "white",
click: function (e, shape) {
var diagram = e.diagram;
e.diagram.startTransaction("Change radio button");
if (shape.part.data.group) {
var relatedRadios = diagram.findNodesByExample({ group: shape.part.data.group });
relatedRadios.iterator.each(function (radio) {
radio.findObject("SHAPE").fill = "white"
});
}
shape.fill = "black";
e.diagram.commitTransaction("Change radio button");
}
}),
$(go.TextBlock,
{ column: 0, margin: 3, text: " Radio 2" }
)
)
));
myButtonDiagram.nodeTemplate =
$(go.Node,
{visible : false});
myButtonDiagram.model = new go.GraphLinksModel(
[
{ key: "Breadth", val: 4 },
{ key: "group1", isGroup: true},
{ key: 1, category: "RadioButtonNode", group: "group1"},
{ key: 2, category: "RadioButtonNode", group: "group1"}
]
);In general, we cannot debug your code for you.
We can create proof-of-concept materials to help get you started, and are happy to assist you if you have a specific question.
No problem!
The problem in my code is that, whenever i click on the “Radio Buttons”, i got the following error:
`TypeError: shape.part.data is null`
Issue is with the following code lines in the “click” attribute of radio button:
if (shape.part.data.group) {
...
}
Could you please suggest why “shape.part.data” is Null here?
Thanks.
There is no data in the Part that code refers to. It looks like you lifted the code from my codepens directly, rather than adapting them to your own development environment. This will result in errors like the one you’re seeing.
I’m not sure why you’re adding a single, gigantic Part to your Diagram rather than having several Node templates. I would recommend restructuring your code to something that will scale better and be easier to maintain.
My suggestions:
- Have three different Node Templates in your nodeTemplateMap – one for Button nodes, one for Number Spinner nodes, and one for Radio Button nodes.
- Define your Group Template to be a Horizontal template, so all elements inside the group will be added horizontally (like you want)
- Ensure you Model contains a Group that uses this new template, and then whatever combination of Button, Number Spinner, and Radio Button nodes you want. Make sure their group data property is set to the key of the Group you have in Model data
Are your buttons supposed to be in each Node, or do you just want one set of buttons for the whole Diagram?
If the former, we can work on developing such a sample.
If the latter, why not implement them in HTML? GoJS Legends and Titles -- Northwoods Software
@walter, My requirement is to have a single set of buttons for the whole diagram like this:
I know how to achieve all this using HTML, but unfortunately! i don’t have the privilege of using HTML in my prototype. I need to do all the stuff using JS.
Thanks.
??? You are not showing your diagram in HTML? I cannot think of any environment where you could create an HTML DIV element but you could not create any other HTML elements.
Sorry for the confusion!
My env is such that, a xml file is exposed to me to add a section with an ID. I am using that ID to create my diagram.
That xml file works in conjunction with JS file and produces the results on UI.
So, i am left with a xml and a JS file, which i can modify/create. No HTML for me :(
But you do create an HTML DIV, don’t you? Or you at least are given an HTML DIV? In that DIV you could create all your buttons as well as the DIV that the GoJS Diagram uses. Just make calls to document.createElement and appendChild.