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.
Hello! In your
initRatingfunction you set the
readOnlyproperty to true, so nothing happens when trying to change the rating. Setting this to
falsewill fix this. I apologize if I missed something. Thanks for your efforts!
John, thanks for your suggestion. My goal was to show how initialize custom controls with Responsive extension. In the meantime specific configuration of the control is up to the developer, my article just shows read-only rating control as an example.
This case does not work when I put readonly in false
How to add bootstrap switch on it? So it works as in your example.