addPaletteItem

[Nabil]

Hi,

I am trying to add a palette item at runtime, using javascript (even if I work with Syncfusion ASP.NET Core).

Here is the relevant documentation :

https://ej2.syncfusion.com/aspnetcore/documentation/diagram/symbol-palette#addremove-symbols-to-palette-at-runtime

As you can see they mention the functions  addPaletteItem and removePaletteItem, but they are not clickable so I can't get the documentation or a simple example about these functions .

So I decided to have a look at these 2 functions in the EJ2 Javascript documentation :

https://ej2.syncfusion.com/documentation/diagram/symbol-palette/#addremove-symbols-to-palette-at-runtime

This time the links are there and if I click on addPaletteItem I get the following documentation :

https://ej2.syncfusion.com/documentation/api/diagram/palette/#addPaletteItem-number

which is completely useless.

Could you please give me a small example of how to call addPaletteItem ? What is the structure of the JSON object that I should give to that function ?

I tried this, but it doesn't work :

var palette = document.getElementById("symbolPalette").ej2_instances[0];

palette.addPaletteItem("flow", { Id : "Hello", Shape : { type : "Flow", shape : "Delay" } });

It adds a new item but with a randomly generated name when I hover the mouse on it. And the shape is always a square. So it seems that it doesn't take my JSON into account.

By the way, what would be the javascript function that deletes all items in a palette ?

Thanks a lot

[Vivisa Ganesan]

Hi,

In addPaletteItem method, the node id and shape property first letter are in uppercase, so only the shape renders as a rectangle. We have modified your code in the below sample. To remove the palette items, you can use removePalettes() method. Refer the below sample and video for reference.

Code Snippet:

document.getElementById('additem').onclick = () => {

  var palette = (document.getElementById('symbolpalette') as any)

    .ej2_instances[0];

  var shape = {

    id: 'newflow' + randomId(),

    shape: { type: 'Flow', shape: 'Terminator' },

  };

  palette.addPaletteItem('flow', shape);

  palette.dataBind();

};

 

 

 

document.getElementById('removeitem').onclick = () => {

  var palette = (document.getElementById('symbolpalette') as any)

    .ej2_instances[0];

  palette.removePalettes(['flow']);

  palette.dataBind();

};

 

Sample:

https://stackblitz.com/edit/tz6qhw?file=index.html,index.ts

Regards,

Vivisa