Parent Child Checkbox [IDs, Attributes, Relation] - Follow Up

Tags: #<Tag:0x00007f135f68c210> #<Tag:0x00007f135f68c0d0>

Good morning, all,

First of all this is a follow up question that came up while working on the following topic:
Parnet Child Checkbox - Getting help / Questions - Handsontable Forum


My request does not have to be that complicated where given one of the child-row-id then I need to find its parent.

What I would really like to achieve is when a child row, its checkbox gets checked/true then all of its siblings disabled

For the demo we can resume on the following one done by @aleksandra_budnik
https://stackblitz.com/edit/33qu8p?file=index.js


For my work, I tried something like the following but that was not working :cry:

Please do not be a lot of attention to my code as I was not sure if I was doing it right and then moved to keep debugging and gave up.

  afterChange: function (changes, source) {
    if (source === 'edit') {
      changes.forEach(([row, col, oldValue, newValue]) => {
        console.log('Changes:', changes);
        console.log('Row:', row);
        console.log('Column:', col);
        console.log('Old Value:', oldValue);
        console.log('New Value:', newValue);
        console.log('col:', col);
        console.log('hotSettingsBlu.columns.length:', hotSettingsBlu.columns.length);
  
        if (col === hotSettingsBlu.columns.length - 1 && newValue === true) { 
          console.log('Checkbox checked for row:', row);
          const orderNo = '1022999'; 
          //console.log('Order number:', data.OrderNo);
          hotDataBlu.forEach((data, index) => {
            console.log('Checking row:', index);
            console.log('Data OrderNo:', data.OrderNo);
            console.log('Is it the same row?', index === row);
            console.log('row:', row, "index: ", index);
             
            if (data.OrderNo === orderNo && index !== row) {  
              console.log('Disabling checkbox for row:', index);
              // hotTableComponentBlu.current.hotInstance.setDataAtCell(index, hotSettingsBlu.columns.length - 1, false); 
            }
          });
        }
      });
    }
  }

As you can see here const orderNo = '1022999'; I started statically for troubleshooting

    function getParentIndexes() {
      const parentIndexes = [];
      let parentIndex = 0;
      for (let i = 0; i < sourceDataObject.length; i++) {
        if (sourceDataObject[i].hasOwnProperty('__children')) {
          parentIndexes.push(parentIndex);
      parentIndex += sourceDataObject[i].__children.length + 1;  }  }  return parentIndexes;  }

I do know for sure that ParentIndexes and its siblings they will always always share same unique ID/OrderNumber/InventoryID col.

Thanks a lot!

Hi @noajm

I added your hook to our example at https://stackblitz.com/edit/33qu8p-j3gdhu?file=index.js and when I uncheck a checkbox it all seems fine.

checkboxes

Please tell me what am I missing to replicate the issue.

Sorry, I think I over explained my request.

I really just need to be able to disable all checkbox rows within only one parent block if any one of the child checkbox was checked.

This can be applied to any of the parent blocks.

Basically, a user can ONLY pick one Artist from each Category.

Here is your demo updated with child unique that can help finding a child sibling.

https://33qu8p-iy9wfm.stackblitz.io

Ah I see.

So in this case a good idea is to get the indexes of groups, and save their values like

group1 = [{index: 0, value: null}, {index:1, value: false}, ...., {index: 5, value: true}]

and then run the afterChange hook on that. Reference: https://handsontable.com/docs/javascript-data-grid/api/hooks/#afterchange

This hook will give you the index of the change (row index) and the new value. Based on that you will be able to run the setDataAtCell() in a loop to alter the rest of the values in the group.

For better performance i also recommend wrapping those setDataAtCell() calls with a batch().

That is a good point. However, I do know that fetching these indexes is strangely complicated, as the index of Parent[B].Child[A] is different if Parent[A] Children was expanded, and will give me a different result when they are collapsed also.


idk I think I should never collapse child rows and just live with that option as might things easier.

or expand > calculate > collapse again. If other operations that take part during rendering are not heavy this operation might even happen so fast that won’t be noticable for the user.

Very Smart!

Thank you again and this ticket can be closed.

Great. Thank you.