DataMap with CellEdit

DataMap with CellEdit

Posted by: pmithilesh on 14 January 2021, 1:17 am EST

• 

  pmithilesh

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 January 2021, 1:17 am EST - Updated 3 October 2022, 5:35 am EST

  Hi,
  
  I am using latest version of wijmo.
  
  i have wijmo grid which use DataMap.but we have our own select control which needs to display on CellEdit instead of datamaps dropdown.

  below is example i have updated and if you see i want to use select control in Celledit but when i do it it gives me input type"text" control on top of drop down meaning it shows both controls datamap /select

  is there a way to fix this issue

  Thanks

  Took a example from Demo
  
  https://www.grapecity.com/wijmo/demos/Grid/Columns/DataMapEditors/angular

  <wj-flex-grid-column
  
  [binding]=“‘country’”
  
  [header]=“‘DropDownList’”
  
  [dataMap]=“dataMap”
  
  >
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell” let-item=“item”>
  
  
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘CellEdit’” let-cell=“cell” let-item=“item”>
  
  <select [(ngModel)]=“item.id”>

  {{c.name}}

  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 January 2021, 4:51 pm EST

  Hi,

  You can hide the default input editor by assigning a cssClass property to the column and use the display CSS property and set it to none.
  
  In app.component.html:

  <wj-flex-grid-column [dataMap]="dataMap" cssClass="select-dropdown" binding="country" header="Country">.....<wj-flex-grid-column>
  

  In styles.css

  .wj-flexgrid .wj-cell.select-dropdown input.wj-grid-editor {
    display: none;
  }
  
  

  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-gjukmj

  Regards,
  
  Ashwin

• 

  pmithilesh

  • Post Options:
  • Link
    Copy

  Posted 1 February 2021, 11:44 am EST - Updated 3 October 2022, 5:35 am EST

  Thanks for the solution Ashwin, solution worked
  
  I have another issue.Grid has new row creation allowAddNew = true and its showing this datamap Arrow on new row which is at bottom. I was trying to remove it but no luck with css it was removing all the arrows
  
  Thanks

  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2021, 6:18 pm EST

  You can use the following CSS to hide all the drop-down buttons from the grid:

  .wj-flexgrid .wj-cell.select-dropdown button.wj-btn span.wj-glyph-down {
    display: none;
  }
  

  https://stackblitz.com/edit/angular-9-0-0-rc-1-wgkcdr

  ~regards

• 

  pmithilesh

  • Post Options:
  • Link
    Copy

  Posted 4 February 2021, 5:42 am EST

  thanks Ashwin solution worked