Combobox inside Flexgrid's TopLeft template not working properly

Combobox inside Flexgrid's TopLeft template not working properly

Posted by: weide.zhu on 24 June 2024, 1:27 pm EST

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 24 June 2024, 1:27 pm EST

  hi,

  we added a combobox inside the flexgrid’s ‘topLeft’, something like

  <wj-flex-grid #grid [itemsSource]=“data” [allowSorting]=“false” [autoSizeMode]=“‘Both’” [allowResizing]=“‘Both’”
  
  [deferResizing]=“true”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘TopLeft’” *ngIf=“customTopLeft”>
  
  <wj-combo-box [itemsSource]=“[‘item1’, ‘item2’, ‘item3’, ‘item4’]” [minLength]=1 [showDropDownButton]=true >
  
  
  
  

  But when we click the dropdown array of the combobox, it selects the while grid sometimes instead of showing up the list of items in the combobox.

  to reproduce this issue, u can use the wijmo demo sample at https://developer.mescius.com/wijmo/demos/Grid/CustomCells/CellTemplates/Overview/angular

  1. insert the following code into the ng template ‘[cellType]=“‘TopLeft’”’

  <wj-combo-box [itemsSource]=“[‘item1’, ‘item2’, ‘item3’, ‘item4’]” [showDropDownButton]=true >
  
  

  2. increase the width of the column header

  3. make sure the grid is not in ‘select all’ state

  4. click the dropdown several times

  we tried the work-around like this

  grid.hostElement.addEventListener('mousedown', (e: any) => {
    const ht = grid.hitTest(e);
    if (ht.cellType == wjcGrid.CellType.TopLeft) {
      console.log('prevent');
      e.preventDefault();
      e.stopImmediatePropagation();
    }
  });
  

  but it does not seem to help.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2024, 3:06 pm EST

  Hi,

  This query has already been answered on our other portal, here’s a copy of the response -
  
  It seems like an unexpected behavior for the FlexGrid control so we have forwarded this issue to the dev team for further investigation with internal tracking ID - WJM-34214. We will update you when we have an update from the dev team.

  For now, to avoid this issue you can use the following workaround -

  grid.hostElement.addEventListener('click', (e: any) => {
              if (wjcCore.hasClass(e.target, 'wj-glyph-down')) {
                  const ht = grid.hitTest(e);
                  if (ht.cellType == wjcGrid.CellType.TopLeft || ht.cellType == wjcGrid.CellType.ColumnHeader) {
                      e.stopImmediatePropagation();
                  }
              }
          }, true);

  Please refer to the following sample demonstrating the same - https://jscodemine.mescius.io/share/9_w8j734AUS04bhTD1psIw/

  Regards