Any way to defer modal rendering?

tacman1123

I have a custom function for the modal renderer, and it appears that it renders during the page load (via ajax/serverside).

I would like to defer loading the modal data until the user specifically requests it. That way, I could even have my own fetch within the modal that gets additional data from an external resource.

        modalRenderer = ( api, rowIdx, columns ) => {
            console.log(rowIdx);
            let data = api.row(rowIdx).data();
            let params = {data: data, columns: columns, globals: this.globals};

the console is showing the rowIdx even before the table loads.

allan

I'm not sure what the context is here I'm afraid. Where is the modal coming from - Responsive, Editor, somewhere else?

Allan

tacman1123

Responsive.

            responsive: {
                details: {
                    renderer: modalRenderer,
                    display: DataTable.Responsive.display.modal({
                        header: function (row) {
                            var data = row.data();
                            return 'Details for ' + data.clientName;
                        }
                    })
                }
            },

allan

Thanks for the clarification. And if I recall correctly this is with Bootstrap? The answer is that no, there is no way to delay the modal creation at this time with the built in modal display.

This is the code and as you'll see I have it creating the modal up front. I do that for performance reasons, so it can be reused when needed at a later date.

If you need a different method, then you could create a custom display controller for Responsive if you like.

Allan

tacman1123

Yes, bootstrap.

But modals are rarely called! And a delay in creating the modal seems appropriate, whereas creating every modal during table load significant in both time and memory. Especially since modals are only open one at a time, whereas the other responsive option, to put the extra columns beneath the primary row can be open at the same time.

Since the modal renderer is simply a function, please consider not calling that function until the modal is activated.

Alternatively, how would I go about creating a custom display controller for Responsive?

allan

You could more or less copy the Bootstrap integration there. All of my built in display controllers for Responsive assume a synchronous response (there is no need for async support, since the built in ones only ever display the data which is already available locally).

The responsive.details.display documentation has some detail about created a display renderer.

However, I'm wondering if using Responsive's modal is needed for this. I don't know the details of what you are working on, and perhaps you only want the modal when a column has been hidden, but if it is showing other information as well, perhaps you'd be better just displaying your own modal and not having Responsive doing anything.

Allan

tacman1123

Indeed, I really should just have my own modal, rather than embedded it in responsive. I know it's out of datatables core code, but are there any vanilla javascript examples (not jQuery) of how to add a modal button to a row?

kthorngren

This example shows how to add a row click event to show an alert with row information. Replace teh alert with the modal solution you are using.

Kevin

kthorngren

Sorry you asked for a non-jQuery event handler. See this example.

Kevin

tacman1123

Thanks. That gets the whole row, I have links to pages within the tds, so I'll need a button.

I'd like to be able to add my own data attributes at the row (tr) level, so I can add a stimulus controller, then listen for clicks on the stimulus target (the modal button). Is that possible?