The cells that cannot be edited – the ones that render the labels – have no cellEditor. We use the cellFromPoint method to identify the cell that was clicked. Var cellEditor = eventArgs.getNode().cellFromPoint(eventArgs.getMousePosition()) When it is clicked with the right one – we create a new node, linked to it, one level deeper into the hierarchy.
When the node is clicked with the left mouse button – we edit it. click with the right mouse button creates a node checks if the user has clicked with the left mouse button (0) We handle the nodeClicked event with the onNodeClicked method: // raised when the user clicks on a nodeįunction onNodeClicked(diagram, eventArgs) Let’s see what happens when the users clicks on a node: diagram.addEventListener(Event.nodeClicked, onNodeClicked) Initially, the node has no boss, it will be determined once we link it to the rest of the org chart. tBounds(new Rect(position.x, position.y, 20, 20)) Var node = new OrgChartNode(diagram, undefined) If it is the right mouse button we should create a new OrgChartNode: // click with the right mouse button creates a node We handle differently clicks with the right and left mouse buttons. Var position = eventArgs.getMousePosition() First, we handle the Clicked event: diagram.addEventListener(Event.clicked, function (diagram, eventArgs) This is done because none of the predefined Behavior modes answer the specific needs of our application: tBehavior(Behavior.Custom) This means we will define how the library responds to user actions. This is done by handling a lot of events that the diagram library exposes.įirst, we set the Behavior property of the diagram to “Custom”. The org chart allows the users to do a lot of things: edit certain table cells, delete and create nodes, create and delete links, move and drag the nodes. Different levels in the hierarchy are distinguished by different colors. The setColor method assigns the right color for the background of the table. This.hierarchy = + 1 įor (var i = 0 i < this.childNodes i++) first level of executives under the boss This is done by the setHierarchy method: // rebuilds the hierarchy In our samples bosses are assigned automatically and cannot be edited by the user. It also assigns the correct boss of the employee. The setFields method takes the data from the OrgChartNode fields and assigns it to the correct cells of the table. This.getCell(2,0).setText(this.fullName) hide the caption and place the employee names on row 0 assigns the employee data to the table cells When we set a new value we invalidate the canvas so that the changes can be rendered correctly on the screen. We also declare setter/getter methods for each OrgChartNode field: OrgChartNode.prototype =ĪbstractionLayer.callBaseMethod(OrgChartNode, this, 'updateCanvasElements') We define an updateCanvasElements method that calls the updateCanvasElements of the parent class to mark the changes.
#Jquery orgchart js update
We set the fields for each new node and update the existing canvas elements. The prototype of the OrgChartNode gets or sets the properties which deal with the data we need for each employee. The cells in the second column with index 1 are for labels: title, name, id and comments. Cell(0,0) is reserved for the image of the employee. The OrgChartNode is a TableNode with 3 columns and four rows. The CEO, which is the topmost node in the hierarchy has no boss. New Font("Verdana", 3, false /*bold*/, false /*italic*/)) Įach OrgChartNode has a parent and a boss. Var OrgChartNode = function (parent, boss)ĪbstractionLayer.initializeBase(OrgChartNode, this, ) creates a table node with the default settings
#Jquery orgchart js code
That’s important because we will reference it in the code behind file.Įach employee on the diagram is represented by a special node – the OrgChartNode. This page requires a browser that supports HTML 5 Canvas element. The diagram uses an HTML Canvas to render itself. There we have also saved OrgChartEditor.js. Īs you see, we have copied and in the directory of the web page. That is done because some browsers might not load correctly the scripts if they are initialize before the HTML code for the canvas. We must reference it, from the HTML but we will do that at the end, before the closing tag. We create OrgChartEditor.html and link the following scripts and a CSS file in the section: Then we create an empty (for now) js file that will hold the code-behind for the web page. We need to create two files for this application – an HTML page and a JavaScript file that will be used by it. The samples.css and samples.js scripts are used by all MindFusion JavaScript samples and are not relevant to your application. Org Chart in JavaScript: Directory Structure
0 kommentar(er)
