Show / Hide Table of Contents

Keyboard Navigation

You can enable keyboard navigation using keyNavigation property:
 
    var chart = new OrgChart(document.getElementById("tree"), {
        keyNavigation: true,
        ...
    });
To select the node to be focused use focusId property:
 
    var chart = new OrgChart(document.getElementById("tree"), {
        keyNavigation:{
            focusId: 2
        },
        ...
    });

Use these keys to navigate in the chart:
  • f - to go to find
  • Arrows - to move to up/down/left/right
  • Space - to expand/collapse

Key-down event

Use the key-down event to catch every key pressed.

You can use these 3 parameters to add key functions:

  • args.node
  • args.data
  • args.event
 
       chart.on('key-down', function(sender, args){
            if (args.node){
                if (args.event.code == "KeyN") {
                    var newData = { id: sender.generateId(), pid: args.node.id };
                    sender.addNode(newData, null, true);
                }
                else if (args.event.code == "Enter" || args.event.code == "NumpadEnter") {
                    sender.editUI.show(args.node.id);
                }
                else if (args.event.code === "KeyD") {
                    sender.removeNode(args.node.id, null, true);
                }
                else if (args.event.code === "KeyS") {
                    sender.exportSVG({
                        filename: "OrgChart.svg", 
                        expandChildren: false, 
                        nodeId: args.node.id
                    });
                }
                else if (args.event.code === "KeyP") {
                    sender.exportPDF({
                        filename: "OrgChart.pdf", 
                        expandChildren: false, 
                        nodeId: args.node.id
                    });
                }
                else if (args.event.code === "KeyC") {
                    sender.exportCSV();
                }
                else if (args.event.code === "KeyX") {
                    sender.exportXML();
                }
            }
        });

Use keys "n", "Enter", "d", "s", "p", "c" and "x" in the following example:


Screen-reader-text event

Use the Screen-reader-text event to read the text using Screen reader.

You can use these 2 parameters to read the text:

  • args.id
  • args.text
 
    chart.on('screen-reader-text', function(sender, args){
        chart.on('screen-reader-text', function(sender, args){
            var text = (sender.get(args.id)).name;
            args.text = text;
        });
    });
You need to install the Screen reader. extention for the following example: