JavaScript/jQuery Diagram - propertiesPanel.tabs.groups
commands
Accepted Values: 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'
A properties panel group can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.
jQuery
JavaScript
$(function() {
var diagram = $("#diagram").dxDiagram({
propertiesPanel: {
visibility: 'visible',
tabs: [
{
groups: [ {
title: "Page Properties",
commands: ["pageSize", "pageOrientation", {name: "sayHello", text: "Say Hello", icon: "blockquote"}]
} ]
}
]
},
onCustomCommand: function(e) {
if (e.name == "sayHello")
alert("Hello!")
},
}).dxDiagram("instance");
});Feedback