Responsive not working with Column Render.

washuit-iamm

https://live.datatables.net/hehoditi/5/edit

The docs say:

Default Value: display

Applying the orthogonal option from the docs fixes it https://live.datatables.net/hehoditi/7/edit, but it does not explain why it does not simply use the display value as the docs say. Why would responsive.orthogonal magically cause nodes to be supported?

colin

That just needs a defaultContent - see updated example here. This is needed if there's static data being rendered for that column.

Colin

washuit-iamm

@colin

That still does not work. Am I missing something?

Also the link to defaultContent 404s.

kthorngren

I can't speak to why Responsive renders the displayed data different from what is displayed in the table. However using $("<span>Hello World</span>").get(0 does return an object. Possibly you can just return the HTML string, ie, return "<span>Hello World</span>";. It will be displayed in the table and in Responsive correctly.

Plus just returning a string is more efficient as jQuery functions won't be called twice;, $(("<span>Hello World</span>") and .get(0), for each cell. Each cell may be rendered multiple times for searching, sorting, etc on initialization and during certain operations. See this updated example:
https://live.datatables.net/hehoditi/10/edit

Also the link to defaultContent 404s.

es, it should be columns.defaultContent.

Kevin

washuit-iamm

@kthorngren @colin I will try that. In reality my render function is quite a bit more complex so I chose that as a sample. Would you recommend converting this whole thing to a string?

"render": function (data, type, row, meta) {

    if (type !== "display") {
        return data
            .map(x => x.Name).join(", ");
    }

    if (!data.length) {
        return "";
    }

    var contacts$ = data
        .map(function (contact) {

            var contactContainer$ = $("<span>");

            var contactTitle = ((contact.Description === null || contact.Description === "") ? "" : `${contact.Description}<br />`) +
                ((contact.SecondaryEmailAddress === null || contact.SecondaryEmailAddress === "") ? "" : `<span class='bi bi-envelope-fill'></span>: ${contact.SecondaryEmailAddress}<br />`) +
                ((contact.HomePhoneNumber === null || contact.HomePhoneNumber === "") ? "" : `<span class='bi bi-telephone-fill'></span>: ${contact.HomePhoneNumber}<br />`) +
                ((contact.OfficePhoneNumber === null || contact.OfficePhoneNumber === "") ? "" : `<span class='bi bi-telephone-fill'></span>: ${contact.OfficePhoneNumber}<br />`);

            var cellNullOrdEmpty = (contact.CellPhoneNumber === null || contact.CellPhoneNumber === "");

            var link = dataTableUtils.buildURLToResourceCreated("Contacts", "Id", contact.Id)
            var contact$ = $("<div class='card px-1 m-1' style='max-width: 18rem;'>")
                .attr("title", contactTitle)
                .append($(`<a target="_blank" href="${link}"><strong>${contact.Name}</strong></a>`))
                .append($("<small>").html(`<span class='bi bi-envelope-fill'></span> ${contact.EmailAddress}`))
                .append($("<small>").html(`<span class='bi bi-telephone-fill'></span> ${cellNullOrdEmpty == true ? "<span class='text-warning'>No cell on file.</span>" : contact.CellPhoneNumber}`))

                .tooltip({
                    html: true
                });

            contactContainer$.append(contact$);

            return contactContainer$;
        });

    var newTdContent = $("<div>");
    contacts$.forEach(function (server) {
        newTdContent.append(server);
    });

    return newTdContent.get(0);
}

washuit-iamm

I still don't understand how this fixes it? No other changes, how is this not a bug?

responsive: {
        orthogonal: 'responsive'
    },

https://live.datatables.net/hehoditi/7/edit

colin

Sorry, yep, I entirely misread your comment - I missed the comment about Responsive and thought you were referring to the main table.

This thread here discusses the issue you're seeing. Here's your example update - the magic is this line, which ensures the nodes are kept in sync,

     responsive: {
        details: {
          renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
        }
     },

Colin

washuit-iamm

@colin Thank you, I will test here shortly. Just curious about the internals though:

Allan: it recreates the data to display using the render callback (and without passing it through createdCell).

If my render call back returns a node why wouldn't it just work out of the box without listHiddenNodes()? Is createdCell responsible for converting a node to an element in the cell and because it does not pass through it never gets attached or whatever?