Buttons lose styling after sorting, filtering or paging
Buttons lose styling after sorting, filtering or paging
chrisdcc
Posts: 2Questions: 0Answers: 0
I put together an example DataTable here, https://codepen.io/cdixson/pen/zYqPBVd It uses the latest DataTables, Buttons, Responsive, and RowGroup. I'm running Chrome 85 (Windows).
I'm using the RowGroup extension to group employees by the 'sector' they work in. A sector can have a supervisor (in my example, two sectors, 04 & 17, have a supervisor assigned.) If a sector has a supervisor, I disable the button above the rowGroup. I use StartRender within RowGroup to build and style the buttons. Right now, the buttons do nothing.
The issue I'm having is that if I change the sorting, filtering or paging, the disabled buttons lose their style. I understand that after one of these events (sorting, filtering, or a change to paging characteristics) the table is redrawn and the RowGroup functionality runs again, but the button styling reverts to the initial, enabled state. What's even stranger is that if I slightly change the size of the browser window with my mouse, the disabled button style reappears. Any idea what's going on?
I've experimented with saving the button state and reapplying each button's style within initComplete and/or drawCallback but that just seemed the make things even more confusing so I removed them from the example above.
Thanks, -Chris
Replies
columns.renderis not the place to manipulate the contents of the RowGroup row. I would move that code into therowGroup.startRenderfunction. I didn't dig into to see how you are determining if the button is enabled or not. But you have access to the rows in the rowGroup with therowsparameter. I suspect that something in that data is the interesting data for enabling or disabling the button. This way the code is executed each draw. Withcolumns.renderthis is not always the case plusoption columns.renderiterates each row which means you are enabling or disabling the button for each row - seems inefficient.Kevin
Thanks. Moving my button rendering code into rowGroup.startRender fixed the issue.
For those that are curious, here's how I got it working correctly, https://codepen.io/cdixson/pen/dyMdeMZ