CheckBox Indeterminate State
In addition to the basic checked and unchecked states, the Telerik CheckBox has a third indeterminate state. From UX perspective, the indeterminate state means that the CheckBox is neither checked, nor unchecked.
Basics
To put a CheckBox in the indeterminate state, set its Indeterminate parameter to true. You can use two-way binding for the parameter or the IndeterminateChanged event. A Value change by the user clears that state and the user cannot restore it on their own. A true indeterminate state is only set by the application logic.
The Indeterminate parameter controls the indeterminate property of the standard HTML <input type="checkbox" />.
You can set the Indeterminate parameter to true, no matter if:
- The component
Valuetype isboolor nullablebool?. - The current component
Valueistrue,false,ornull. Depending on the Telerik CSS theme and currentValue, the CheckBox indeterminate state may look different.
Using the CheckBox Indeterminate parameter
Examples
Possible use cases for the indeterminate CheckBox state are:
- A CheckBox is bound to a nullable boolean property and the current
Valueisnull. - A "parent" CheckBox is related to multiple "child" CheckBoxes that have different values. Another example for such a built-in behavior is a TreeView with CheckBoxes.
Null Value
The following sample shows how to:
- Set the
Indeterminateparameter totrueautomatically when the CheckBoxValueisnull. - Use the CheckBox
ValueChangedevent Enable users to toggle between all three possible CheckBox values:true,false, andnull.
Using CheckBox Indeterminate when the Value is null
Related CheckBoxes
The following sample shows how to set the Indeterminate parameter of a "parent" CheckBox, depending on the Value of several "child" CheckBoxes.
Using CheckBox Indeterminate with related CheckBoxes