Generate a new TreeView using the checked checkboxes from a current TreeView

I am currently working on implementing a dynamic user access feature for specific nodes within an existing treeview that is also dynamic.

The primary TreeView that I am using contains checkboxes and gets populated from a database. Additionally, there is a separate table in the database where the user access settings for this TreeView are stored.

However, I have encountered an issue while trying to set the user access permissions. The main treeview does not support "3-state checkboxes," and certain Nodes' Ref-IDs are not included in the postback. I have been utilizing the following JavaScript code:

Treeview in web form check child nodes on parent node check

It is not feasible for me to rebuild a new treeview based on the data from the postback due to missing Parent Node (Ref-Node) information that is excluded from the postback.

The issue I am facing can be seen in the highlighted image of the treeview below. When deselecting cabinet 2, room 2 gets deselected as expected. However, Location 1 and Demotop also get unchecked because the reference Node to Room1 (Location 1) is not considered in the checked checkboxes during the action, causing the reference in the database to be lost.

[ []

javascriptasp.nettreeview

Answer №1

Opted for a Dynatree instead of the traditional treeview component.

Received guidance from: How can I read parent nodes with partially selected child nodes

The following code successfully resolved my issue: 

    $(function () {
        $("#tree").dynatree({
            checkbox: true,
            selectMode: 3,
            onSelect: function (select, node) {
                var selKeys = $.map(node.tree.getSelectedNodes(), function (node) {
                    return node.data.key;
                });
                var partsel = new Array();
                $(".dynatree-partsel:not(.dynatree-selected)").each(function () {
                    var node = $.ui.dynatree.getNode(this);
                    partsel.push(node.data.key);
                });

                selKeys = selKeys.concat(partsel);                 
            },
            onClick: function (node, event) {

                if (node.getEventTargetType(event) == "title")
                    node.toggleSelect();
            },
            onDblClick: function (node, event) {
                node.toggleSelect();
            },
            onKeydown: function (node, event) {
                if (event.which == 32) {
                    node.toggleSelect();
                    return false;
                }
            }           
        });
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tabulator and its convenient scrollable column feature allows for easy navigation

In case my tabulator column is exceeding its length, is there a way to enable scroll functionality for that specific column? Although the resizable rows feature permits users to resize and view all the content, can a scrollbar be implemented exclusively ...

javascriptjqueryhtmlbootstrap-4tabulator

Insert several elements into each array that are the same

$ node > A = [0, 1, 23] [ 0, 1, 23 ] > B = A [ 0, 1, 23 ] > A.splice(0, 3) [ 0, 1, 23 ] > B [] > A [] > A = A.concat([1, 2]) [ 1, 2 ] > B [] Indeed, the code execution sequence yields the expected results. However, do you think there ...

javascriptarraysnode.js

webpack encountered an issue: The configuration.module contains an unidentified property 'loaders'

Upon starting the server with npm run start, I encountered the following error message: ✖ ｢wds｣: Invalid configuration object. Webpack has been initialized using a configuration object that does not comply with the API schema. - Configuration cont ...

javascriptnpmwebpackloader

How to import a template from a different webpage in AngularJS

I have a situation where I need to include a template from one HTML page into another because they are both lengthy and it's not practical to keep them on the same page. Therefore, I have decided to separate them for better organization. Here is an ov ...

javascripthtmlangularjstemplatesangularjs-ng-include

Troubleshooting: Resolving the "npm ERR! missing script: start" Issue

I'm encountering the error below: npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\..\AppData\Roaming\npm-cache\_logs\2019-04-27T18_02_39_6 60Z-debug.log Th ...

javascriptnpmpackage.json

I'm experiencing issues with my AJAX as it fails to post or respond after the user clicks on the submit

I am currently working on implementing a list of events, each with a tick box and an x box for marking the event as complete or deleted. The challenge I'm facing is that when I click the buttons, nothing happens without refreshing the page. I suspect ...

javascriptmysqlajaxreal-time

What is the best way to incorporate modules into the client side of TypeScript projects?

I'm currently developing a TypeScript project for client-side JavaScript code. Prior to using TypeScript, I used to import a module in vanilla ES6 JavaScript like this: import * as THREE from 'https://threejs.org/build/three.module.js'; H ...

javascriptnode.jstypescriptnpm

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

javascripthtmlangularjs

The canvas loadFromJson function fails to implement the font-family property

I have implemented the following code to display Google font and update the canvas: /* on change of font, load the preview and update the canvas */ $('#font').on('change', function () { $('.font_preview').show ...

javascriptjquerycanvasfabricjs

Jquery Position behaving unexpectedly during initial invocation

My goal is to have the autocomplete menu open above the input box if there is not enough space below it. The code functions properly, except for the initial render. It consistently displays at the bottom in the following scenarios: 1. When starting a searc ...

javascriptjqueryhtmlcssjquery-ui

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...

javascripthtmlcssperformance

When using axios to perform a post operation, the Firestore Cloud Function sends back an undefined response to the

Hello there, I am currently facing an issue with processing payments using Firestore Cloud Function and a payment Gateway named Yoco. The payment code seems to be functioning correctly as it is returning either a success or failure object. However, the p ...

javascriptreactjsgoogle-cloud-firestore

The system has encountered an issue: "EntityMetadataNotFound: Unable to locate metadata for the entity named 'User

Just wanted to reach out as I've been encountering an issue with my ExpressJS app recently. A few days ago, everything was running smoothly without any errors. However, now I'm getting a frustrating EntityMetadataNotFound: No metadata for "User" ...

javascriptnode.jstypescripttypeorm

How to sort objects by keys in AngularJS

Currently, I am working on building a sorting list using AngularJS. The goal is to have the data updated in the DOM dynamically when a user clicks on the name of a value. I am attempting to order the values by categories such as Bracelets, Charms, Earrings ...

javascriptarraysjsonangularjs

How can I use AJAX to read a CSV file uploaded by a client in C#?

My current project involves the scenario where a user needs to choose a CSV file from their local system. It is then necessary for me to read the contents of this file and display them on a JQGrid. The catch? This all needs to work smoothly in Internet E ...

c#jqueryasp.netajaxjqgrid-asp.net

Tips for updating values in an Angular model and pushing it to an array with the specified index

I am currently facing an issue with my Angular Model as I attempt to add it to an array in order to generate repeated fields. The purpose of this array is to then be looped through in order to create HTML fields within a component. However, during the proc ...

javascriptarraysangularangularjs

What are the steps to ensure a successful deeplink integration on iOS with Ionic?

Recently, I was working on a hybrid mobile app for Android/iOS using Nuxt 3, TypeScript, and Ionic. The main purpose of the app is to serve as an online store. One important feature involves redirecting users to the epay Halyk website during the payment pr ...

javascripttypescriptvue.jsionic-frameworkcapacitor

extracting key-value pairs from nested arrays in javascript objects

As a beginner in javascript, I am facing an issue that may seem basic to others. Here is the json data I am working with: { "statusCode": 200, "status": "success", "data": [ [ { "city": "Alexandria", ...

javascriptarraysjson

How do I go about showing every character on a separate line using a for loop?

var input = prompt("What is Lance attempting to convey?"); //user enters any text for (var i = 0; i <= input.length; i++) { var output = input.charAt(i); if (output == "e" || output == "o" || output == "a" || output == "u") { outp ...

javascriptstringfor-loop

Exploring new classes with jQuery's .not() and :not()?

I am working on a memory game where I need to flip cards and check if two are equal. My issue is that I do not want the function to run when clicking on a card that is already flipped, or on another flipped card. I tried using jQuery's .not() and :no ...

javascripthtmljquery