If I have a menu to which I’d like to add items via JavaScript, then how can enable checkboxes?
<smart-menu id=”menu”></smart-menu>
<button id=”ads” onclick=”AddItems()”>Add items</button>
function AddItems() {
let menu = document.getElementById(‘menu’);
let subMenu = document.createElement(‘smart-menu-items-group’);
subMenu.innerHTML = ‘Item 0’
menu.addItem(subMenu)
let newItem = document.createElement(‘smart-menu-item’);
newItem.innerHTML = ‘Item 1’
menu.addItem(newItem , “0”)
}
I have tried applying:
subMenu.setAttribute(“checkable”, “”)
subMenu.setAttribute(“check-mode”, “checkbox”)
newItem.setAttribute(“checked”, “”)
But that did not work. Is there a way to add checkbox enabled items dynamically?
Hi Tünde Keller,
In order to enable ‘checkbox’ mode or other dynamically for a specific SmartMenuItemsGroup, simply set the checkable property to the target SmartMenuItemsGroup. CheckBox mode is set as the default checkMode. You can change that as well if you need. For example in your code:
function AddItems() {
...
let subMenu = document.createElement(‘smart-menu-items-group’);
subMenu.checkable = true;
subMenu.innerHTML = ‘Item 0’
...
}
SmartHTML elements are custom elements and as such they have properties that can be applied dynamically or statically. So the following code is incorrect:
In order to set those properties to the SubMenu or the menu you need to set them directly as properties. See the API for additional information.
Best Regards,
Christopher
Smart HTML Elements Team https://www.htmlelements.com
Hi Christopher,
Interesting, it still does not want to work. It’s possible that I’m misunderstanding something so I created a codepen to show what I’m trying to do: https://codepen.io/t-nde-keller/pen/abvqXEo
Hi Tünde Keller,
You also need to set checkboxes on the Menu Custom element as well. As it says in the API . We also have a : Demo with Checkbox Menu.
Best Regards,
Christopher
Smart HTML Elements Team https://www.htmlelements.com
.
