General Interface is an open source project hosted by the Dojo Foundation

Disabling edit mask controls in Matrix

First there are two types of edit masks in Matrix (editable grid Matrix control).

The first type is the always-on edit mask such as : button, checkbox, radio button, etc. An always-on edit mask is always displayed without user action.

The second type is the non-always-on edit mask such as : textbox, select, datepicker, etc. These editmask are display only when user focus on the cell.

Always on edit masks

Always on edit mask, such as checkbox and button, are disabled by the jsxdisabled="1" in the CDF record E.g.

  <data jsxid="jsxroot">
  <record jsxid="WEBM" jsxtext="WEBM" open="10" close="1" jsxdisabled="1"/>
Non-always on edit masks

Disabling the Non-always-on edit masks means preventing the cell focus from displaying the mask control. You can do so by adding code logic to Before Edit event handler to evaluate to false. For example, set the event property "Before Edit" with following code fragment (follwing sample disables the non-always-on edit mask ,such select/combo.

 if (objCOLUMN.child(0).instanceOf(jsx3.gui.Select)) false;

To disable both the non-always-on and always-on edit mask on the same row and thus disabling the entire row, you can take advantage of the jsxdisalbed record property and use that as the condition. Add the following to the Before Edit event

 if (this.getRecord(strRECORDID).jsxdisabled == 1) false;

Non-always-on edit mask of an entire column can be disabled by setting event property Before Edit (Following code disables the "comboColumn" by evaluating to false in Before Edit event handler).

These sample code fragment goes into the event handler it self, but the code fragment is not part of a function, so should not use return statement. It should simply evaluate to true or false.
if (objCOLUMN.getName() == "comboColumn") 
else {
  jsx3.log('EVENT: (jsxbeforeedit). Record: ' + strRECORDID);

Follow similar logic to disable edit mask of a cell based on different factors such as the value of the another column. In "Befor Edit" event property, this code

 if (this.getRecord(strRECORDID).status == "Deployed" 
    && objCOLUMN.getName() == "selectMachine" ) 

will disable the "selectMachine" cell (column) if status cell (column) has the value "Deployed".

Disabling individual always on control

That's nice but what about displaying the always on edit mask, like button and checkbox, as disabled?
For example, you like to display one checkbox in a checkbox column as disabled.

There's only one checkbox mask control object under a checkbox column, so you can't disable just one checkbox in an entire column of checkbox by simply calling checkboxMask.setEnabled(0); after the Matrix is painted. That won't work.

To display (paint) disabled always-on-edit-mask you will have to provide your own format handler. Remember that the format handler allows developer to customize the display of each cell. So here's an example

// Setting this format handler to a Checkbox column will disable the checkbox 
// of the record with jsxid="WEBM" (as an example).

var checkFormat = function(objDiv, strCDFKey, objMatrix, objColumn, rowIndex, objServer) { 
  if (objMatrix.getRecord(strCDFKey).jsxid == "WEBM") {
    var checkmask = objColumn.getChild(0); 
    var html = checkmask.paint();
// override the cell's innerHTML with a disabled checkbox.
    objDiv.innerHTML = html;

The Format Handler property of the checkbox column will be set to checkFormat


matrix matrix Delete
disable disable Delete
edit edit Delete
mask mask Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.