FlexGrid - Select row and also open detailed grid

FlexGrid - Select row and also open detailed grid

Posted by: eveverad3 on 9 November 2018, 5:16 am EST

• 

  eveverad3

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 November 2018, 5:16 am EST

  Hello Team,

  Working with Angular 2 Wijmo 5
  
  I would like to be able to have on the left side of my grid the possibility to open a detailed grid on every row and also to have the possibility to select the row with a checkbox.

  As I have implemented it for now, I am only able to have the select check boxes or the + for opening the detailed grid but not both.

  I have already implemented the detailed grid part using ```
  
  <ng-template wjFlexGridDetail #detail let-item=“item” [detailVisibilityMode]=“‘ExpandMulti’”>…

  
  I am open also open to alternative ways of selecting, for example using the Shift + Mouse click or Ctrl+ Mouse click if this is possible.
  
  An example here: (please un comment the gridDetail part to see what I mean in my question.) https://stackblitz.com/edit/angular-crfblf?embed=1&file=src/app/app.component.html
  
  
  Thanks,

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 12:53 am EST

  Hi,

  You may add push extra column on rowHeaders collection and then use formatItem to display checkbox in that extra column.
  
  Please refer to the following updated sample:
  
  https://stackblitz.com/edit/angular-gw96f3?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  eveverad3

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 6:55 am EST

  Thank you Sharad,

  Resolves my issue.
  
  The only problem is that the header checkbox is not ‘firing’ the selection or un selection of the row checkboxes.

  The variable that contains the selected rows works fine, but visually the result is not as expected.

  Could you please have a look.

  Thanks and regards

• 

  eveverad3

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 7:10 am EST

  It seems that by adding row.grid.invalidate();
  
  on every row when I do a selectAll or deselectAll solves the above problem.

  Regards,