Adjusting Columns

menashe

Hi,

As suggested, I am using code similar to

                setTimeout(function() {
                    pricesEditor.field('action.action_id').dt().columns.adjust();
                    pricesEditor.field('prices.taxrate_id').dt().columns.adjust();
                }, 200);

to adjust the column display in Nested DataTables.

This concept (similar code; not the specific above code) works well when the Editor is opened and voila--there is the nested DataTable.

But, using Bootstrap 5, I also have some Tabs, such that the nested DataTables are not immediately visible. The above code does not work!

With Tabs, if you close the Editor and then reopen, the last displayed Tab opens as the default, and then the now-visible nested DataTable is adjusted.

By I (apparently) need to adjust Tabs that are not currently open/visible??

kthorngren

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

Thank you! I was just using what Allan suggested.

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

kthorngren

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

I am using Pills (similar to Tabs).

Is there a corresponding event listener? (e.g., shown.bs.pill)?

kthorngren

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

Maybe this SO thread will help.

Kevin

menashe

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

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

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

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

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

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

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