How to implement tree view with checkboxes represent children's ?

Question

1.00/5 (1 vote)

See more:

I work on razor asp.net page model . i need to implement tree view with children's checkboxes then submit changes on every parent from selected checkboxes so are you have any sample on razor page asp.net

can you help me by provide me sample or attachement by csharp asp.net razor for tree view with children checkbox

What I have tried:

How to implement tree view with children checkbox with button submit
i need sample or link if possible

Posted 18-Jun-23 6:46am

ahmed_sa

Updated 18-Jun-23 22:44pm

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2023-06-18T14:53:00

If you are doing this for your own use and not for a large company, then you can use Modern cross-platform ASP.NET Core UI controls | Syncfusion[^] under their community license program: 1,800+ Free controls and frameworks for desktop, web, and mobile apps.[^]

Here is their TreeView control that will do what you want and more: ASP.NET Core TreeView | Advanced Tree List | Syncfusion[^]

Richard Deeming · Answer 2 · 2023-06-18T22:44:00

Here's a nice example of creating a tree view in pure HTML and CSS - you don't even need any JavaScript:
Tree views in CSS[^]

Adapting that to add checkboxes to each item is fairly simple:

HTML

<ul class="tree">
  <li>
    <details open>
      <summary><input type="checkbox" /> Giant planets</summary>
      <ul>
        <li>
          <details>
            <summary><input type="checkbox" /> Gas giants</summary>
            <ul>
              <li><input type="checkbox" name="planet" value="Jupiter" /> Jupiter</li>
              <li><input type="checkbox" name="planet" value="Saturn" /> Saturn</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary><input type="checkbox" /> Ice giants</summary>
            <ul>
              <li><input type="checkbox" name="planet" value="Uranus" /> Uranus</li>
              <li><input type="checkbox" name="planet" value="Neptune" /> Neptune</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>

JavaScript

document.addEventListener("click", e => {
	const { target } = e;
	if (!target.matches(".tree input[type='checkbox']")) { return; }
	
	if (target.matches("summary input")) {
		// Clicked on a header:
		const group = target.closest("details");
		group.querySelectorAll("input[type='checkbox']").forEach(el => el.checked = target.checked);
	}
	
	// Update the state of the headers:
	const tree = target.closest(".tree");
	tree.querySelectorAll("details").forEach(group => {
		const header = group.querySelector("summary input[type='checkbox']");
		header.checked = group.querySelector("li > input[type='checkbox']:not(:checked)") === null;
	});
});

Demo[^]

Only the checkboxes on the "leaf" nodes have names and values, so the submitted data will include the checked leaf nodes, not the header nodes. If that's not what you want, then you can add appropriate names and values to the header nodes.

How to implement tree view with checkboxes represent children's ?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0