I am seeking advice from experts on how to achieve the following desired results:
Expected workflow chart:
Here is the default view:
Scenario 1: By clicking on the number "1", all items from left to right and their children should be highlighted as shown below:
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:
Scenario 3: Back to the default view where there is no selection, selecting the number "18" should highlight all parent values like so:
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:
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);
})
});
}