Drop to Dashboard

[IT Solutions]

Hi all.

I have been searching around for a tip regarding:

I want to drag an item from a treeview component and to a Dashboard layout.

When the item is dropped i want to catch the item data / args so i can add the correct panel to the dashboard.

Any help would be appriciated.

[Keerthana Rajendran]

  

Hi Customer, 

Greetings from Syncfusion support.

Based on your query, we suspect that you need to get the dragged node details of the TreeView and render this as Dashboard Layout panels. You can achieve your requirement using nodeDragStop event of TreeView as demonstrated in the below code snippet. 

<template> 

      <ejs-treeview 

        id="tree" 

        :allowDragAndDrop="true" 

        :nodeDragStop="DragStop" 

      ></ejs-treeview> 

    <ejs-dashboardlayout 

      ref="DashbordInstance" 

      :columns="5" 

    > 

    </ejs-dashboardlayout> 

</template> 

<script> 

export default { 

  data() { 

    return { 

    }; 

  }, 

  methods: { 

    DragStop: function (args) { 

      var panel = [ 

        { 

          id: this.index.toString() + "_layout", 

          content: 

           '<div class="text-align">' +args.draggedNodeData.text + "</div>", 

        }, 

      ]; 

      dashboard.addPanel(panel[0]); 

      this.index = this.index + 1; 

    }, 

  }, 

}; 

</script> 

Please find the below sample for your reference. 

Sample: https://codesandbox.io/s/vue-treeview-sample1-forked-ulbe6?file=/src/App.vue 

API Links: https://ej2.syncfusion.com/vue/documentation/api/treeview/#nodedragstop 

                https://ej2.syncfusion.com/vue/documentation/api/dashboard-layout/#addpanel 

Please get back to us if you need further assistance.

Regards, 

Keerthana R. 

[IT Solutions]

Thank you so much Keerthana. Just what i was looking for.

Some more questions:

Is it possible to hide the stop icon that is shown in the pointer when you are dragging over the dashboard ?

Also i need to detect if the dropstop is in the dashboard or treeview in order to avoid the treeview to be rearranged.

Regards

Geirr

[Shalini Maragathavel]

Hi Geirr, 

Thanks for the update. 

Query#1: Is it possible to hide the stop icon that is shown in the pointer when you are dragging over the dashboard ? 

We checked your requirement to hide the prevent icon(stop icon) of the pointer while dragging. To achieve your requirement, we suggest you to use below CSS, 

 

 <style> 

.e-prevent-select { 

  cursor: auto !important; 

} 

.e-treeview.e-drag-item .e-icons.e-no-drop::before { 

  content: ""; 

} 

</style> 

Query#2: I need to detect if the dropstop is in the dashboard or treeview in order to avoid the treeview to be rearranged 

Based on your query, we suspect that you need to prevent the drag and drop inside the TreeView node. You can achieve your requirement by setting the args.cancel property as true based on the target in the nodeDragStop event as demonstrated in the below code snippet, 

 

<template> 

      <ejs-treeview 

        id="tree" 

        :allowDragAndDrop="true" 

        :nodeDragStop="DragStop" 

      ></ejs-treeview> 

</template> 

<script> 

export default { 

  data() {    

  }, 

  methods: { 

    DragStop: function (args) { 

      if (args.target.classList.contains("e-fullrow")) { 

        args.cancel = true; 

      } else { 

        dashboard.addPanel(panel[0]); 

      } 

    }, 

</script> 

 

Please find the below sample for your reference. 

Sample: https://codesandbox.io/s/vue-treeview-sample1-forked-54b01?file=/src/App.vue:0-2943 

API Link: https://ej2.syncfusion.com/vue/documentation/api/treeview/dragAndDropEventArgs/#cancel 

Please get back to us if you need further assistance.

Regards, 

Shalini M. 

[IT Solutions]

Thank you so much Shalini.

Both proposed solutions works as expected.

Best regards

Geirr

[Keerthana Rajendran]

Hi Geirr, 

 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

 

Regards, 

Keerthana R.