I am seeking advice from experts on how to achieve the following desired results:
Expected workflow chart:
https://i.sstatic.net/9ZmmT.png
Here is the default view:
https://i.sstatic.net/H6xkZ.png
Scenario 1: By clicking on the number "1", all items from left to right and their children should be highlighted as shown below:
https://i.sstatic.net/3L8h2.png
Scenario 2: Following Scenario 1, if we click on the number "3", the highlight for all items from left to right and their children should be removed since 3 is considered the parent/root:
https://i.sstatic.net/qQoQP.png
Scenario 3: Back to the default view where there is no selection, selecting the number "18" should highlight all parent values like so:
https://i.sstatic.net/4H3hs.png
Scenario 4: After performing Scenario 3, clicking on the number "18" specifically should remove the highlight just for 18. There is no need to deselect parent levels when moving from right to left:
https://i.sstatic.net/3y4OT.png
Note: Deselecting parent levels from right to left is not required for any value.
For reference, here is the code: JSFiddle
$scope.setActivePrevNext = function (arr) {
let c;
arr.RowValues.forEach(e => {
e.isActive = !e.isActive; c = e.isActive;
});
index = $scope.groupOfCheckboxes.findIndex(x => x.Row == arr.Row);
childrenIndex = index + 1;
if ($scope.groupOfCheckboxes[childrenIndex] !== undefined) {
$scope.groupOfCheckboxes[childrenIndex].RowValues.forEach(e => {
e.isActive = c;
})
};
}
$scope.setBinary = function (id) {
$scope.groupOfCheckboxes.forEach(e => {
e.RowValues.forEach(item => {
if (item.td == id) $scope.setActivePrevNext(e);
})
});
}