0

This is how I am using treegrid component.

When I expand a treegrid row, and then collapse it, automatically onrowselection event is fired, which calls onRowSelection action handler in JS controller and unchecked my child automatically because of the onrowSelection called .how do i remove this ? what i am missing . please help me.

I found something here: https://developer.salesforce.com/forums/?id=9062I000000g8g4QAA Please some one help me to convert this to LWC. I dont know Aura component

 <lightning-tree-grid  key-field="id" 
                    show-checkbox-column 
                    data-id="grid"
                    expanded-rows={gridExpandedRows}
                    ontoggle={handleToggle}
                    onrowselection={setSelectedRows}
                    selected-rows={selectedrows}
                    ></lightning-tree-grid>
     
         

handleMethod.js

            handleToggle(ev){
        
              this.bypassrowselection = ev.detail.isExpanded;
            }
            
        setSelectedRows(event)
          {
            
            if(this.bypassrowselection) {
              return;
          }
        
            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(element => {
                     
                      element.items && element.items.forEach(record => {
                       
                     
                      if(!this.currentSelectedRows.includes(record.id) && templist.includes(record.id)) {
                        record.items.forEach(function (item){
                                           
                                              templist.push(item.id);
                                             })
                      }
                     
                     
                     
                      if(this.currentSelectedRows.includes(record.id) && !templist.includes(record.id)) {
                          record.items.forEach(item => {
                          
                              const index = templist.indexOf(item.id);
                              if(index > -1) {
                                templist.splice(index, 1);
                              }
                          })
                      }
                      
                      var allSelected = true;
                      record.items && record.items.forEach(item => {
                          if(!templist.includes(item.id)) {
                              allSelected = false;
                          }
                      })
                      
                      if(allSelected && !templist.includes(record.id)) {
                        
                        templist.push(record.id);
                      } else if(!allSelected && templist.includes(record.id)) {
                          const index = templist.indexOf(record.id);
                          if(index > -1) {
                            templist.splice(index, 1);
                          }
                      }
        
                  })
                  
                  
                })
                  
                  this.selectedrows = templist;
                 this.currentSelectedRows = templist;
               
                }    
             
                  
            
          }
4

1 Answer 1

0

I have seen the link that you provided and tried my best to convert in LWC

Html

<template>
    <lightning-tree-grid columns={gridColumns}
                         data={gridData}
                         expanded-rows={gridExpandedRows}
                         key-field="Id"
                         selected-rows={selectedRows}
                         onrowselection={handleRowSelection}
                         ontoggle={handleRowToggle}
                         ontoggleall={handleRowToggle}>
    </lightning-tree-grid>
</template>


JS


import { LightningElement, api, track } from 'lwc';

export default class MyTreeGrid extends LightningElement {
    @api gridColumns;
    @api gridData;
    @track gridExpandedRows;
    @track selectedRows;
    @track selectedRowsStored;
    @track bypassOnRowSelection = false;
    @track expandedRowsCount = 0;

    handleRowSelection(event) {
        if (!this.bypassOnRowSelection) {
            this.selectedRowsStored = event.detail.selectedRows;
        }
        this.bypassOnRowSelection = false;
    }

    handleRowToggle(event) {
        const treeGridComponent = this.template.querySelector('lightning-tree-grid');
        if (treeGridComponent) {
            const currentExpandedRows = treeGridComponent.getCurrentExpandedRows();
            if (currentExpandedRows && currentExpandedRows.length !== null && currentExpandedRows.length !== undefined) {
                if (currentExpandedRows.length >= this.expandedRowsCount) {
                    const selectedRowsStoredIds = [];
                    const selectedRowsStored = this.selectedRowsStored;
                    if (selectedRowsStored && selectedRowsStored.length > 0) {
                        for (let i = 0; i < selectedRowsStored.length; i++) {
                            selectedRowsStoredIds.push(selectedRowsStored[i].Id);
                        }
                    }
                    this.selectedRows = selectedRowsStoredIds;
                } else {
                    this.bypassOnRowSelection = true;
                }
                this.expandedRowsCount = currentExpandedRows.length;
            }
        }
    }
}

3
  • really thanks. but it didnt help Feb 25, 2023 at 18:26
  • Can you try this in your handleTogglemethod this.bypassrowselection = ev.detail.isExpanded; if (!ev.detail.isExpanded) { // Reset the bypassrowselection variable when a row is collapsed this.bypassrowselection = false; }
    – Aman Patil
    Feb 25, 2023 at 18:34
  • i tried this. not working. Feb 26, 2023 at 4:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .