1. Home
  2. Forum
  3. Angular - EJ 2
  4. Can a rich text editor be add to a dashboard layout?

Can a rich text editor be add to a dashboard layout?

Is it possible to add a rich text editor component to a dashboard layout? Currently when I try it I've got three problems

  1. The toolbar doesn't display
  2. It's not possible to use the mouse to select text. When I click and drag to select text, the panel moves instead instead of text being selected. 
  3. I can't edit the text

Do you have an example of putting a rich text editor inside a dashboard layout, assuming it is possible?

8 Replies 1 reply marked as answer
BS Buvana Sathasivam Syncfusion Team June 14, 2022 11:04 AM UTC

Hi Matthew,


Greetings from Syncfusion support.


We have validated the reported issue by preparing the Angular Dashboard Panel sample with the Rich Text Editor component. But, we were unable to reproduce your reported issue at our end.

Sample: https://stackblitz.com/edit/angular-o4scov?file=app%2Fapp.module.ts,app.component.html


Can you please share the below information?

  • Please confirm whether the reported issues only occur when trying to render the Rich Text Editor component inside the Dashboard panels.
  • Share your code or runnable sample to reproduce your reported issue at our end.
  • Share the video to better understand your problem.

Regards,

Buvana S


MA Matthew June 14, 2022 11:30 AM UTC

Thanks for that. 

  1. I was only seeing the problem with the RTE inside a dashboard. The same code outside the dashboard worked fine
  2.  Now I know it should be possible, I'll get an example together.
  3. The stackblitz example you sent still has a problem with select vs dragging the panel though. Here's rough video of what I'm seeing when I try and select text. As you can see it tries to move the panel and doesn't properly select the text

https://photos.app.goo.gl/rnpwukB3ZGE8J8Nz8 https://photos.app.goo.gl/rnpwukB3ZGE8J8Nz8

I'll do a better video when I've got an example together.


MA Matthew June 14, 2022 07:29 PM UTC

I've re-created the problem in Stackblitz: https://stackblitz.com/edit/angular-o4scov-a8zabu?file=app.component.ts

or https://angular-o4scov-a8zabu.stackblitz.io for the application itself. I've attached a video of the problem as I'm seeing it.

Hopefully this help, and hopefully iy



Attachment: problem_ab135508.zip

IL Indhumathy Loganathan Syncfusion Team June 16, 2022 04:19 PM UTC

Hi Matthew,


We have checked the shared video. In mobile view, the dashboard will be stacked in a single column for responsive consideration. The reordering (drag and drop) functionality will be applicable only in desktop mode, since designing, editing, and reordering functionality is mainly for admin users. The desktop user maintains and modifies the orders with the desktop mode alone in most of the dashboard cases. You are unable to perform drag and drop on panels when the panels are rendered in a single column.


We suggest you open the output in the new window in our shared sample. We have also checked the sample shared from your end. We understand that you want to set the panel content on initial rendering based on pure script. You can achieve this by setting the Template block for that particular panel content using our created event. Please find the modified sample at the below link.


https://stackblitz.com/edit/angular-o4scov-g79rsm?file=app.component.html,app.component.ts,main.ts


You can follow any of the above sample to meet your requirement. Please get back to us if you need any further assistance.


Regards,

Indhumathy L


MA Matthew replied to Indhumathy Loganathan June 21, 2022 07:49 PM UTC

Thank you for working example and explanation. There are still 2 problems with sample though:

  1. The cursor is always the move cursor
  2. The UI still gets mixed up between dragging the editor and select text in the editor.

If there anyway for the UI to distinguish whether I am trying to drag the editor or select text? I appreciate putting an editor in the docking layout is probably not a use case it was designed for but it would help if I can get it to work.

I've attached a video to show the problem.

Attachment: dragging_9b778074.zip

IL Indhumathy Loganathan Syncfusion Team June 24, 2022 01:48 PM UTC

Hi Matthew,


We understand that you want to prevent the panel dragging when the RTE element is clicked. You can achieve this requirement by enabling dragging action on a specific part of the panel by using the draggableHandle property. Check the below documentation for reference.


https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels/#customizing-the-dragging-handler


For your reference, we have modified the sample so that you can drag the panel when you click on the panel header. Otherwise, the dragging action will be restricted. Check out the sample at the link below.


https://stackblitz.com/edit/angular-o4scov-yi5pz5?file=app.component.html,app.component.ts,main.ts


Also, if you only want to prevent the drag action when you click inside the RTE, you can disable our allowDragging property based on the target element clicked. Refer to the below documentation for reference.


https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels/#disable-dragging-of-panels


Please check the shared details and get back to us if you need any further assistance.


Regards,

Indhumathy L


Marked as answer
MA Matthew June 24, 2022 02:46 PM UTC

that's fantastic, thanks for the help and the very clear communication.


IL Indhumathy Loganathan Syncfusion Team June 27, 2022 06:21 AM UTC

Hi Matthew,


We are glad that your query has been resolved. Please get back to us if you need any further assistance.


Regards,

Indhumathy L


Loader.
Up arrow icon