Checkbox Group Work flow

Bindable Properties

1. items
2. inputIds
3. readableItems
4. options
5. otherInfo
6. extDisabled
7. style
8. evtClickCallback

Overview

• Repeats the checkboxes as per items array values.
• On load checkbox will be active based on inputIds.
• Click functionality on each checkbox.
• It will repeat in horizontal direction but if the width of outer div is small, it will wrap.
• Component is container responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Defaults

• !items.length, label will display = 'No data to display!'
• !options, options = empty object.
• Component container's -
  • min-width : 120px;
• Checkbox Elm's -
  • Checkbox icon's width : 36px;
  • min-with : 80px;

Breakdown

• Defaults will be set.
• Used checkbox component.
• Set checkedCheckbox
  • Create checkedCheckbox as object
  • Loop items and set items's id as the key of checkedCheckbox and equalize to false
  • On page load all checkboxes are unchecked.
• On page load, active checkbox will be set based on inputIds.
• Setting active checkbox
  • If item is not in inputIds, push the item in inputIds
  • Make item's id value true in checkedCheckbox object
  • If item is in inputIds, remove the item from inputIds
  • Make item's id value false in checkedCheckbox object
• On click of any checkbox
  • If disabled is false, set the active checkbox.
  • If click call back is defined, call the callback by passing data.
• On css override
  • .cst-checkbox-group-container-override : Container Class
  • .cst-checkbox-group-element-override: Element Class