Wijmo FlexGrid DetailProvider rowHasDetails is not working

Wijmo FlexGrid DetailProvider rowHasDetails is not working

Posted by: antonbubel26 on 20 August 2019, 8:34 am EST

• 

  antonbubel26

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 August 2019, 8:34 am EST

  Hello!

  I have met an issue while working with the FlexGrid DetailProvider and can’t figure out a way with the workaround for this because it seems that it’s related to the wijmo itself. So what I need is to have details only for the specific rows, for example, for indexes 1, 3, 4, 6 in the grid with 10 rows. The issue is that the wijmo renders details on correct rows, but if I’ll open row details rows with details will be changed almost randomly.

  So, for the code, for example, we have this in the component

  
    rowsWithDetails = [1, 3, 4, 6];
  
  

  Then we’ll have a ngOnInit which will set detailsProvider, I have taken this from the Row Details for Angular 2 introduction

  
    ngOnInit() {
      this.data = new wjcCore.CollectionView(this.dataSvc.getData(10));
  
      const dp = new wjcGridDetail.FlexGridDetailProvider(this.flex);
      dp.maxHeight = 250;
      
      dp.createDetailCell = (row) => {
        var cell = document.createElement('div');
        cell.innerHTML = 'Test';
        return cell;
      }
      
      dp.rowHasDetail = this.flexGridRowHasDetails.bind(this);
    }
  
  

  And finally, a method which will detect if passed row has details

  
    flexGridRowHasDetails({ index }) {
      return this.rowsWithDetails.some(rowNumber => rowNumber === index);
    }
  
  

  Then to reproduce the issue open details under the row with Index 3 and observe the result: plus sign disappears from the row with index 4 and disappears from index 6 and appears on index 5.

  Wijmo version is 5.20183.568, also the bug reproduces on latest release version 5.20192.624

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2019, 1:15 am EST

  Hi Anton,

  This is expected behavior because when we open the detail of a row, a new row of type DetailRow is added to the FlexGrid and therefore, the index of all the rows below it changes or in your case, increases by 1.
  
  That is why when you open the detail of the row with index 3, a DetailRow is added with index 4 and the original row with index 4 now has the index of 5 and so on.
  
  To solve this issue, you may use the index of the dataItem in the collectionView of the FlexGrid instead of the row index. Please refer to the code snippet below and the sample for reference:

  flexGridRowHasDetails(row) {
  	var dataItem = row.dataItem, idx = row.collectionView.sourceCollection.indexOf(dataItem);
  	return this.rowsWithDetails.indexOf(idx) > -1;
  }
  

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

  Regards,
  
  Ashwin

• 

  antonbubel26

  • Post Options:
  • Link
    Copy

  Posted 23 August 2019, 9:25 am EST

  Thank you! It finally works for me