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
– Teemu, Commented Feb 27, 2023 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
– Always Learn, Commented Feb 27, 2023 at 12:54
I've no clue, as there's no definition for the object this should refer in your code. Maybe this helps ..? — Teemu
– Teemu, Commented Feb 27, 2023 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
– Always Learn, Commented Feb 27, 2023 at 13:00
@Teemu I have updated as per my knowledge. Please have a look. Thanks much — Always Learn
– Always Learn, Commented Feb 27, 2023 at 13:02

E_net4 · Accepted Answer · 2023-02-27 12:44:05Z

1

To persist a variable, create it outside the function

edited Feb 27, 2023 at 12:44

E_net4

30.5k13 gold badges118 silver badges155 bronze badges

answered Feb 27, 2023 at 12:40

ProfDFrancis

9,4071 gold badge23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Always Learn Over a year ago

I tried to create outside but selection are not happening properly because of this.currentSelectedRows

Dima Hmel Over a year ago

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

Collectives™ on Stack Overflow

How to retain my array value inside onrowselect action javascript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related