Radio Group Work flow

Bindable Properties

1. items
2. inputId
3. readableItem
4. options
5. otherInfo
6. extDisabled
7. evtClickCallback

Overview

• Repeats the radio buttons as per items array values.
• On load radio button will be active based on inputId.
• Click functionality on each radio button.
• 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;
• Radio Elm's -
  • Radio icon's width : 36px;
  • min-with : 80px;
• inputId can be integer or string, based in options.propId.

Breakdown

• Defaults will be set.
• On page load, active radio button will be set based on inputId.
• Setting active radio button
  • As per inputId == item[options.propId], Active block will display
• On click of any radio button
  • If disabled is false, set the active radio button.
  • If click call back is defined, call the callback by passing data.
• On css override
  • .cst-radio-group-container-override : Container Class
  • .cst-radio-group-element-override: Element Class
• If we pass readableItem as blank object, we will get selected object in readableItem.