which control to use for dynamic <ul><li> model

Question

User-153404742 posted

Hi,

I'm used to working with treeview but not sure if I can accomplish what I need...I'm actually trying to create a dynamic treeview structrue but using <ul> <li> nested tags....the <li> tag will have a few attributes added based on the node (whether it's a folder or an actual file...)...example is below:

<li data-active="false" data-id="2" data-type="pdf" data-path="https://some.path.com/filename.doc" style=""><i class="fileicon fas fa-file-pdf"></i><span>FileReport.pdf</span></li>

Is there an asp.net control besides treeview that has the <ul> <li> elements?  I can use repeater I believe but how do I make it dynamic?  Parent REpetear control would have the top <ul> tab but then each <li> could have nested <ul> which could have nested tags etc.... there is no limit to how deep the structure can be so it needs to be fully dyanmic.

Answer 1

User475983607 posted

The DataList or ListView can create a unordered list <ul>.

https://stackoverflow.com/questions/10578824/how-to-generate-unordered-list-dynamically-in-asp-net/10584967

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.datalist?view=netframework-4.8

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.listview?view=netframework-4.8

A Repeater will also work.

Answer 2

User-153404742 posted

These controls don't have events for nodes...like the treeview structure does....is there not a way to make treeview control render with <ul> <li> tags instead of table structure?

Answer 3

User409696431 posted

I don't think there is.  There used to be "CSS friendly control adapters" to change how some Webforms controls were rendered, but that wasn't kept up to date (2006, 2007), and I don't think you can even find a link to it anymore, or if they would work, if you could.

Is there any reason you can't use a TreeView for what you want, even though it renders as table elements?  You can modify its styling using CSS for the elements it does render, and add CSS attributes in code behind to specific nodes if they meet some criteria.