New Node Picker


With the newnodepicker module the user has the ability to choose wich of the loaded nodes from the Node Expander Module he wants to add to the graph view.

Dependencies for this module:

  • jquery
  • sigma.min.js
  • graph.browser.core.js
  • graph.browser.modulecontrol.js


fields type description
onFinished function Called when the nodes are loaded into the graph view
onChooseNodes function Called when the node are loaded into the `newnodepicker-chooseNodes-items` container and the user can choose wich of the nodes sholuld be added to the graph view


var graphSettings = {
    graphContainer: 'graph-container',
    moduleSettings: {'newNodesPicker': {'onFinished': myOnFinishedFunction, 'onChooseNodes': myOnChooseNodesFunction}, }

var graphBrowser = new GraphBrowser(graphSettings);

Needed HTML fields

HTML IDs description
newnodepicker-chooseNodes-parentNodeTitle This is the title of the parentnode of wich the neighboring nodes can be loaded. The parentnodes title will replace the complete element with a <h3>-element
newnodepicker-chooseNodes-items This should be a container in wich the nodes that can be chosen can be listed with their name and a corresponding checkbox
newnodepicker-chooseNodes-submit When the element with this id is clicked, the nodes with the checked checkboxes will be loaded into the graphview
newnodepicker-chooseNodes-markAllSelected When the element with this id is clicked, the checkbox of every node will be checked
newnodepicker-chooseNodes-reverseSelection When the element with this id is clicked, all checkboxes will toggle their status

Created HTML fields

tag HTML IDs classes purpose
<h3> newnodepicker-chooseNodes-parentNodeTitle newnodepicker-chooseNodes-parentNodeTitle This is the title of the parent node of wich the neighboring nodes can be loaded
<div> newnodepicker-chooseNodes-itemType-{nodeType} newnodepicker-chooseNodes-itemType-{nodeType} newnodepicker-chooseNodes-itemType This container will be filled with the nodes, that can be chosen to be shown in the graphview. Each node will be ordered by its nodetype accordingly under nodetypeheader
<h4> newnodepicker-chooseNodes-itemType-header newnodepicker-chooseNodes-itemType-header newnodepicker-chooseNodes-itemType-header-{nodeType} These items represent the header for each nodetype. The nodes will be put underneath each header
<h4> --- checkbox newnodepicker-chooseNodes-item newnodepicker-chooseNodes-item-{nodeType} Theseare the checkboxes with whom one can select the nodes to be loaded into the graphview. The nameattribute of the checkboxes are is selectedNodeItems[]


About this article
Last change 2016-08-29
Topics ExperimentalStructr 2.0