0

Is it possible to implement the logic - when parent row is selected all its child rows are selected as well with lightning web component and tree grid?

HTML:

<lightning-tree-grid
        key-field="name"
        data={treeItems}
        columns={columns}
        onrowselection={setSelectedRows}
        expanded-rows={requestExpandRows}
        selected-rows={selectedRows}>
</lightning-tree-grid>

JS file:

 @api locationId;
 @api allPO;

 @track data;
 @track error;


 @track selectedRows = [];
 setSelectedRows(){
          var selectRows = this.template.querySelector('lightning-tree-grid').getSelectedRows();

          if(selectRows.length > 0){
               var tempList = [];
               var tempListExpanded = [];
               selectRows.forEach(function (record){
                         tempList.push(record.id);
               })
               this.dataObj.forEach(function (record){
                        if(tempList.includes(record.id)){
                            record.items.forEach(function (child){
                               //tempListExpanded.push(record.id);
                               tempList.push(child.id);
                            })
                        }
                    })
               this.selectedRows = tempList;
               //this.requestExpandRows = tempListExpanded;
               console.log(this.selectedRows);
          }
      }

 @wire(getTreeGridData, { input: '$myValue', allAccs : '$allPO'})
 wireTreeData({
     error,
     data
 }) {
     if (data) {
         //  alert(data);
         this.setExpandedRows(data);
         var res = data;
         var tempjson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
         console.log(tempjson);
         this.dataObj = data;
         this.data = tempjson;

         this.setSelectedRows(data);
     } else {
         this.error = error;
     }
 }

I wanted to implement something like that. The problem is onrowselection function has no access to @track variables.. Probably there are different execution contexts. Is there any workaround how we can make it possible with lwc?

Expected behavior:

enter image description here

  • not sure to which track you refer-you add the listener in your component and you have also access to every track it owns? I am also not sure where you got "childRows" from - the passed selected Rows have unfortunately only the information if it has children or not. I would suggest to continue with: 1. you can use the passed event.target to call the component method, 2. write a method to find the position of added node, 3. write a method which starts from this position and recursively call it if it has children to build a list of selected ids - then update your code example if you have issues – Renji-xD Jun 27 at 11:29
  • @Renji-xD Seems it's done. Works as expected. Thank you for your time! - now the question how can I know that the row was unselected? (to unselect the child as well) – Valentine Potapov Jun 27 at 22:28
  • you have to manually compare the old selectedRows property against the the data returned by getSelectedRows in your event handler- find the element which is present in selectedRows but not in the new list. There is no other provided information i am aware of – Renji-xD Jun 27 at 23:45
0

After a couple of hours - I implemented solution:

HTML:

<lightning-tree-grid
        key-field="name"
        data={treeItems}
        columns={columns}
        onrowselection={setSelectedRows}
        expanded-rows={requestExpandRows}
        selected-rows={selectedRows}>
</lightning-tree-grid>

JS file:

 @api locationId;
 @api allPO;

 @track data;
 @track error;


 @track selectedRows = [];
 setSelectedRows(){
          var selectRows = this.template.querySelector('lightning-tree-grid').getSelectedRows();

          if(selectRows.length > 0){
               var tempList = [];
               selectRows.forEach(function (record){
                         tempList.push(record.id);
               })
               this.dataObj.forEach(function (record){
                        if(tempList.includes(record.id)){
                            record.items.forEach(function (item){
                               tempList.push(item.id);
                            })
                        }
                    })
               this.selectedRows = tempList;
               console.log(this.selectedRows);
          }
      }

 @wire(getTreeGridData, { input: '$myValue', allAccs : '$allPO'})
 wireTreeData({
     error,
     data
 }) {
     if (data) {
         //  alert(data);
         this.setExpandedRows(data);
         var res = data;
         var tempjson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
         console.log(tempjson);
         this.dataObj = data;
         this.data = tempjson;
     } else {
         this.error = error;
     }
 }

It works fine now, once you select the parent row - child rows are selected automatically. If you know how to improve an algoritm - please suggest some changes!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.