trigger an event onDragEnd

I am trying to call a function onDragEnd. I want to pass the values as an arguments where the script displays the updated values in the console.

` onDragEnd: function (e, datasetIndex, index, value) {

				console.log(datasetIndex, index, value)
				
				this.modifyDataSet(datasetIndex, index, value);
			}`

Console.log works fine. But I dont know how to trigger a custom function. I need to project the values in a datagrid in parallel to the chart. Your help would be highly appreciated. Thanks

[chrispahm]

Hey there,

glad you could resolve your issue! As expected the error stems from the way your functions are set up. It look like for the onDragEnd function you use an ES6 arrow function, whereas for the others you don’t. Keep in mind that by not using arrow functions in JavaScript, the value of this can often be misleading.

onDragEnd: (e, datasetIndex, index, value) => { this.modifyDataSet(datasetIndex, index, value) },
onDrag: (e, datasetIndex, index, value) => { this.modifyDataSet(datasetIndex, index, value) }, 
onDragStart: (e, datasetIndex, index, value) => { this.modifyDataSet(datasetIndex, index, value) }

That should to the trick. If you got some time on your hands, I really recommend this course on all ES6 features that were implemented in JS, it really helped me understanding some of these concepts!

[chrispahm]

Hey there,

it seems like the function you are trying to call is a method within a component, so you’re probably using React or Vue.js? If that is the case, the value of your this keyword is determined by how the function is called. You can read more about the topic here.

As I don’t know about the rest of your code, one of the following might be the solution to your problem. Keep in mind that in these solutions, the value of this retains the this value of the enclosing lexical context.

Use ES6 arrow functions

I like to use those a lot because (in my yet limited understanding of programming in general) it makes the use of this more straightforward

onDragEnd: (e, datasetIndex, index, value) => {
	console.log(datasetIndex, index, value)
				
	this.modifyDataSet(datasetIndex, index, value);
}

When using a Framework (specifying the onDragEnd function externally)

Assuming you actually use a framework like React or Vue, you may have a component that looks somewhat like this (I use Vue myself so the following example will stick to that):

import Chart from 'chart.js'
// import your default chart settings externally so your code remains cleaner
import chartSettings from '~/assets/js/chartSettings.js'
import 'chartjs-plugin-dragdata'

export default {
  data() {
    return {
      myChart
    }
  },
  mounted() {
    this.createChart('my-chart-id')
  },
  methods: {
   modifyDataSet(e,datasetIndex,index,value) {
     // your logic
   },
   createChart(chartId) {
      const ctx = document.getElementById(chartId)
      // specify onDragEnd callback
      // in this scenario, the this value will work as you assume it to be
      chartSettings.options.onDragEnd = this.modifyDataSet
      
      this.myChart = new Chart(ctx, {
        type: chartSettings.type,
        data: chartSettings.data,
        options: chartSettings.options
      })
    }
  }
}

As you can see, we specified the modifyDataSet method as the onDragEnd function outside of the new Chart constructor. I really like this approach, as it keeps the code clean, easy to read and understand.

Hope this (at least partially) solves your issue! Best Christoph