How to get captions and tooltips on Symbol Palette items?

[David van Laar Veth]

Hi, I am trying to add captions and tooltips to my symbol palette items. How do I do this?

Original                               =>       What I want

[Ramya Thirugnanam]

Hi David,  

  

Query	Response
Add caption to symbol palette items	·        Please use symbol palette’s ShowPaletteItemText Property to show/hide the text below the palette shapes.   ·        By default, when you enable showPaletteItemText property, a node name will be rendered as a palette item text.  ·        If you need a text to be displayed with space or something, then you should use paletteItem label property to achieve your requirement because node name should not contain space or start with numeric values.     Code example:      symbolpalette.ShowPaletteItemText = true;      BasicShape node = new BasicShape();            node.Name = name;   node.PaletteItem.Label = “Rectangle Node”;
Add tooltip to symbol palette items.	We have rendered a tooltip for symbol palette items in diagram create event. Please refer to the code example below.      Code example:          <ej:Diagram ClientIDMode="Static" ID="DiagramContent" OnClientCreate="diagramCreate" >               </ej:Diagram>      <script>           function diagramCreate() {            setToolTip();        }           function setToolTip() {           var paletteItems;           paletteItems = $(".e-paletteItem");           for (m = 0; m < paletteItems.length; m++) {               var title = "";               var wWord = ((paletteItems[m].id).split("_")[0]);               if (wWord) {                   if (wWord.split(/(?=[A-Z])/)[0])                       title += " " + wWord.split(/(?=[A-Z])/)[0];                   if (wWord.split(/(?=[A-Z])/)[1])                       title += " " + wWord.split(/(?=[A-Z])/)[1];                   if (wWord.split(/(?=[A-Z])/)[2])                       title += " " + wWord.split(/(?=[A-Z])/)[2];                   if (wWord.split(/(?=[A-Z])/)[3])                       title += " " + wWord.split(/(?=[A-Z])/)[3];                   if (wWord.split(/(?=[A-Z])/)[4])                       title += " " + wWord.split(/(?=[A-Z])/)[4];               }               paletteItems[m].setAttribute("title", title);           }       }        </script>

  

Regards,  

Ramya T 

[David van Laar Veth]

Thanks Ramya,

I have implemented the caption, but now when I drag the shape, there is a label on the dragged shape, and it is the Name (BPMNTaskNode), not the PaletteItem.Label (Form).

How do I remove the label from the dragged items?

[Ramya Thirugnanam]

Hi David,  

  

Query: How do I remove the label from the dragged items  

  

Please use the below CSS code example to achieve your requirement.  

 

Code example:  

  

<style>  

         .e-paletteItem.e-draggable.e-js.dragClone .e-text-container {  

            display:none;  

        }  

</style>  

 

  

Regards,  

Ramya T