How to get captions and tooltips on Symbol Palette items?

David van Laar Veth

Asked On April 25, 2019 11:14 PM UTC

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

Original => What I want

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On April 26, 2019 06:04 AM UTC

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>

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

Reply | Reply with quote

David van Laar Veth

Replied On April 29, 2019 01:19 AM UTC

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?

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On April 29, 2019 06:40 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144235	Apr 25,2019 11:14 PM UTC	Apr 29,2019 06:40 AM UTC	ASP.NET Web Forms	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US