Treeview ID support


Topic: Treeview ID support

GiltnerDev pro premium priority asked 3 years ago

I was wondering how to get the ID values from the LI in the Tree view selectable lists when a checkbox is selected. Every function call seems to just return the ID of the div that it is in, which is "treeview" just like in the example on the page. For example, say I selected two boxes and pressed a submit button, I am unable to get the LI id values for each of the selected items. I also looked into assign an ID to the checkboxes themselves, but found out that the ID would just be the same for every checkbox in the list. Any input would be much appreciated, as I am using JavaScript for all of the interactions.


Michał Duszak staff answered 3 years ago

Hello, you could programatically look for selected checkboxes and get its parents. See snippet below as I prepared a working example for you:

https://mdbootstrap.com/snippets/standard/m-duszak/3633839#js-tab-view

const getIdsButtonEl = document.querySelector('#getIdsButton');
const treeviewEl = document.querySelector('.treeview'); 
const firstUlEl = document.querySelector('#firstList');
getIdsButtonEl.addEventListener('click', () => {
  const checkboxes = [].concat(...Element.prototype.querySelectorAll.call(firstUlEl, 'input[type="checkbox"]'));
  const checkedCheckboxes = checkboxes.filter(checkbox => checkbox.checked);
  const checkedCheckboxesParents = checkedCheckboxes.map(checkbox => checkbox.parentElement);
  const checkedCheckboxesParentsIds = checkedCheckboxes.map(checkbox => checkbox.parentElement.getAttribute('id'));
  console.log(checkedCheckboxesParentsIds)
});

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No