TIBCOmmunity: General Interface Blog : Tags : column

Simply adding HTML for a checkbox to a matrix Column header results in a checkbox that doesn;t get checked or unchecked in response to mouse clicks.

The challenge in the implementation is that the Matrix headers are designed to use the mousedown event to reorder columns and trigger sort behaviors. This means that the click event on the checkbox gets intercepted and canceled by the header and clicking on the checkbox never causes the checkbox to get checked.

To address, use the mousedown event on the checkbox to toggle the checked state (see code below). It is also critical to cancel event bubbling to stop the Matrix from sorting and reordering when the user's intention is to check or uncheck the box.

Lastly, note that the checkbox described below is XHTML compliant. This is important if you intend your app to ever run on an XHTML Web page (and it's simply good practice these days to author well-formed HTML).

 <input type="checkbox" 
onmousedown="this.checked = !this.checked; jsx3.gui.Event.wrap(event).cancelBubble();" 
onclick="jsx3.gui.Event.wrap(event).cancelBubble();return false;" 
onmouseup="jsx3.gui.Event.wrap(event).cancelBubble();" />

Darren Hwang (channeling Luke Birdeau)