Answers

• kthorngren Posts: 20,364Questions: 26Answers: 4,777

  December 2023

  I'm not sure why you are using setTimeout(). This example shows what event to use when the Bootstrap tab is shown for columns.adjust().

  Kevin
• menashe Posts: 160Questions: 36Answers: 1

  December 2023

  Thank you! I was just using what Allan suggested.

  The product is amazing! Is there anything that you guys haven't thought of??
• kthorngren Posts: 20,364Questions: 26Answers: 4,777

  December 2023

  Thank you! I was just using what Allan suggested.

  That is usually the best answer

  The product is amazing! Is there anything that you guys haven't thought of??

  Yep, Allan has built a very solid solution with lots of capabilities.

  Kevin
• menashe Posts: 160Questions: 36Answers: 1

  December 2023

  I am using Pills (similar to Tabs).

  Is there a corresponding event listener? (e.g., shown.bs.pill)?
• kthorngren Posts: 20,364Questions: 26Answers: 4,777

  December 2023

  The shown.bs.tab is a Bootstrap event, not Datatables. I haven't used pills so not sure what events are available. Could be as simple as a click event. You will need to refer to the pills documentation. Maybe someone else will know what to use.

  Kevin
• kthorngren Posts: 20,364Questions: 26Answers: 4,777

  December 2023

  Maybe this SO thread will help.

  Kevin
• menashe Posts: 160Questions: 36Answers: 1

  December 2023

  Kevin,

  I am trying to adjust columns in an Editor, so I modified the above thread to:

          editor.on('open', function(e, mode, action) {
  
              ...
              
              // Listen for Bootstrap tab change
              $('button[data-bs-toggle="pill"]').each(function(e) {
                  e.addEventListener('shown.bs.tab', () => {
                      editor.tables({
                          visible: true,
                          api: true
                      }).columns.adjust();
                  });
              });
          });
  
  

  in the editor open event.

  This works when I have breakpoint(s) in DevTools; if I run straight through with no breakpoints, the columns are not adjusted!

  Is there some timing issue after all?
• kthorngren Posts: 20,364Questions: 26Answers: 4,777

  December 2023

  Your description says you have nested Datatables. I'm not sure why you would use the Editor open event to create the event handler. The main problem with this is that each time you open an Editor modal you will create a new event handler. This will result in multiple event handlers being executed each time a pill is opened. With nested Datatables Editor events shouldn't be needed.

  If you have pills that are hidden when creating the event handler, like this example you may need to use event delegation. Maybe something like this (copied from the example:

  document.querySelectorAll('button[data-bs-toggle="pills"]').forEach((el) => {
      el.addEventListener('shown.bs.tab', () => {
          DataTable.tables({ visible: true, api: true }).columns.adjust();
      });
  });
  

  Can you post a link to your page or a test case showing the Datatable nesting so we can see what you are doing to offer suggestions?
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• menashe Posts: 160Questions: 36Answers: 1

  December 2023

  Kevin,

  I will, if needed, create a test case, but two point:

  1. Where does the above querySelectorAll belong? After the document.ready?
     Inside it??
  2. Will this work even though the editor form does not yet exist??
• allan Posts: 61,821Questions: 1Answers: 10,127 Site admin

  December 2023

  1. Yes, put it in the document ready function. That is trigger when the document has been loaded (i.e. the elements on the page are ready).

  2. Do the button[data-bs-toggle="pills"] elements exist at that point? Or are they in the modal or somewhere else? If they exist when the page is loaded, it will work. If not, then you either need to wait until they are ready or use a delegated event listener.

  A test case would answer the questions I have.

  Allan
• menashe Posts: 160Questions: 36Answers: 1

  December 2023

  Hi Allan,

  You may have heard that if your parents did not have children, then your chances of having children is greatly decreased!

  Well, if I write pills instead of pill, I am pretty sure that the chances of the code working are way lower**!

  (And from there stems my "reluctance" to spend three hours putting together a test case, just to have you say "hey dummy...")
• menashe Posts: 160Questions: 36Answers: 1

  December 2023

  And what worked for me is:

          pricesEditor.on('opened', function(e, node, data, items, type) {
              document.querySelectorAll('button[data-bs-toggle="pill"]').forEach((el) => {
                  el.addEventListener('shown.bs.tab', () => {
                      DataTable.tables({
                          visible: true,
                          api: true
                      }).columns.adjust();
                  });
              });
          });
  

  Because at this point, the pills are defined.

  I understand that it will attach a listener every time that the Editor opens.

  How would I set it up as a delegated event listener? (Preferably to work for all Editor forms that utilize tabs.)
• allan Posts: 61,821Questions: 1Answers: 10,127 Site admin

  December 2023 Answer ✓

  You may have heard that if your parents did not have children, then your chances of having children is greatly decreased!

  Hah! I've also heard that sterility is inherited.

  The way to fix the issue with it adding every time is probably to use one() instead of on(), then it will only add it the first time.

  The delegate approach probably won't work here thinking about it a bit more I'm afraid. I had thought that Bootstrap events would bubble up the document (which is how delegates work - listen at a high level for an event, and then filter down). But according to their docs the event only happens on that element - it doesn't bubble up like a click or mousedown event.

  So we are probably stuck with this approach for the moment. If I think of something else I'll post back.

  Allan