Drop a datatable header/column outside of the datatable

Webix JS
#1

Hi,

I am trying to drop a datatable header/column into a dashboard. I can do it without problems with a datatable cell. However, if I make the columns draggable, they do not fire the drop event in the dashboard.

It seems that there is something preventing this. Could you help me on how to address this?

Many thanks.

#2

Hey @ocanela,

Could you help me on how to address this?

Could you please provide a snippet (via the snippet tool) where the issue can be seen? Not everything is quite clear from your description. You are saying that you are trying to drag elements onto the dashboard, does that mean that your dashboard has a panel with a datatable inside of it (because dashboard by itself is simply a layout-based widget that stores views inside of it)?

#3

Thank you for your answer, and apologies for the poor description.

I have a datatable and a dashboard as two “separate” views in a layout. I can drag rows (or cells) from the datatable to the dashboard. Once dropped, they create a new panel with information from the row. See example:

https://snippet.webix.com/v36mug9b

In this same example, I would like to be able to drag the column header to the dashboard. Once dropped, I would like a new panel showing information from the column header.

I hope I clarified my question.

Thanks again for your help.

#4

Hello @ocanela,

I hope I clarified my question.

Thank you for the information, everything is clear now.

In this same example, I would like to be able to drag the column header to the dashboard.

The main issue here is that the dashboard component doesn’t register the dragged element if the source component doesn’t have the getItem() method, which is the reason the drop is being cancelled (or rather, the drag marker is not being created). While dragging a column, the drag context is completely different from the case where you drag a row, and the getItem() method isn’t returned (and isn’t applicable to the column, either way). To allow for this custom behaviour, you will need to modify the dashboard component via the protoUI method.

Here is a very rough example: https://snippet.webix.com/8x5lfhfd. You need to look out for the $dragIn method, where the context is being checked, by default it looks like this:

if (!context.from || !context.from.getItem) return false;

Please note that I’ve only accounted for this specific case, in case you wish to implement some other custom DnD behaviour, you will have to watch closely for the incoming context and change the behaviour accordingly.

#5

Hello,

Great! That is exactly what I needed.

Many thanks for your help.

Best regards,