Keyboard Navigation

 
       Copy 
    keyNavigation: true
 

 
           Copy 
    keyNavigation:{
        focusId: 2
    }
 

Edit in BALKAN Code

• f - to go to find
• Arrows - to move to up/down/left/right
• Space - to expand/collapse

Edit in BALKAN Code

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

 
       Copy 
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:

Edit in BALKAN Code

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

 
       Copy 
chart.on('screen-reader-text', function(sender, args){
    var text = (sender.get(args.id)).name;
    args.text = text;
});
 

Edit in BALKAN Code