We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date



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 :


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 :


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


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

1 Reply

VG Vivisa Ganesan Syncfusion Team April 10, 2023 11:53 AM UTC


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)


  var shape = {

    id: 'newflow' + randomId(),

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


  palette.addPaletteItem('flow', shape);






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

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










Live Chat Icon For mobile
Up arrow icon