Improve Handling of Recursive Parent Checkbox Toggling in Tree with Checkboxes.

[srgloureiro]

The Tree with checkboxes needs to have a smarter way to deal with recursive parent checkbox toggling,

So, I have a tree with three hierarchical levels:

• ☑ House

  • ☑ Room
    • ☑ Person

  and I need to persist checkbox state changes immediately to the backend when a user toggles them.

  I have the following code:

  <script type="text/javascript">
      var tree = undefined;
  
      var dataBound = false;
  
      $(document).ready(function () {
  
          tree = $('#myTree').tree({
              primaryKey: 'id',
              uiLibrary: 'bootstrap4',
              dataSource: '/Profile/GetPersonRooms',
              checkboxes: true,
              dataBound: function (e) {
                  dataBound = true;
              }
          });
  
          tree.on('checkboxChange', function (e, $node, record, state) {
  
              if (!dataBound) {
                  return;
              }
  
              // not final leafs of the tree
              if (record.id === null) {
                  return;
              }
  
              // no changes
              if (record.checked == true && state == "checked" || record.checked == false && state == "unchecked") {
                  return;
              }
  
              $.ajax(
                  {
                      url: '/Profile/TogglePersonRoom',
                      data: { personID: record.id },
                      method: 'POST',
                  })
                  .fail(function (e) {
                      alert('Failed to save.');
                  }
                  );
          });
      });
  
  </script>
  

  On this example, I am intentionally not defining the id on non-final nodes, because there is nothing there I need to pass to the back-end. Only the final nodes have the record.id defined.

  My current code works well for individual leaf nodes. However, it fails when toggling a node with more than a few descendants, due to excessive simultaneous AJAX requests. The backend becomes protective and emits the following error:

  "The request queue limit of the session is exceeded".

  I propose one of some ways of dealing with this issue:

1. Event with All Descendants: Provide an event, or extend the already existing chain of events to have a way of capturing an array of the toggled element itself and ALL THE descendants, where which element has at least the following info fields: {id, oldState, newState}. Then I would filter this array getting only the elements I need and pass it as a parameter to the back-end.

2. Event with Toggled Descendants: Very alike to the 1. one. Provide an event, or extend the already existing chain of events to have a way of capturing an array of toggled the element itself and ALL TOGGLED descendants, where which element has at least the following info fields: {id, oldState, newState}. Then I would pass it as it is as a parameter to the back-end.

3. In-Built Queue System: Have an in-built queue that allows to handle sequentially requests, to only do one $.ajax callback at a time to the back-end. I could have code similar to the one I posted here, but specifying somewhere on it that I want the calls to the back-end to be managed by such queue system.

Additional Context:
I am not a Javascript nor a jQuery expert; I have already explored a bit on the debounce, throttle and rate limiting approaches, and none of them are adequate for this type of algorithm, as no one guarantees all the $ajax call requested are really executed.

Implementing any of these solutions would greatly enhance the usability and performance of the Gijgo Tree component in applications that require immediate persistence of checkbox states.

Thank you for considering these improvements.