ColVis stateChange callback not firing in all cases

kurtstauffer

I have noticed that the stateChange callback does not fire when certain areas of the button are clicked. Please see this jsfiddle for reference. For example, when attempting to show/hide the Name column, clicking anywhere on the button besides the checkbox or the label will not fire the callback. Intuitively, this feels like a bug, but perhaps I am missing something. Is anyone else experiencing this problem?

Thanks in advance!

PahJoker

Yes, same issue here. This bit of CSS fixes it for me:

.ColVis_collection label {
    display: block;
}

kurtstauffer

Thanks PahJoker, that helped a little bit, but there is still some padding around the label that when clicked doesn't fire the callback. Seems odd to me that clicking anywhere in the <li> will trigger the column show/hide, but only when the <label> is clicked does the stateChange callback fire.

darren_whorton

I had this same issue and it baffled me until I found this thread!

It appears that the stateChange callback fires when the <label> element is clicked, and not when the column show/hide mechanisms are fired internally as I would have expected.

I used the following extension of PahJoker's CSS solution to make the <label> element take up the full width/height of the <li> container:

ul.ColVis_collection li {
    padding: 0;
}
ul.ColVis_collection label {
    display: block;
    padding: 0.5em;
    cursor: pointer;
}

kurtstauffer

Perfect! Works like a charm. Thanks so much darren_whorton and PahJoker for your help. Hopefully the DT devs will see this and fix the event so that we don't have to hack it, but this workaround will certainly work for now :)