ejSymbolPalette

The symbol palette control allows to predefine the frequently used nodes and connectors and to drag and drop those nodes/connectors to drawing area

Syntax

$(element).ejSymbolPalette()

Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    //Create symbolpalette
    $("#symbolpalette").ejSymbolPalette();
    </script>

    Requires

    • module:jQuery.js
    • module:ej.common.all
    • module:ej.widgets.all
    • module:jquery.easing.js
    • module:jquery.globalize.js
    • module:jsrender.js
    • module:jquery.validate.js
    • module:jquery.validate.unobtrusive.js

    Members

    allowDrag boolean

    Defines whether the symbols can be dragged from palette or not

    Default Value

    • true

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette( { allowDrag: false } );
    </script>

    cssClass string

    Customizes the style of the symbol palette

    Default Value

    • “e-symbolpalette”

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({cssClass: "e-symbolpalette"});
    </script>

    defaultSettings object

    Defines the default properties of nodes and connectors

    defaultSettings.node object

    Defines the default properties of the nodes

    Default Value

    • null

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({
    	defaultSettings: { node : { fillColor:"red" } }
    });
    </script>

    defaultSettings.connector object

    Defines the default properties of the connectors

    Default Value

    • null

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({
    	defaultSettings: { connector: { lineColor: "red" } }
    });
    </script>

    diagramId string

    Sets the Id of the diagram, over which the symbols will be dropped

    Default Value

    • null

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({ diagramId: "diagram" });
    </script>

    headerHeight number

    Sets the height of the palette headers

    Default Value

    • 30

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette( { headerHeight: 25 } );
    </script>

    height number

    Defines the height of the symbol palette

    Default Value

    • 400

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette( { height:300 } );
    </script>

    paletteItemHeight number

    Defines the height of the palette items

    Default Value

    • 50

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({ paletteItemHeight: 30 });
    </script>

    paletteItemWidth number

    Defines the width of the palette items

    Default Value

    • 50

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({ paletteItemWidth: 30 });
    </script>

    palettes array

    An array of JSON objects, where each object represents a node/connector

    Default Value

    • []

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    	
    var palette = {
    		name: "Basic Shapes",
    		expanded: true,
    		items: [{
    			name: "Rectangle", height: 40, width: 80
    		}]
    	};
    	
    $("#symbolpalette").ejSymbolPalette({
    	//Initializes the palette collection
    	palettes: [ palette ]
    });
    
    </script>

    palettes.name string

    Defines the name of the palette

    Default Value

    • null

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    	
    var palette = {
    		name: "Basic Shapes",
    		expanded: true,
    		items: [{
    			name: "Rectangle", height: 40, width: 80
    		}]
    	};
    	
    $("#symbolpalette").ejSymbolPalette({
    	//Initializes the palette collection
    	palettes: [ palette ]
    });
    
    </script>

    palettes.expanded boolean

    Defines whether the palette must be in expanded state or in collapsed state

    Default Value

    • true

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    	
    var palette = {
    		name: "Basic Shapes",
    		expanded: true,
    		items: [{
    			name: "Rectangle", expanded:true, height: 40, width: 80
    		}]
    	};
    	
    $("#symbolpalette").ejSymbolPalette({
    	//Initializes the palette collection
    	palettes: [ palette ]
    });
    
    </script>

    palettes.items array

    Defines the palette items

    Default Value

    • []

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    	
    var palette = {
    		name: "Basic Shapes",
    		expanded: true,
    		items: [{
    			name: "Rectangle", height: 40, width: 80
    		}]
    	};
    	
    $("#symbolpalette").ejSymbolPalette({
    	//Initializes the palette collection
    	palettes: [ palette ]
    });
    
    </script>

    previewHeight number

    Defines the preview height of the symbols

    Default Value

    • 100

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette( { previewHeight: 50 });
    </script>

    previewOffset object

    Defines the offset value to be left between the mouse cursor and symbol previews

    Default Value

    • (110, 110)

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({previewOffset: {x: 50, y: 50}});
    </script>

    previewWidth number

    Defines the width of the symbol previews

    Default Value

    • 100

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette( { previewWidth: 50 });
    </script>

    showPaletteItemText boolean

    Enable or disable the palette item text

    Default Value

    • true

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({showPaletteItemText: true});
    </script>

    width number

    The width of the palette

    Default Value

    • 250

    Example

  • html
  • <div id="symbolpalette"></div>
    <script>
    $("#symbolpalette").ejSymbolPalette({width:300});
    </script>

    Methods

    addPaletteItem(paletteName, node)

    Add items to Palettes at runtime

    Name Type Description
    paletteName string name of the Palette
    node object JSON for the new items to added in Palette

    Example

  • html
  • <div id="diagramcontent"></div>
    <script>
    var diagram = $("#diagramcontent").ejDiagram("instance");
    //add a node to palette
        var palette = $("#symbolpalette").ejSymbolPalette("instance");
        var node = [{ name: "rectangle1", width: 100, height: 100, fillColor:"red",offsetX: 20, offsetY: 20, type: "node", }];
        palette.addPaletteItem("Basic Shapes", node);
    
    </script>

    removePaletteItem(paletteName, node)

    Remove items to Palettes at runtime

    Name Type Description
    paletteName string name of the Palette
    node object JSON for the new node to removed in Palette

    Example

  • html
  • <div id="diagramcontent"></div>
    <script>
    var diagram = $("#diagramcontent").ejDiagram("instance");
    //remove a node to palette
        var palette = $("#symbolpalette").ejSymbolPalette("instance");
        var node = [{ name: "rectangle1", width: 100, height: 100, fillColor:"red",offsetX: 20, offsetY: 20, type: "node", }];
        palette.removePaletteItem("Basic Shapes", node);
    
    </script>

    Events

    selectionChange

    Triggers when a palette item is selected or unselected

    Name Type Description
    changeType String returns whether an element is selected or unselected
    element Object returns the node or connector that is selected or unselected

    Example

  • html
  • // selectionChange event for symbol palette
    $("#symbolpalette").ejSymbolPalette({
    	selectionChange:function (args) {}
    });