vis.js hyperlink an edge - javascript

Is it possible to get a hyperlink to work on an edge?
Example, I have two nodes that are connected, And have a label on them
{ id: 1601, label: 'label', x: -1085, y: -429, url: 'link' },
So for the above, The url works for the node when using
this option
network.on("selectNode", function (params) {
if (params.nodes.length === 1) {
var node = nodes.get(params.nodes[0]);
window.open(node.url, '_blank');
}
});
Now I have a link between two nodes using the standard config
{ from: 1600, to: 1613, label: "label value" },
Is it possible to get a huperlink to work on the lines / edge that connections the two nodes?

Basically, changing "node" to "edge" in your code works to open the url when an edge is selected. But, selecting a node also results in selecting all the adjacent edges. You only get one selectEdge callback, but probably want to ignore it in any case. If you want to rule out the case where someone selected the node, where there happens to be just one connected edge, then add a check for that as follows:
network.on("selectEdge", function(params) {
if ((params.edges.length == 1) && (params.nodes.length == 0)) {
var edgeId = params.edges[0];
window.open(edges.get(edgeId).url, '_blank');
}
});
There's still a problem in using "select" for this. If you have previously selected a node, then the adjacent edges are selected, even if you don't see it because of the checking above. If you then click on one of those adjacent edges, you don't get the callback because that edge was already selected. It might be better to use the network.on("click" ... ) method instead:
network.on("click", function(params) {
if (params.nodes.length == 1) {
var nodeId = params.nodes[0];
if (nodes.get(nodeId).url != null) {
window.open(nodes.get(nodeId).url, '_blank');
}
} else if (params.edges.length==1) {
var edgeId = params.edges[0];
if (edges.get(edgeId).url != null) {
window.open(edges.get(edgeId).url, '_blank');
}
}
});

Related

Highcharts : On drillup, how can I unselect my selected point?

I'm using a chart with drilldown and I've allowed to select a point (=click). On the event click, I create an HTML table with help of AJAX to list the entities related to the count (if I see 5 items, by clicking on it I'll see who are the 5 items and list them). This becomes a 2nd/3rd level of drilldown (depending I've clicked on the 1st level of 2nd level in the chart)
However, I'd like to remove the selection on first level on the drill up event.
Here is my code (EDITED) :
Edit
I'm adding series like this (sample found here) :
$(function() {
var myChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'drillDownContainer',
// Deactivate drilldown by selection.
// See reason below in the drilldown method.
selection: function(event) {
return false;
},
drilldown: function(e) {
// Deactivate click on serie. To drilldown, the user should click on the category
if (e.category === undefined)
{
return;
}
// Set subTitle (2nd param) by point name without modify Title
// Giving 1st param as null tells the text will be for the subTitle,.
// For Title, remove the null 1st param and let text.
this.setTitle(null, { text: e.point.name });
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Social': [
{"name":"Serie 1","data": [{"id":113,"name":"my data","y":14}
]}
]
};
var categorySeries = drilldowns[e.point.name];
var series;
for (var i = 0; i < categorySeries.length; i++) {
if (categorySeries[i].name === e.point.series.name) {
series = categorySeries[i];
break;
}
}
chart.addSingleSeriesAsDrilldown(e.point, series);
drilldownsAdded++;
// Buffers the number of drilldown added and once the number of series has been reached, the drill down is applied
// So, can't navigate by clicking to a single item.
// However, simply click on the category (xAxis) and then unselect the other series by clicking on legend
// The click has been disabled.
if (drilldownsAdded === 3) {
drilldownsAdded = 0;
chart.applyDrilldown();
}
}
},
drillup: function(e) {
this.setTitle(null, { text: '' }); // Erase subTitle when back to original view
$('#ajaxContainer').html(''); // Remove the table drilldown level3
},
drillupall: function(e) {
debugger;
console.log(this.series);
console.log(this.series.length);
for(i = 0; i < this.series.length; i++)
{
console.log("i = " + i);
console.log(this.series[i].data.length);
for (d = 0; i < this.series[i].data.length; d++)
{
console.log("d = " + d);
console.log(this.series[i].data[d].selected);
}
}
}
}
}); -- End of myChartdeclaration
myChart.addSeries({
color: colorsArray['impact101'],
name: '1-Modéré',
data: [
{
id: '101',
name: 'Type 1',
y: 64,
drilldown: true
},
{
id: '102',
name: 'Type 2',
y: 41,
drilldown: true
}]
}, true);
});
Demo of the point selection : http://jsfiddle.net/8truG/12/
What do I'd like to do? (EDIT)
If I select a point on the 2nd level, then return to 1st level and then back to same drilldown data, the point selected before is not selected anymore.
However, for the 1st level, the selection remains.
On the drillup event, the this.series[x].data[y] corresponds to the data of the 2nd level. Kind of obvious as the drilldown is not finished for all series but event raised as many as there is series.
On the drillupall event, I'm getting the right serie. I can see my 3 series on debug but they are all without any data. So I can't apply this.series[i].data[d].selected as suggested in comment below.
I'm using Highcharts 5.0.9.
Any idea to help me ?
Thanks for your help.
I got helped on the Highcharts forum. See here.
Here is the answer (in case the link above doesn't work in the future):
In this case you can change the state of a specific point with
Point.select() function. Take a look at the example posted below. It
works like that: in drillup() event there is a call of
getSelectedPoints() which returns all selected points from the base
series. Next, there is a call of select() function with false as an
argument on a selected point to unselect it. In addition, the call of
the getSelectedPoints() is located in a timeout, otherwise it would
return an empty array (see
https://github.com/highcharts/highcharts/issues/5583).
CODE:
setTimeout(function() { selectedPoints =
chart.getSelectedPoints()[0];
chart.getSelectedPoints()[0].select(false); }, 0);
API Reference: http://api.highcharts.com/highcharts/Ch ... ctedPoints
http://api.highcharts.com/highcharts/Point.select
Examples: http://jsfiddle.net/d_paul/smshk0b2/
Consequently, here now the code fixing the issue :
drillupall: function(e) {
this.setTitle(null, { text: '' }); // Erase subTitle when back to original view
$('#ajaxContainer').html(''); // Remove the table drilldown level3
var chart = this,
selectedPoints;
setTimeout(function() {
selectedPoints = chart.getSelectedPoints()[0];
// Ensure there is any selectedPoints to unselect
if (selectedPoints != null)
{
selectedPoints.select(false);
}
}, 0);
Regards.

Drag & Drop between two Fancetrees

Is there a way to combine 2 Fancytrees in a way that Fancytree A is a fixed set of configuration items, Fancytree B is a configuration file and items from Fancytree A can be drag & dropped to Fancytree B without disappearing in Tree A. Within Fancytree B drag & drop should also be possible.
I've searched for a while now but haven't found exactly what i was looking for, so maybe somebody knows a way how to do that!
It is definitely possible using the standard functionality to drag/drop nodes from a different tree or even standard jQuery Draggables.
Basically you use the same API
$("#tree").fancytree({
extensions: ["dnd"],
...
dnd: {
...
dragStart: function(node, data) {
if( data.originalEvent.shiftKey ){
console.log("dragStart with SHIFT");
}
// allow dragging `node`:
return true;
},
dragEnter: function(node, data) {
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
/* if(node.parent !== data.otherNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
*/
return true;
},
dragDrop: function(node, data) {
if( !data.otherNode ){
// It's a non-tree draggable
var title = $(data.draggable.element).text() + " (" + (count)++ + ")";
node.addNode({title: title}, data.hitMode);
return;
}
data.otherNode.moveTo(node, data.hitMode);
}
}
});
The example browser contains a demo under Examples - Test - Drag'n'Drop

How to disable nth level node if any (n-1)th node is selected in jsTree

Hi am using jsTree and created the below shown Tree
Now i want to disable n th node if (n-1) th node is selected,ie user cant able to select different level of nodes.
eg:
if user selected Koramangala,then infosys,Accenture,TCS,IBM,Wipro and their child nodes should be disable
If Bangalore is selected,Koramangala,electronicCity,WhiteField,Marathahally and their child should be disabled and disable same level childs in US& UK
Is it possible to achieve this requirement ????
Thanks in advance
You can use an attribute added by jsTree to all li elements - the aria-level attribute. It starts from 1 for root element and spans whole tree showing level for every node.
You will have to do this:
add some events to jsTree object - changed event to disable visible nodes from next level and below and open_node to update status of to-be disabled nodes previously hidden (non-existent in the DOM till this moment to be exact)
add conditionalselect plugin to disallow node selection if node is disabled
I kept the currently selected level in var currentlevel. You should check that it is kept local. Also you can surely optimize the code so it wouldn't repeat enable/disable functionality.
Check demo - JS Fiddle
Solution for the above mentioned requiremnt will be available here in jsFfiddle
Here am listing the features
At a time,only same level of nodes can be selectable
If select nth level node,then all lower level nodes will be disabled
If select nth level node and after that if select any higher level node is selected,then all lower level nodes selection will be removed
Here am adding the jquery code
var data = [{"id":"1","text":"India","state":{"opened":false},"parent":"#", "state": { "opened":true } },{"id":"1-1","text":"Banglore", "state": { "opened":true }, "parent":"1"},{"id":"1-1-1","text":"Koramangala","state":{"opened":false},"parent":"1-1"},{"id":"1-1-1-1","text":"Infosys ","state":{"opened":false},"parent":"1-1-1"},{"id":"1-1-1-1-1","text":"D","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-1-2","text":"E","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-1-3","text":"G","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-3","text":"Accenture ","state":{"opened":false},"parent":"1-1-1"},{"id":"1-1-1-3-8","text":"C","state":{"opened":false},"parent":"1-1-1-3"},{"id":"1-1-1-3:9","text":"E","state":{"opened":false},"parent":"1-1-1-3"},{"id":"1-1-2","text":"Electronic City","state":{"opened":false},"parent":"1-1"},{"id":"1-1-2-2","text":"TCS ","state":{"opened":false},"parent":"1-1-2"},{"id":"1-1-2-2-4","text":"C","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-5","text":"E","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-6","text":"F","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-7","text":"G","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-3","text":"WhiteField","state":{"opened":false},"parent":"1-1"},{"id":"1-1-3-4","text":"IBM ","state":{"opened":false},"parent":"1-1-3"},{"id":"1-1-3-4-10","text":"F","state":{"opened":false},"parent":"1-1-3-4"},{"id":"1-1-4","text":"Marathahally","state":{"opened":false},"parent":"1-1"},{"id":"1-1-4-5","text":"Wipro ","state":{"opened":false},"parent":"1-1-4"},{"id":"1-1-4-5-11","text":"G","state":{"opened":false},"parent":"1-1-4-5"},{"id":"1-2","text":"Chennai","state":{"opened":false},"parent":"1"},{"id":"1-2-5","text":"sholinganallur","state":{"opened":false},"parent":"1-2"},{"id":"1-2-6","text":"Tiruvanmiyur","state":{"opened":false},"parent":"1-2"},{"id":"2","text":"UK","state":{"opened":false},"parent":"#"},{"id":"2-3","text":"London","state":{"opened":false},"parent":"2"},{"id":"3","text":"US","state":{"opened":false},"parent":"#"},{"id":"3-4","text":"Texas","state":{"opened":false},"parent":"3"},{"id":"3-5","text":"Washington","state":{"opened":false},"parent":"3"},{"id":"3-6","text":"California","state":{"opened":false},"parent":"3"}]
$.jstree.defaults.core = {};
var currentlevel;
$('#tree')
.on('changed.jstree', function (event, data) {
if( data.action == 'select_node'){
$('#tree').find('li').removeClass('disabled_node');
console.log('select '+ data.node.text);
currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
$('#tree').find('li').each( function() {
if($(this).attr('aria-level') > currentlevel) {
$(this).addClass('disabled_node');
// remove checks from levels below
$('#tree').jstree('deselect_node', '#'+this.id);
} else if($(this).attr('aria-level') < currentlevel) {
// remove checks from levels above
$('#tree').jstree('deselect_node', '#'+this.id);
}
});
}
if( data.action == 'deselect_node' && data.event && data.event.type === 'click'){
// if have other checked nodes at same level - do not enable children
if ( $('#tree').find('li:not(#'+data.node.id+')[aria-level="'+currentlevel+'"][aria-selected="true"]').length>0 ) {
return;
}
$('#tree').find('li').each( function() {
if($(this).attr('aria-level') > currentlevel) {
$(this).removeClass('disabled_node');
}
});
}
})
.on('open_node.jstree', function(event, obj ) {
$('#'+obj.node.id).find('li').each( function() {
if($(this).attr('aria-level') > currentlevel) {
$(this).addClass('disabled_node');
}
});
})
.jstree({
"core" : {
"data" : data,
"multiple": true,
"themes": {
"url": true,
"icons": true
}
},
"checkbox" : {
"three_state" : false
},
"conditionalselect" : function (node, event) {
return !$('#'+node.id).hasClass('disabled_node');
},
"plugins" : [ "checkbox","conditionalselect" ]
});
Thanks to nikolay-ermakov
All the other answers\fiddles listed above works in most scenarios but one. All the above scenarios works fine as long as all the nodes are expanded (becuase once you collapse a node, it is removed from the dom).
Assume you select a node at level three and then you collapse the node at level three and then you select a node at level 1, it system does not un-select level 3 node (as it was removed from dom when node was collapsed) and nodes at level 1 and 3 remains selected.
To fix the issue, I am sending the node an additional field in the JSON call level which tells you about the current level of the node.
var myTree = $('#tree');
myTree .on('changed.jstree', function(event, data) {
mee.disableTreeNodesAtOtherLevels(event,data,myTree );
});
disableTreeNodesAtOtherLevels(event,data, tree){
var currentlevel = parseInt($('#' + data.node.id).attr('aria-level'));
var selectedNodes = tree.jstree(true).get_selected(true);
for (var i = 0; i < selectedNodes.length; i++) {
if(selectedNodes[i].original.level !== currentlevel){
tree.jstree(true).deselect_node(selectedNodes[i], true);
}
}
}
All this works based on assumption the data you are binding to tree is having a property called level

label inside combobox and conditional multiselect

I am building a pretty combobox with checkboxes and conditional entries. Everything works out alright, except for two features that I cannot figure out how to implement.
1) I would like to move the label inside the combobox, make it shift the values to the right, and appear in a slightly gray color.
2) I would like the value to ignore certain entries (group headers) selected. Those entries are there for functionality only - to select/unselect groups of other entries.
The entire project is in the zip file. You don't need a server, it's a client base app. Just download the archive, unpack, and launch app.html in your browser.
http://filesave.me/file/30586/project-zip.html
And here's a snapshot of what I would like to achieve.
Regarding your second issue, the best way I see is to override combobox onListSelectionChange to filter the values you don't want:
onListSelectionChange: function(list, selectedRecords) {
//Add the following line
selectedRecords = Ext.Array.filter(selectedRecords, function(rec){
return rec.data.parent!=0;
});
//Original code unchanged from here
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
// Only react to selection if it is not called from setValue, and if our list is
// expanded (ignores changes to the selection model triggered elsewhere)
if (!me.ignoreSelection && me.isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
/*
* Only set the value here if we're in multi selection mode or we have
* a selection. Otherwise setValue will be called with an empty value
* which will cause the change event to fire twice.
*/
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}
},
And change your onBoundlistItemClick to only select and deselect items in the boundlist not to setValue of the combo:
onBoundlistItemClick: function(dataview, record, item, index, e, eOpts) {
var chk = item.className.toString().indexOf('x-boundlist-selected') == -1;
if ( ! record.data.parent) {
var d = dataview.dataSource.data.items;
for (var i in d) {
var s = d[i].data;
if (s.parent == record.data.id) {
if (chk) { // select
dataview.getSelectionModel().select(d[i],true);
} else { // deselect
dataview.getSelectionModel().deselect(d[i]);
}
}
}
}
},
Regarding your first issue, it is easy to add the label using the displayTpl config option. But this will only add the text you need, without any style (grey color, etc). The combo is using a text input, which does not accept html tags. If you don't need the user to type text, than you may want to change the combo basic behavior and use another element instead of the text input.

ExtJS display RowExpander on condition only

I currently have a rather big Grid and am successfully using the RowExpander plugin to display complementary informations on certain rows. My problem is that it's not all rows that contain the aforementioned complementary informations and I do not wish the RowExpander to be active nor to show it's "+" icon if a particular data store's entry is empty. I tried using the conventional "renderer" property on the RowExpander object, but it did not work.
So basically, how can you have the RowExpander's icon and double click shown and activated only if a certain data store's field != ""?
Thanks in advance! =)
EDIT: I found a solution
As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:
this.rowExpander = new Ext.ux.grid.RowExpander({
tpl: ...
renderer: function(v, p, record) {
if (record.get('listeRetourChaqueJour') != "") {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"></div>';
} else {
p.id = '';
return ' ';
}
},
expandOnEnter: false,
expandOnDblClick: false
});
Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expanOnDblClick since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to '' only when I'm not rendering the rowExpander, I'm also removing the gray background of the un-rendered cells. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).
That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the class I guess. Hope this can help other people stuck in the position I was!
As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:
this.rowExpander = new Ext.ux.grid.RowExpander({
tpl: ...
renderer: function(v, p, record) {
if (record.get('listeRetourChaqueJour') != "") {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"></div>';
} else {
p.id = '';
return ' ';
}
},
expandOnEnter: false,
expandOnDblClick: false
});
Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expandOnDblClick specifically since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to an empty string only when I'm not rendering the rowExpander, I'm also removing the gray background of the cells that won't offer any expanding. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).
That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the RowExpander class in my opinion. Of course, one could also use Ext.override(), but then all instances of RowExpander would be hit by the override.
I have the same task, there is my solution
var rowExpander = new Ext.ux.grid.RowExpander({
renderer : function(v, p, record){
return record.get('relatedPageCount') > 0 ? '<div class="x-grid3-row-expander"> </div>' : ' ';
}
});
I have overridden render method which test relatedPageCount field in store and render + or white space.
I think I've found a cleaner solution.Give me a feedback pls :)
I extend the toggleRow method of RowExpander and if I match a condition avoid to toggle the row.Otherwise the standard flow continues
Ext.create('customplugins.grid.plugin.ClickRowExpander',{
pluginId : 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Last Modified By:</b> {usermodify}</p>',
'<p><b>User data:</b> {userdata}</p>',
'<p><b>Correlation ID:</b> {correlationid}</p>',
'<p><b>Description:</b> {descr}</p>'
),
toggleRow : function(rowIdx, record) {
if(record.get('directory')) return false;
customplugins.grid.plugin.ClickRowExpander.prototype.toggleRow.apply(this, arguments);
}
})
This version works in Ext JS 5 and 6 (classic)
One thing is to remove the +/- icon, which can be done via grid viewConfig:
getRowClass: function (record, rowIndex, rowParams, store) {
var yourFieldofChoice = record.get('yourFieldofChoice');
if (yourFieldofChoice == null) {
return 'hide-row-expander';
}
},
Define css for hide-row-expander:
.hide-row-expander .x-grid-row-expander {
visibility: hidden;
}
Now you disable expanding on enter key ('expandOnEnter' config is no longer supported in Ext JS 6) or double click by overriding toggleRow, or if you do not wish the override you create your custom rowexpander built on existing plugin:
Ext.define('RowExpander', {
extend: 'Ext.grid.plugin.RowExpander',
alias: 'plugin.myExpander',
init: function (grid) {
var me = this;
me.grid = grid;
me.callParent(arguments);
},
requiredFields: ['yourFieldofChoice'],
hasRequiredFields: function (rec) {
var valid = false;
Ext.each(this.requiredFields, function (field) {
if (!Ext.isEmpty(rec.get(field))) {
valid = true;
}
});
return valid;
},
toggleRow: function (rowIdx, record) {
var me = this, rec;
rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx);
if (me.hasRequiredFields(rec)) {
me.callParent(arguments);
}
}
});
I have handled the beforeexpand event inside the listeners of Ext.ux.grid.RowExpander. beforeexpand method got the whole row data injected. Checking the data conditionally we can return true or false. If we return false it wont expand otherwise it will do.
var expander = new Ext.ux.grid.RowExpander({
tpl: '<div class="ux-row-expander"></div>',
listeners: {
beforeexpand : function(expander, record, body, rowIndex){
var gpdata = record.data.GROUP_VALUES[1].COLUMN_VALUE
if(gpdata == null){
return false;
}
else{
return true;
}
}
}
});

Categories