Prevent grid from resetting on data update

Prevent grid from resetting on data update

Posted by: kenny on 2 May 2019, 11:12 am EST

• 

  kenny

  • Post Options:
  • Link
    Copy

  Posted 2 May 2019, 11:12 am EST

  Having an issue with angular6 and flexGrid.

  I have a websocket which is sending data updates (sometimes several per second), they’re being stored in an id indexed object as we only really care about the most recently sent update. IE something like:

  
  let dataStore = {}
  msgRecieved(msg => {
  	dataStore[msg.id] = msg
  });
  
  

  Right now I’m binding that to the itemsSource attribute of the angular template. This works fine and updates the grid without issues.

  The problem I’m running into is that if I apply any kind of modifications to the table (ie adjust col widths, order, etc) those reset back to default after an update comes in.

  I would ideally like only the singular effected row to render and maintain all user modifications made to the table.

• 

  kenny

  • Post Options:
  • Link
    Copy

  Posted 2 May 2019, 11:15 am EST

  Sorry forgot to add, the index object is converted to an array before passing to flexgrid template

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 4:01 am EST

  Hello,

  The grid resets itself because it is assigning a new item source every time the data is updated. Therefore, instead of assigning the new data to the item source of flexgrid, you can add it to the collectionView object of the grid. Please refer to the sample below:

  https://stackblitz.com/edit/angular-5dtz54

• 

  kenny

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 4:14 pm EST

  Thanks for the demo, I thought it might have something to do with using a collection view but hadn’t had a chance to delve too much into it yet.

  I tried implementing a collectionView and storing in ngrx, however that didn’t seem to work as each time the ngrx collectionView was updated it would send a basically brand new collectionView to the component.

  So I funneled the data updates directly into component and used a collectionView there, but I’m still having a problem with my implementation it seems like.

  
  public cvs= {}
  
  handleData(data) {
      const item = {
        id: data.TTNumber,
        TTN: data.TTNumber,
        Format: '---',
        type: data.geoPosition.type,
        symbol: data.symbol,
        location: data.geoPosition.coordinates[0] + ', ' + data.geoPosition.coordinates[1]
      };
      data.matchingFilterIds.map(filter => {
        if (this.cvs[filter]){
          let existingIndex = -1;
          this.cvs[filter].items.map((row,i) => {
            if (row.TTN === item.TTN) {
              existingIndex = i;
            }
          });
          if (existingIndex > -1) {
            this.cvs[filter][existingIndex] = item;
          }
          else {
            this.cvs[filter].items.push(item);
          }
          this.cvs[filter].refresh();
        }
        else {
          this.vcs[filter] = new wijmo.CollectionView([item]);
        }
      });
    }
  
  

  The handleData function fires several times a second with updates.

  So this is a bit more complex then maybe needed for illustration purposes. Essentially data that comes in is tagged with applicable filters that the item applies to. The data is displayed in a tabular format for each filter, with each tab displaying a table of the data. So a data item may have 0 or more filters. Which means it could appear on 0 or more tables.

  So the code iterates through the applicable filters first. Checks whether a CV has been created and stored for that filter, and if not it simply creates it and stores a reference to it. If it already exists it iterates through the items first to see if the record already exists, and if so updates it. If it doesn’t exist it just appends it, then refreshes the CV.

  The template looks something like:

  
  <div *ngFor="filter in filters">
  	<wj-flex-grid [itemSource]="cvs[filter]"/>
  </div>
  
  

  What I’m experiencing is that when the first data item comes in - it loads fine, but subsequent items or updates don’t seem to load.

  I have a feeling you’re going to tell me I can’t store a reference to a collectionView like that, and once it’s passed to the grid, it’s only stored internally.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2019, 8:04 am EST

  Hello,

  The data is not updating because the data is getting updated using indexers here:

  this.cvs[filter][existingIndex] = item;
  

  This will not work since the collectionView class does not store data in indexes. Instead, you could use the splice method to update the data in the items property of collectionView just like you are using the push()

  
  this.cvs[data.country].items.splice(idx, 1, data);
  
  

  Please refer to the updated sample below:

  https://stackblitz.com/edit/angular-urhrtr