[Question] How to utilize Dropdown from Common widgets using javascript?

Hello I am implementing a custom dropdown using javascript. I would like to utilize DropDownButton widget which is a part of Common widgets: here.

Below is example of what I am trying to do:

Dropdown: { name: 'dropDownButton', // use custom button to replace bond/atom buttons widget: Kekule.Widget.DropDownButton, // important, set the widget class text: 'Button', hint: 'Example Dropdown', id: 'btnDropDown', showDropDownMark: true, buttonKind: 'K-Kind-DropDown', dropDownWidget: exampleButtonGroup, htmlClass: 'custom-dd-button' }

dropDownWidget: [Button Group]

let exampleButtonGroup = [] exampleButtonGroup.push( { name: 'exButtonGroup', widget: Kekule.Widget.ButtonGroup, // important, set the widget class id: 'btnGroup1', showText: true, showGlyph: true, htmlClass: 'custom-group-button', childDefs: childInfos } )

Children:

let childInfos = [ {widget: Kekule.Widget.RadioButton, text: 'child1', className: 'custom_child_button'}, {widget: Kekule.Widget.RadioButton, text: 'child2', className: 'custom_child_button'}, {widget: Kekule.Widget.RadioButton, text: 'child3', className: 'custom_child_button'}, {widget: Kekule.Widget.RadioButton, text: 'child4', className: 'custom_child_button'}, {widget: Kekule.Widget.RadioButton, text: 'child5', className: 'custom_child_button'} ];

It would be a great help if you can provide Demo/Example on how we can implement Common Widgets using javascript.

Hi, @vinayrajkhunti, the following code may help you to create DropDownButton instance in JavaScript:

// first create child buttons in drop down widget
let childBtn1 = new Kekule.Widget.RadioButton(document);
childBtn1.setText('child1').addClassName('custom_child_button');
let childBtn2 = new Kekule.Widget.RadioButton(document);
childBtn2.setText('child1').addClassName('custom_child_button');

// the create the drop down widget and add child buttons to it
let exampleButtonGroup  = new Kekule.Widget.ButtonGroup(document);
childBtn1.appendToWidget(exampleButtonGroup);
childBtn2.appendToWidget(exampleButtonGroup);

// At last the drop down button
let myDropDownButton = new Kekule.Widget.DropDownButton(document);
myDropDownButton
  .setId('btnDropDown')
  .setText('Button')
  .setHint('Example Dropdown')
  .setButtonKind(Kekule.Widget.Button.Kinds.DROPDOWN)
  .addClassName('custom-dd-button')  // set properties of dropdown button
  .setDropDownWidget(exampleButtonGroup)  // assign the dropdown widget
  .appendToElem(document.body);  // insert to an existing element

Another way is to use the createFromHash util method of widget:

let myDropDownButton =Kekule.Widget.createFromHash(document, {
  id: 'btnGroup1',
  showText: true,
  showGlyph: true,
  htmlClass: 'custom-group-button', 
  widget: Kekule.Widget.ButtonGroup,
  children: [
    {widget: Kekule.Widget.RadioButton, text: 'child1', htmlClass: 'custom_child_button'},
    {widget: Kekule.Widget.RadioButton, text: 'child2', htmlClass: 'custom_child_button'}
  ]
});

let myDropDownButton = Kekule.Widget.createFromHash(document, {
  widget: Kekule.Widget.DropDownButton,
  text: 'Button',
  hint: 'Example Dropdown',
  id: 'btnDropDown',  
  buttonKind: Kekule.Widget.Button.Kinds.DROPDOWN,
  dropDownWidget: exampleButtonGroup,
  htmlClass: 'custom-dd-button'
});
myDropDownButton.appendToElem(document.body);

The current demos of common widgets are very simple and far from suffcient, I may add more in the future. btw, the drop down button widget perhaps are not suitable for the chem tool buttons in composer currently, since it can not be checked and can not be groupped with other chem tool radio buttons.

partridgejiang / Kekule.js

[Question] How to utilize Dropdown from Common widgets using javascript? #91