Table below demonstrates the problem with table containing custom controls and Responsive extension.
To replicate the problem, perform the following steps:
- Reduce window size so that Rating column becomes hidden.
- Click on green (+) icon to show additional details. Star rating control will not be shown.
This problem occurs because Responsive extension performs rendering after the call to function defined by
drawCallback option. Therefore custom control initialization performed in
initRating() doesn’t see markup produced by renderer of Responsive extension and custom controls appear uninitialized.
This behavior is observed in Responsive extension versions 1.0.x and 2.0.0.
The solution is to override the default renderer for Responsive extension, call default renderer to produce an output and initialize control before returning rendered output to jQuery DataTables to display.
This solution will work only with Responsive extension 2.0.0 and up. In this version responsive-display event has been added which is triggered when details for a row have been displayed, updated or hidden.