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

Is there any functionality to drag & drop "chips" in a text area

I'm looking for something like this, but for Angular


I want to enable a TextEditor, with the option to accept drag & drop variables in the text. This will be to create a layout, I want to see the variables like a chips (angular control) inside the text

Something like the attached image

Thank you

Attachment: Screen_Shot_20190910_at_9.31.18_PM.png_1ef4377a.zip

10 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team September 11, 2019 02:45 PM

Hi Drio, 
Greetings from Syncfusion support. 
We have validated your requirement and have prepared sample as you have expected. In this sample we have provided drag and drop support for selected text / Element which can drop into textarea of RTE as chips. Also, We have bound drop event to the editor.  
Please let us know if you need any further assistance on this. 
Narayanasamy P.  

DR Drio September 11, 2019 03:09 PM

Thank you Narayanasamy,

But I can't drag any Item from Car list ...

NP Narayanasamy Panneer Selvam Syncfusion Team September 12, 2019 07:21 AM

Hi Drio,  
Thanks for your update. 
In the previously shared sample, the dragable support for the listview item is not enabled. So, it works after you have selected the required text and then drag and drop it. 
Now in the modified sample, we have enabled the draggable support for listview item by passing draggable: true in htmlAttibutes through dataSource. Now It works as expected. Please find the code changes in below,  
Code example: 
public data: Object[] = [ 
      "text": "Hennessey Venom", 
      "id": "list-01", 
      "htmlAttributes": { draggable: true } 
For your convenience we have prepared a sample based on above code snippet, 

Please let us know if we have misunderstood anything as incorrect. 
Narayanasamy P.  

DR Drio September 12, 2019 09:44 AM


That's what I'm looking for ...

Thank you so much!

NP Narayanasamy Panneer Selvam Syncfusion Team September 12, 2019 10:59 PM

Hi Drio,

You are welcome.

We are glad to hear that the reported issue has resolved at your end. 

Narayanasamy P.

VM veymar montano colque February 12, 2021 07:33 AM

Hi sync-fusion, I wonder if there is the same functionality in blazor?

RK Revanth Krishnan Syncfusion Team February 15, 2021 07:55 AM

Hi Veymar, 
We are currently validating your query with high priority, we will update you with further details within two business days on or before 17th February. 
We appreciate your patience until then. 

RK Revanth Krishnan Syncfusion Team February 18, 2021 08:18 AM

Hi Veymar, 
We are currently facing an issue in the ListView Blazor component when setting the draggable for the list items. So we have considered the “ListView HtmlAttributes property in DataModel is not working” as a bug from our side. We will include this fix in the patch release which is expected to be rolled out by the mid of April 2021. 
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: 

RP Ranul Pallemulle June 8, 2021 10:47 PM


What would be the recommended approach for attaching event handlers to chips in the rich text editor (for example, to remove the chip using a close button within the chip)? And is there a possibility to use ejs-chiplist with the rich text editor? Our limitation at the moment is that we have to use rteObj.executeCommand('insertHTML', ...) to add the chip as an HTML string, which means that we have to write logic elsewhere to make it interactive. Maybe if there is a way to extend executeCommand with custom commands (like 'insertChip') it would be easier to do this?


IS Indrajith Srinivasan Syncfusion Team June 9, 2021 06:39 AM

Hi Ranul, 
Greetings from Syncfusion support, 
We have validated your reported query. You can’t embed components inside the RichTextEditor, instead you can use the public methods to achieve your requirement of “chip with a close button”. Using the public method insertHTML you can achieve the requirement, since it is an application-level requirement which can’t be considered with new public methods. We have also prepared a sample, that tries to meet your requirements. 
dropHandler() { 
     var value = '<span id=' +"'" + this.uuidValue +"'" + ' class="e-chip-list" style="display:inline" contenteditable="false"> <span class="e-chip"> <span class="e-chip-text"> ' + text + '</span><span class="e-chip-delete e-dlt-btn"></span></span> </span>'; 
      this.rteObj.executeCommand('insertHTML', value); 
      var deleteBtn = e.target.querySelector('#' + this.uuidValue + ' ' + '.e-chip-delete'); 
     if (deleteBtn) { 
        deleteBtn.addEventListener('click', this.remove.bind(this, deleteBtn)); 
remove(deleteBtn) { 
In the below shared sample the following are configured, 
  • Close icon for the chips.
  • Click action binding, for the elements and removing it when clicked.
Please let us know if the solution helps, 

Live Chat Icon For mobile
Up arrow icon