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.

回答1:

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 });    
    }
});