Answers

• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  May 17 Answer ✓

  Nothing - they just aren't native events, so monitorEvents won't see the events in question.

  Perhaps you can post a test case showing the issue you are seeing so I can offer some help?

  Allan
• ayz Posts: 63Questions: 23Answers: 1

  May 17

  I'm trying to create a React component around DT (modelling after your Vue component) but need the events to bubble out. For some reason, adding event listeners to the ref within the component has no effect. So that informed me troubleshooting at dev tools level first.
• ayz Posts: 63Questions: 23Answers: 1

  May 17

  The strange thing is in dev tools, I see the "select-dt" in the Event Listeners tab. So React is setting it up correctly. Why its not responsive is the mystery.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  May 17

  In the Vue library they had to be re-exported which was a bit of a pain. Not sure if React will need something similar.

  A React library is getting near the top of my list for new dev work (currently in second position)! So I'd be most interested in how you get along with it.

  Allan
• ayz Posts: 63Questions: 23Answers: 1

  May 17 edited May 17

  @allan: I presumed to re-export, I first needed to detect which is where I got stuck.

  Just experimented and stumbled on something. It appears even though I initialized using non-jquery method, it's still returning a jquery event object. Hope I stated that right.

  Here's what I had in the wrap-around component earlier:

  // preceding code
  
  new DataTable(dtRef.current, {
              columns: [
                  { title: 'Name' },
                  { title: 'Position' },
                  { title: 'Office' },
                  { title: 'Extn.' },
                  { title: 'Start date' },
                  { title: 'Salary' }
              ],
              data: dataSet,
              select: {
                  style: 'single'
              }
          });
  
  dtRef.current.addEventListener('select.dt', handleEvent) //handleEvent just console.logs "hello"
  
  // when above event listener didn't work, I replaced with the following hack:
  
  const rf = document.querySelector('#example_wrapper')
  rf.addEventListener('select.dt', handleEvent);
  
   // rest of code
  

  Neither worked. So I assigned the initialized DT to a variable thus const rf = new DataTable(dtRef.current, {...

  Then rf.on('select', handleEvent)

  This worked perfectly leading to my conclusion.

  rf.addEventListener('select.dt', handleEvent) gives the error rf.addEventListener is not a function

  However I prefer to not use jquery directly in React as recommended, if possible. What am I overlooking here in terms of getting a jquery event back?
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  May 17

  It is a custom event, so addEventListener won't see them (a frustrating I've banged my head against as well). I don't think there is an alternative to using jQuery here. DataTables has it as a dependency, so it won't increase your package size at all.

  Allan
• ayz Posts: 63Questions: 23Answers: 1

  May 17

  strange: I never came across the fact that it doesn't catch custom events in all my searches.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  May 17

  I'm not really seeing much on the topic either, but there is this thread. I think I did something similar to figure it out - debugging in jQuery to see what was happening. It was a little while ago now though, so I might be making up memories

  Allan