Topic: Treeview -how to decleratively set the active -selected item

Yiannis Kyriazidis free asked 2 years ago

How can we set the active item in the list of items ? So that when the treeview is rendered the specific list item is expanded and focused (as if user clicked on it) I tried setting the active class on the list item but did'nt work.


Yiannis Kyriazidis free answered 2 years ago

thank you. I am using this in a sidebar menu and I know the li element of the link, but not the parent ul. Can you please adjust the example so based on an li element that has a class equal to class= 'active" the javascript wIll find the parent ul and attach an id to it so i can then call the javascript method you have created so that the parent is expanded and the selected li element is active ? Thank you .

Michał Duszak staff commented 2 years ago

I have prepared a snippet in which, on a button call, the script looks for a li with class equal to class='active'. Then it assigns it an ID required for expand() method. Then it expands, and then it removes the ID since it's no longer neccessary. It looks for the closest parent to expand it, so I believe it pretty much needs your requirements. What do you think?

Yiannis Kyriazidis free answered 2 years ago

what does the treeview.filter method do ? maybe that can be used to set a custom condition and expand to the list item that has class="active" ?


expandInstance.filter ('.active');

Michał Duszak staff commented 2 years ago

It works like a search. It will expand list basing on the content of the li element

Yiannis Kyriazidis free commented 2 years ago

thanks . good to know.

Michał Duszak staff answered 2 years ago

You can expand your treeview to the particular list using the expand(ID) method.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: windows desktop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes