You are here: Creating a CheckBox Using a Constructor: kony.ui.CheckBoxGroup

CheckBoxGroup Widget

The CheckBoxGroup widget allows you to make one or more selections from a group of check boxes. If you select a check box, a check mark appears inside the check box to indicate the selection.

Few real-time scenarios using the CheckBoxGroup widget are as follows:

Widgets are normally added to your application using Quantum Visualizer, but can also be added from code. For general information on using widgets in Quantum Visualizer, see Designing an Application in the Visualizer User Guide.

For general information on the CheckBoxGroup widget see the CheckBoxGroup topic in the Quantum Visualizer User Guide.

The CheckBoxGroup widget capabilities can be broadly categorized into the following:

 

Layout

EventsDescription
doLayout Invoked for every widget when the widget position and dimensions are computed.
 
PropertiesDescription
anchorPointSpecifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
height Determines the height of the widget and measured along the y-axis.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
padding Defines the space between the content of the widget and the widget boundaries.
paddingInPixelIndicates if the padding is to be applied in pixels or in percentage.
rightDetermines the lower right corner of the widget and is measured from the right bounds of the parent container.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.
 

UI Appearance

PropertiesDescription
blur You can enable or disable a blur-effect for a widget
focusSkin Specifies the look and feel of the CheckBox when in focus.
hoverSkin Specifies the look and feel of a widget when the cursor hovers on the widget.
itemOrientationSpecifies the arrangement of items inside the CheckBoxGroup widget.
opacitySpecifies the opacity of the widget.
skinSpecifies the look and feel of the CheckBox when not in focus.
shadowDepthDefines the depth of the shadow effect applied to the CheckBoxGroup Widget.
shadowType Sets a type of the shadow effect to apply to the CheckBoxGroup Widget.
wheelBackgroundColorSpecifies the background color for the wheel that is displayed when you click the CheckBox.
 

Animations

MethodsDescription
animateApplies an animation to the widget.
 
PropertiesDescription
transformContains an animation transformation that can be used to animate the widget.
widgetSwipeMoveUsed to enable and configure the left or right swipe actions for a widget.

Data Management

MethodsDescription
cloneWhen this method is used on a container widget, then all the widgets inside the container are cloned.
 
PropertiesDescription
masterData Specifies the set of values that must be displayed for the user to make a selection from the available choices.
masterDataMap Specifies the set of values from which you can make one or more selections.
 

State Configurations

PropertiesDescription
focusTickedImage Specifies the image to be displayed when you make a selection on non-touch devices.
focusUnTickedImage Specifies the image to be displayed when you clear a selection on non-touch devices.
selectedKeysIf you create a CheckBox with multiple values, you can choose to show specific values as selected when the CheckBox is rendered.
selectedKeyValues Returns the array of selected key-value pairs.
tickedImage Specifies the image to be displayed when you make a selection.
unTickedImage Specifies the image to be displayed when a selection is cleared.
 
Events Description
onSelection Invoked by the platform when an item is selected or deselected.
 

3D Touch

MethodsDescription
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.
 

User Input Handling

EventsDescription
onScrollWidgetPositionInvoked by the platform when the widget location position gets changed on scrolling.
onTouchEnd Invoked by the platform when the user touch is released from the touch surface.
onTouchMove Invoked by the platform when the touch moves on the touch surface continuously until movement ends.
onTouchStartInvoked by the platform when the user touches the touch surface.
 
MethodsDescription
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizerAllows you to set a gesture recognizer for a specified gesture for a specified widget.
 

Enabling RTL

PropertiesDescription
retainContentAlignmentHelps to retain the content alignment of the widget while applying RTL.
retainFlexPositionPropertiesHelps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignmentEnables you to change the horizontal flow of the widget from left to right.

Miscellaneous

PropertiesDescription
cursorTypeSpecifies the type of the mouse pointer used.
groupCells Specifies if the group cells style must be applied.
toolTip Specifies the hint text when the cursor hovers over a widget, without clicking it.
viewType Specifies the view type of the CheckBox.
 
MethodsDescription
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadgeEnables you to set the badge value to the given widget at the upper, right corner of the widget.
 

Configurations common to all widgets

PropertiesDescription
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
blurEnables you to make the widget look unfocused.
enableAllows you to make a widget visible but not actionable.
enableCache Enables you to improve the performance of Positional Dimension Animations.
idid is a unique identifier of CheckBox consisting of alpha numeric characters.
infoA custom JSObject with the key value pairs that a developer can use to store the context with the widget.
isVisible Controls the visibility of a widget on the form.
parent Helps you access the parent of the widget.
 
MethodsDescription
convertPointFromWidgetAllows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidgetUsing the convertPointToWidget method, you can modify the co-ordinate system.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.
 
EventsDescription
postOnclickJS Allows the developer to execute custom javascript function after the onSelection callback of the CheckBox is invoked.
preOnclickJS Allows the developer to execute custom javascript function before the onSelection callback of the CheckBox is invoked.

CheckBox Widget Basics

Note: To provide only a single selection option to the user, use a ComboBox widget or a RadioButtonGroup widget.

Creating a CheckBox Using a Constructor: kony.ui.CheckBoxGroup


var checkBox = new kony.ui.CheckBoxGroup(basicConf, layoutConf, pspConf);

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

/*Defining the properties for CheckBox with focusSkin:"chkFocusSkin", 
skin should be created with the same name through IDE or code.*/
var chkBasic = {
    id: "checkBox",
    isVisible: true,
    skin: "chkSkin",
    focusSkin: "chkFocusSkin"
};

var chkLayout = {
    containerWeight: 100
};

//Creating the CheckBox.
var checkBox = new kony.ui.CheckBoxGroup(chkBasic, chkLayout, {});

//Reading the focusSkin of CheckBox
alert("CheckBox focusSkin is ::" + checkBox.focusSkin);

Customizing Appearance

You can customize the appearance of the CheckBoxGroup widget using the following properties:

Important Considerations

The following are the important considerations for the CheckBoxGroup widget.

All Platforms

iPhone

Copyright © 2020 Temenos. All rights reserved.