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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





147442 Sep 11,2019 02:35 AM UTC Feb 18,2021 01:18 PM UTC Angular - EJ 2 8
Tags: RichTextEditor
Asked On September 11, 2019 02:35 AM UTC

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

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 11, 2019 07:45 PM UTC

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.  

Replied On September 11, 2019 08:09 PM UTC

Thank you Narayanasamy,

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

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 12, 2019 12:21 PM UTC

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.  

Replied On September 12, 2019 02:44 PM UTC


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

Thank you so much!

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 13, 2019 03:59 AM UTC

Hi Drio,

You are welcome.

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

Narayanasamy P.

veymar montano colque
Replied On February 12, 2021 12:33 PM UTC

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

Revanth Krishnan [Syncfusion]
Replied On February 15, 2021 12:55 PM UTC

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. 

Revanth Krishnan [Syncfusion]
Replied On February 18, 2021 01:18 PM UTC

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: 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon