[URGENT] dynamic simple hierarchial tree view using Jquery to display sharepoint list items-Kindly help

Question

[URGENT] dynamic simple hierarchial tree view using Jquery to display sharepoint list items-Kindly help

sweetu ve 286

i have below fields in SharePoint list and i need to read and display the list item in below tree view format

Tree view List

Name-Single line of Text
Category-Choice field

Name category Unique ID Parent ID
Apple Title 100
Avocado Main 101 100
Avo sub 102 101

Expected output(Sample)

-Apple
[] Avocodao
[] Avo

Accepted answer

1 additional answer

Your answer

Answer 1

MichaelHan-MSFT 18,126

It's impossible to achieve this just using JQuery, you have to use JSOM to achieve this. You need to create a new column named "Parent" for your list. This is a lookup column and it does look-up to its list.

Below is my script demo for you, it is in the below demo.txt file. And you need to change the list name and column name in the code if necessary.

14816-demo.txt

Test result:

Reference:

https://www.linkedin.com/pulse/display-category-list-tree-view-blog-site-sharepoint-hai-nguyen

sweetu ve 286 Reputation points

2020-07-31T12:18:45.887+00:00

Many Thanks. unfortuantely it is not working as it is displaying categories title only in the page also i added in script editor.I did not get error not sure whats preventing to fetch the list items.
sweetu ve 286 Reputation points

2020-08-02T13:16:55.75+00:00

Kindly help if any troubleshooting for the same. I am not sure as unable to find the exact error unfortunately list items not getting displayed

Thanks in advance
MichaelHan-MSFT 18,126 Reputation points

2020-08-03T02:05:31.76+00:00

As I said, you need to change the list name and column name in my demo code if you have different one. As the below :

Also, you could provide some screeshots of your list, so I could help you better.

Besides, you could use F12(developer tools) in chrome browser to check if there is any error in console.
sweetu ve 286 Reputation points

2020-08-03T03:54:19.667+00:00

Thanks for the inputs.

I have used the same column /list details similar to the above code.

Additionally, i ran the code in chrome browser and checked with developer tools its displaying below error details.

Failed to load. No access control allow origin error is present on the requested resource .origin is therefore not allowed access.

Exception while trying to access stylesheet rules, error:failed to read the cssrule property from CSSstylesheet,cannot access rules.

uncaught type error:Failed to execute
sweetu ve 286 Reputation points

2020-08-03T12:28:09.907+00:00

Many Thanks for your help and inputs.

Is it possible to modify the same with jstree checkbox plugin,since multiple items selections is much easier but not sure if it has any limitation.

Also, i would need to redirect the each item of the dispform aspx page to the new window/tab in the <a> tag.

Kindly help.

Answer 2

MichaelHan-MSFT 18,126

I have updated my code in the below attachment, please check it.

15413-demo.txt

Share via

[URGENT] dynamic simple hierarchial tree view using Jquery to display sharepoint list items-Kindly help

1 additional answer

Your answer