Is it possible to show ports programmatically in JoinJS? This is what I want to do.
Using RappidJs.
Would like to not show ports in Stencil.
Show the ports after dropping cell on paper.
I see API for addPort and removePort but don't see anything around hide / display.
Please try setting the port opacity attribute to show ports only after dropping to paper.
attrs: {
'.port-body': {
opacity: 1 // or 0
}
Related
I'm looking to add half-circle ports in JointJS programmatically when clicking on a port-like "add" button, like so:
mockup
I've created basic ports, and it looks like I could use element.addPort(port, [opt])
but I'm not sure how I'd trigger a click event inside the rectangle element to add the port. The styling of the add button and ports is also something that I'm still trying to recreate with Joint.
Following these steps should help you:
First of all, you have to create an element with custom HTML over it. You can achieve it by extending the joint.shapes.devs.Model. You can find a great tutorial about it here: http://resources.jointjs.com/tutorial/html-elements
Then you have to define a custom port as explained here: https://stackoverflow.com/a/31650340/4109477 (hint: the SVG path of a half-circle is:
d="M100,100 a20,20 0 0,0 40,0")
Finally you just have to call the element.addPort(port, [opt]) function when your button in your custom HTML element is clicked.
Hope it helps.
With Rappid 1.6 trial I used getPortattrs to change the position of the ports.
Instead of attrs[portSelector] = { ref: '.body', 'ref-y': (index + 0.5) * (1 / total) };, I use my own rule.
But with Rappid V2 this is not working any more and I can’t figure out how to do it.
Any hints?
There is completely new approach to ports since JointJS 1.0 (it's part of the Rappid V2). It should be compatible with shapes from the older versions, however it's recommended to use the new port api instead.
ports in jointjs 1.0:
can be added to any shape (introduced new api on shapes)
pre-defined layouting functions for port positions and port labels
better performance
for more information about api visit http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.ports
layouting and port positions: http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.ports
I have recently started working with JointJS. I have not seen any example/tutorial on their website mentioning creating of link again once it is deleted. For example on this link.
http://jointjs.com/demos/org
I wonder if its possible to create the link again between the two Members once it is deleted.
I tried with this code in the function function (x, y, rank, background, textColor):
'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0, magnet: true, pointerevents:'none' }
But its not working.
I am not sure if the member type has ports. If yes you need to add ports to recreate the links once rendered. If you look at the source code, the links are created during render so if you refresh the page or run the code again the links come back.
I'm trying to get a grid to occupy the entire space within a panel and after having searched through this forum i read that a fit layout should help with such a case. However, i'm still having problems getting it to do so.
{
xtype:'panel',
layout:'fit',
items: [{
xtype: 'grid',
store: 'DimensionStore',
id: 'dimension-grid',
padding: '0 5 0 5',
viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' },
columns: [{
header: 'Name', dataIndex: 'DimensionName', flex: 2
}]
}
}]
}
The only way it works is to set an absolute height for the grid,but that defeats the purpose since the panel + grid lies within a window that is expandable and doesnt look nice when it does get expanded.
Based on the image you showed us, it looks like the layout issue is with the top "Dimensions" panel containing your text field and grid. That's actually the component in charge of layout here, not the grid.
There are a couple things you can do, depending on how you intend for this to be used. The easiest solution would be to use a "vbox" layout. The "Dimensions" panel would have two items, one for a panel with a fixed height containing your text field, the other containing your grid with a flex of 1. That way, the grid will fill the remaining area.
Ext.layout.container.VBox documentation
You could also use a border layout with your text field as the "north" region and your grid as the "center" region with "fit" layout, which will accomplish the same thing.
Ext.layout.container.Border documentation
This is all based off your limited code sample and linked image. You may need to provide a more complete code example to facilitate further assistance.
I have a jqGrid that has add/edit dialogs with a form that's longer than the dialog height but the dialog won't scroll. I've tried to add an overflow: auto style to the dialog but no effect:
$("div.ui-jqdialog-content").css("overflow", "auto");
Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:
$("div.ui-jqdialog-content").css("overflow", "scroll");
This at least gives me a small glimmer of hope that I'm on the right track.
There doesn't seem to be any direction from the API documentation to support scrolling:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?
UPDATE
This is a total hack job but I got a scrollbar to appear and function doing the following:
setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);
I attached this to the afterShowForm event. However, this really doesn't solve the problem because it causes other issues with other fields.
I thought I'd share my solution for others to reference.
The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.
I attached a css update to the afterShowForm Form Editing event, using the following code:
afterShowForm: function(form) { form.css("height", "300px"); }
Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.
Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.
Reference link:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:
position: relative; width: 100%; height: auto; overflow: auto;
I just tested one jqGrid with a lot of controls and can scroll there without any problem.
The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.
This question is VERY old, but I'll add an answer anyway.
I don't know if this was possible before, but now you can simply use the dataheight property of the dialog (add or edit), to precisely set the height (in pixels) of the inner form. The default is 'auto', and thus it doesn't overflow. Setting the desired height shows the scroll-bar if necessary.
reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing