Selection switch between master/detail grid assembly

Selection switch between master/detail grid assembly

Posted by: andreas.knuth on 3 July 2018, 6:00 am EST

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 July 2018, 6:00 am EST

  Hi,
  
  I’m using Flexgrid and Angular5/6. In my assembly I’ve a master/detail grid where

  1. after opening a detail row the last entry of the detail grid should be selected and no selection on the master grid is allowed
  2. after closing the detail grid the related master row should be selected
     
     I’ve created a demo for this: https://stackblitz.com/edit/angular-gpumls

  I use the b[/b] callback for the opening of the detail grid and the disposeDetailCell callback of the FlexGridDetailProvider for the closing of the detail grid.

  As you can see this only works once. But after closing the detail cell the next opening of the same row the selection mechanism doesn’t work …

  Am I using the wrong callback for closing ? or do I miss anything ?

  cheers,
  
  Andreas

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 July 2018, 7:22 am EST

  Hi,
  
  Thanks for sending the sample.

  Everything in the sample seems good except FlexGrid instances were sharing the same instance of CollectionView as their itemsSource. The problem with this is that CollectionView keeps track of currently selected item and grid also relies on this for keeping track of selection which is causing all the problem. So if you assign different instances of CollectionView to FlexGrid and it should be good to go.

  Here is the link for updated sample:-https://stackblitz.com/edit/angular-z1fsrq?file=src%2Fapp%2Fapp.component.ts

  Also please consider using the initialized event to do any initialization work.

  ~Manish

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 4 July 2018, 8:08 am EST

  Hi Manish,

  thanks for your Feedback. In my real word szenario I’m relying on different CollectionView instances for master/detail… hhmmm. I’ll have to research a bit.

  But I’m looking for a callback which is only called when the subgrid is manually closed by the User. disposeDetailCell will also be called if I’m routing away from this page …

  Because I have to store the state of the master/detail grid (subgrid open, selected row), this callback seems inappropriate.

  cheers,
  
  Andreas

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 4 July 2018, 8:18 am EST

  Hi Manish,

  sorry I have to apologize. I’m actually relying on the same CollectionView instance

  I’ll change this behaviour.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2018, 7:01 am EST

  Hi,

  In this case, you may handle the click event on parent grid and check manually if the user has closed the detailed row.
  
  Please refer to following code snippet:

  
  init(flex){
  /* some initializzation work for grid */
  	flex.hostElement.addEventListener('click',(e)=>{
  		/* get info about the user's click */
  		let ht=flex.hitTest(e);
  		/* check if user clicked on row headers */
  		if(ht.panel==flex.rowHeaders){
  			/* check if detailprovider instance exists */
  			if(this.dp){
  				/* check if click caused the detail row to collapse */
  				if(!this.dp.isDetailVisible(ht.row)){
   					/*select the required row */
  					flex.selectionMode="Row";
  					flex.select(new wjcGrid.CellRange(ht.row,0),true);
  				}
  			}
  		}
  	},false);
  }
  

  You may also refer to the updated sample:- https://stackblitz.com/edit/angular-ecfdj8?file=src%2Fapp%2Fapp.component.ts

  ~Manish

• 

  andreas.knuth

  • Post Options:
  • Link
    Copy

  Posted 5 July 2018, 8:43 am EST

  That’s it !

  Thank you so much.

  cheers,
  
  Andreas