ejSymbolPalette

11 Jul 20188 minutes to read

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) {}
});