Custom checkbox in FlexGrid

Custom checkbox in FlexGrid

Posted by: ken_perregaux on 29 May 2019, 7:00 pm EST

• 

  ken_perregaux

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 May 2019, 7:00 pm EST

  We use Angular and create all our columns in typescript. I am trying to customize a checkbox column to be two images (one for checked one for unchecked). What is the best way to achieve this. I could not find any examples. Thanks in advance.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 5:58 am EST

  Hi Ken,
  
  You may use the CellTemplate for the same. Check the cell value and place the image accordingly.
  
  Please refer to the following code snippet for reference:

  <wj-flex-grid-column [header]="'Active'" [binding]="'active'">
     <template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
     <div *ngIf="cell.item.active">
                  <img src="resources/true.png" />
     </div>
     <div *ngIf="!cell.item.active">
                  <img src="resources/false.png" />
     </div>
     </template>
   </wj-flex-grid-column>
  

  You may also use the ItemFormatter/formatItem to customize the cells. Please refer to the following demo sample for reference:
  
  https://www.grapecity.com/wijmo/demos/Grid/CustomCells/ConditionalStyling/purejs

  Hope it helps!

  Regards,
  
  Manish Gupta

• 

  ken_perregaux

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 9:51 am EST

  Thanks for the response. However, I cannot use your snippet as we create our columns in TS not HTML. Is there a way to create a wjFlexGridCellTemplate in TS? I tried the item formatter but when I click the cell nothing happens. Thanks.

• 

  ken_perregaux

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 11:27 am EST

  OK I tried a different approach. I just used CSS styling to override the checkbox functionality! Thanks for your help!

• 

  ken_perregaux

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 11:28 am EST

  	.wj-flexgrid input[type=checkbox]
  	{
  		-webkit-appearance: none;
  		padding: 6px;
  		display: inline-block;
  		position: relative;
  		background: url("../img/unpinned_dark.svg") 0% 0% no-repeat;
  		width: 24px;
  		height: 24px;
  		margin: 10px 0px 0px 16px;
  	}
  
  	.wj-flexgrid input[type=checkbox]:checked
  	{
  		background: url("../img/pinned_dark.svg") 0% 0% no-repeat;
  	}
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 May 2019, 11:09 pm EST

  Hi,
  
  Glad to know your issue has been resolved and thanks for sharing another way to modify Input Checkbox.

  When using the checkbox with itemFormatter, the default checkbox gets override with new one hence we need to handle checkbox clicked event manually and update it to CollectionView.

  Regards,
  
  Manish Gupta