Footable is used for a mail inbox, with rows loaded via AJAX and unread mails marked as bold using custom CSS implemented in the JSON on the server side. When expanding a row, the goal is to remove the css-class, achieved through:
.on({'expand.ft.row': function(e, ft, row){
row.$el.removeClass('text-bold');
//do something on the server side (database update)
}
})
While this method works well, it does not apply to the expanded row itself. Attempts to target the expandend footable-detail-row using $(row.$el).next('.footable-detail-row tr').removeClass(...) fail because the event is triggered before the row is fully expanded.
The issue appears to be related to the classes being stored within the underlying footable data or row object, posing challenges in accessing and modifying them.
Assistance in resolving this matter would be greatly appreciated.
https://i.sstatic.net/KoD2u.png
After expansion, the row remains unbolded except for the extended column: