SymbolPalette -> SymbolInfo -> template

[Nick Shaw]

Hi, we are looking to improve the styling of the text underneath the symbols on the symbol palette (simply to give more space).

I assume that we do this via the template, but this doesn't seem to be working.

Any ideas/sample code would be greatly appreciated.

[Shyam G]

Hi Nick, 

 

To display custom text with space to shapes in the symbol palette, please use the description property in the getSymbolInfo function as shown in the below code example. We should define custom information to the node/connector using its addInfo property and then we set that value in the description text property in the getSymbolInfo function. 

 

Code example: 

//Initialize the flowshapes for the symbol palatte 

    var shapes = [ 

        { id: 'terminator', addInfo: {text: 'Flow node'}, shape: { type: 'Flow', shape: 'Terminator' } }, 

        { id: 'process', addInfo: {text: 'process node'}, shape: { type: 'Flow', shape: 'Process' } }, 

          

    ]; 

 

var palette = new ej.diagrams.SymbolPalette({ 

getSymbolInfo: function (symbol) {  

           // display text for palette item 

             return { description: { text: symbol.addInfo.text }, fit: true };  

 } 

palette.appendTo('#symbolpalette'); 

 

 

Sample: https://stackblitz.com/edit/wkagv3-ioodh6?file=index.js 

 

Regards, 

Shyam G