Flexsheet: dropdown implementation on cell level instead of column level

Flexsheet: dropdown implementation on cell level instead of column level

Posted by: sasmita.swain2014 on 3 June 2018, 5:38 pm EST

• 

  sasmita.swain2014

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 June 2018, 5:38 pm EST

  Hi,

  We are using flexsheet with angular 2, In Flexsheet there is a column where we need to populate dropdown only for some rows based on some condition. we don’t require the whole column to be dropdown.

  For this purpose i have used column.dataMap = [‘1’,‘2’] which converting the whole column to dropdown, But we need at Cell level.

  Please provide any solution for the above requirement.

  Thanks,
  
  Sasmita

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2018, 9:12 pm EST

  Hi,

  DataMaps can only be set at the column level, so if you wish to dropdown at the cell level, you can opt one of the following two approaches:-
  
  1). Remove dropdown button for dataMap of the unwanted cell using itemFormatter. However, the datamap will still be used internally.
  
  Sample code:- https://stackblitz.com/edit/angular-5auonn?file=app%2Fapp.component.ts

  2). Remove dataMap from the column and add a dropdown for required columns using item formatter.
  
  Refer to following sample for the same:- https://stackblitz.com/edit/angular-m9nv2r?file=app/app.component.ts

  ~Manish

• 

  vishakha.panchal

  • Post Options:
  • Link
    Copy

  Posted 18 December 2019, 3:35 am EST

  HI ,

  I am kind of having the same issue with angular 8. But, I am looking for cell level in a specific row. But I am not able to add drop down .

  I am using wijmo flex grid, for other columns I was able to add the drop down but for the specific cell I am not able to add. I applied your logic but it didn’t work.

  Please provide solution for the above requirement.

  Thanks,
  
  Vishakha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 December 2019, 5:37 pm EST

  Hi Vishakha,

  You can use the cell templates to show the ComboBox for a particular cell. Please refer to the code snippet and the sample link below:

  <wj-flex-grid [itemsSource]="source" (initialized)="initGrid(grid)" #grid>
  	<wj-flex-grid-column header="Country" binding="country">
  		<ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell" let-item="item">
        <!-- if the id is 2 then show the combobox -->
  			<wj-combo-box *ngIf="item.id === 2 else default" [itemsSource]="_countries" [(selectedItem)]="cell.value">
  			</wj-combo-box>
        <!-- else show the default editor -->
  			<ng-template #default>
  				<input type="text" class="wj-grid-editor" [(ngModel)]="cell.value" />
  		      </ng-template>
  		</ng-template>
  	</wj-flex-grid-column>
  	<!-- other columns -->
  </wj-flex-grid>
  

  https://stackblitz.com/edit/angular-edtv4e

  Cell Templates: https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_grid.wjflexgridcelltemplate.html

  Regards,
  
  Ashwin

• 

  vishakha.panchal

  • Post Options:
  • Link
    Copy

  Posted 20 December 2019, 4:26 am EST

  Hi Ashwin,

  Thanks for your help, it worked on cell level.

  I have another question .
  
  On that column, I want to disable specific cell that means no one should be able to edit the cell.I am using wijmo grid.

  Please provide solution for the above requirement.

  Thanks,
  
  Vishakha

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 December 2019, 9:56 pm EST

  Hi Vishakha,

  You can handle the beginningEdit event of the FlexGrid and prevent the editing of the cell using the cancel property:
  
  In HTML:

  <wj-flex-grid [itemsSource]="source" (beginningEdit)="onBeginEdit(grid, $event)">
  ...
  </wj-flex-grid>
  

  In TS:

  onBeginEdit(s, e) {
      if(s.columns[e.col].binding === 'country' && s.rows[e.row].dataItem.country === 'US') {
        e.cancel = true;
      }
    }
  

  You may refer to the sample link below:

  https://stackblitz.com/edit/angular-m1bpbr

  In this sample, the country cell with ‘US’ cannot be edited.

  ~regards