HTML Elements Forums Menu Adding checkbox menu items

This topic contains 4 replies, has 2 voices, and was last updated by Avatar Tünde Keller 2 weeks, 3 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #100739
    Avatar
    Tünde Keller
    Participant

    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?

    #100741
    Avatar
    Hristofor
    Participant

    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:

    
    subMenu.setAttribute(“checkable”, “”)
    subMenu.setAttribute(“check-mode”, “checkbox”)
    newItem.setAttribute(“checked”, “”)
    

    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

    #100744
    Avatar
    Tünde Keller
    Participant

    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

    #100746
    Avatar
    Hristofor
    Participant

    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

    #100748
    Avatar
    Tünde Keller
    Participant

    You are right, I have overlooked that property. Thank you, now everything is fine!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.