How to initialize controls in row details with jQuery DataTables and Responsive extension

I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.

On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.

Normal page with lower resolution:

Using the Chrome Dev Tools' Console: I can excecute this:

$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });

And the controls now are display correctly.

So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.

CAUSE

This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.

SOLUTION

You need to re-initialize those controls that become part of row details in a separate function.

The solution is to:

define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.

Example:

var table = $('#example').DataTable({
    responsive: {
        details: {
            renderer: function (api, rowIdx, columns) {
               var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
                $(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
                return $details;                    
            }
        }
    },
    createdRow: function( row, data, dataIndex ){
       $(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });    
    }
});