How to retain my array value inside onrowselect action javascript?

Question

I have a tree grid functionality. Whenever the parent row is selected child will select automatically and vice versa. In form of tree grid structure if I choose to other parent row to select by expand/collapse row and now my previous selected value are not retaining inside my HandleRowSelection method. How do I persist my previous value?

In simple words, how do I persist my templist even though my handleRowSelection is called multiple times?

handleRowSelection(evt)
  {
   
  var treeGrid =this.template.querySelector('tree-grid');
    var selectRows =treeGrid.getSelectedRows();
    
      if(selectRows.length > 0){
        let templist = [];
          selectRows.forEach(function (record){
            
            templist.push(record.id);
          })
          
          // select and deselect child rows based on header row
          this.dataObj.forEach(element => {
              // if header was checked and remains checked, do not add sub-rows
              element.items && element.items.forEach(record => {
               
              // if header was not checked but is now checked, add sub-rows
              if(!this.currentSelectedRows.includes(record.id) && templist.includes(record.id)) {
                record.items.forEach(function (item){
                                      console.log('item',item.id)
                                      templist.push(item.id);
                                     })
              }
             
             
              // if header was checked and is no longer checked, remove header and sub-rows
              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);
                      }
                  })
              }
              console.log('now check',templist);
              // if all child rows for the header row are checked, add the header
              // else remove the header
              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; // array list will hold every selected parent & child value
     this.currentSelectedRows = templist; // array allow to add/edit child value
         
      }
     
  }

It looks like `this` would refer to event target instead of an object you've intended. — Teemu, Feb 27 '23 at 12:53
@Teemu Please explain how to do ? Please .Im hitting my head to find out.whether i need to keep two array — Always Learn, Feb 27 '23 at 12:54
I've no clue, as there's no definition for the object `this` should refer in your code. Maybe [this helps](https://stackoverflow.com/q/20586072/1169519) ..? — Teemu, Feb 27 '23 at 12:57
@Teemu Sorry Sir. But my problem is different . this.selectedrows = templist; // will hold every parent & child value this.currentSelectedRows = templist; // allow to add/edit only child value — Always Learn, Feb 27 '23 at 13:00
@Teemu I have updated as per my knowledge. Please have a look. Thanks much — Always Learn, Feb 27 '23 at 13:02

score 1 · Answer 1 · edited Feb 27 '23 at 12:44

1

To persist a variable, create it outside the function

edited Feb 27 '23 at 12:44

E_net4

27,810
13
101
139

answered Feb 27 '23 at 12:40

ProfDFrancis

8,816
1
17
26

I tried to create outside but selection are not happening properly because of **this.currentSelectedRows** – Always Learn Feb 27 '23 at 12:42
You're using `this` keyword inside your handleRowSelection method ( for example here `var treeGrid =this.template`. So in another word whatever "this" is, it's an object and it has some methods and properties. So just create a property as `this.templist =[]` in the object where you invoke the handleRowSelection method. Just right above. And then inside this function change your templist as `this.templist` – Dima Hmel Feb 27 '23 at 13:06

How to retain my array value inside onrowselect action javascript?

1 Answers1