Flexgrid top-left cell selecting all cells

Flexgrid top-left cell selecting all cells

Posted by: sicrum on 29 May 2018, 1:48 am EST

• 

  sicrum

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 May 2018, 1:48 am EST

  Hello

  In our project we have a FlexGrid with templated top-left cell:

  <wj-flex-grid [hidden]="itemsNumber==0"
                #dealsGrid
                [itemsSource]="deals"
                [allowResizing]="0"
                [autoGenerateColumns]="false"
                [itemFormatter]="itemFormatter"
                [isReadOnly]="true"
                [autoClipboard]="true"
                [selectionMode]="'CellRange'">
      <template wjFlexGridCellTemplate [cellType]="'TopLeft'" let-cell="cell">
          <columns-filter [grid]="dealsGrid" [tableName]="tableName"></columns-filter>
      </template>
  

  Columns-filter component has a button inside. When I click on this button I am getting all cells selected like this:
  
  https://www.screencast.com/t/jWIEbGzdu

  This is click event handler:

      toggle(ev) {
          this.visible = !this.visible;
          ev.stopPropagation();
      }
  
  

  , but it doesn’t help. Cells are selected prior to this event is triggered.

  Any ideas?

  Thanks

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 29 May 2018, 4:53 pm EST

  Hi,
  
  For this, you should handle mousedown event and prevent default action. Please refer to the following code snippet:

  theGrid.hostElement.addEventListener("mousedown",(e)=>{
  	let ht= theGrid.hitTest(e);
  	if(ht.cellType== wjGrid.CellType.TopLeft){
  		e.preventDefault();
  	}
  });
  

  Hope it helps!

  ~Manish

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 29 May 2018, 7:37 pm EST - Updated 3 October 2022, 7:32 am EST

  Now cells are not selected but button placed in top-left is not “clickable” anymore

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 May 2018, 11:06 pm EST

  Hi,
  
  We are sorry, we are unable to replicate the issue at our end while we use button for TopLeft Cells.

  Please refer to the sample for the same:
  
  https://stackblitz.com/edit/angular-vqfp6l?file=app/app.component.html

  If the issue persists, please update the sample to replicate the issue at our end.

  ~Manish

• 

  sicrum

  • Post Options:
  • Link
    Copy

  Posted 2 June 2018, 5:13 pm EST

  Hello, thanks for your reply.
  
  I was able to fix button issue, but now having new one.

  Take a look at video:
  
  https://www.screencast.com/t/oxNMAY8lO

  So, when I click exactly on checkbox - it’s ok.
  
  But when I click on label then cell/row selection follows mouse click position.

  Here is updated example (click T to open popup):
  
  https://stackblitz.com/edit/angular-xxcutj?file=app/app.component.html

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2018, 12:34 am EST

  Hi,
  
  For that you need to handle the mousedown event for div and call preventDefault() method to stop the grid from handling clicks.

  Please refer to the updated sample for the same:-
  
  https://stackblitz.com/edit/angular-7hnr4v?file=app%2Fapp.component.ts

  ~Manish