Parent | Child | Previous | Next
 

How to Display a Three State Checkbox on a Grid Component

Description

Logical values stored in a database can have three states: true, false, or NULL. Representing these three values can be done using checkboxes.

Discussion

A checkbox is often used to display logical fields in an application. An unchecked box represents a false value while a checked box represents a true value. If the logical field can be NULL in the SQL database that stores the records, however, a two-state checkbox is not adequate. Both NULL and false are by default represented with an unchecked checkbox.

HTML checkboxes have a third state that can be used to represent NULL values in logical fields: "indeterminate". The indeterminate state is typically represent using a solid fill or dashed line in the checkbox. HTML does not directly support setting a checkbox to indeterminate. To set a checkbox to the indeterminate state, you must use JavaScript. For example:

var checkbox = $('{grid.componentName}.V.R{grid.rowNumber}.SHIP_SAME');
checkbox.indeterminate = true;

JavaScript can be executed when a Grid row is rendered using the server-side onExistingRowRender event, allowing you to set NULL logical checkboxes to the indeterminate state when rendered:

dim flag as l 
flag = e.rowData.dataIsNull("ship_same")
if flag then
    dim js as c 
    js = "var checkbox = $('"+e.tmpl.alias+".V.R"+e.rowNumber+".SHIP_SAME');"+crlf()+\
    "checkbox.indeterminate = true;"
    e.javascript = js
end if

For full step-by-step instructions on how to add support for three state checkboxes to a Grid Component with logical fields that support NULL values, watch the video below:

Three-State Logical Checkboxes

See Also