Angular 2 Grid, how to configure readonly but selectable

Angular 2 Grid, how to configure readonly but selectable

Posted by: sricher on 30 April 2018, 4:24 am EST

• 

  sricher

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 April 2018, 4:24 am EST

  Hello,

  I have a grid with a column that is configured to be readonly, but I would like users to still be able to select the values with the mouse (either drag or double click). The column displays an id:

  
  
  <wj-flex-grid-column [header]="'Id'" [binding]="'masterTransactionId'" [isReadOnly]="true" [width]="60" format="formatNumber(this, f)"></wj-flex-grid-column>
  
  
  

  I can copy paste the value since I can select the cell, but I can seem to get the configuration to have the text in the cell selected. How can I achieve this?

  Thanks!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 April 2018, 5:25 pm EST

  Hi Sricher,
  
  For this, you need to use CellTemplate and use InputTextBox with readOnly property which will allow to copy the data but not editing. Please refer to the following code snippet:

  <wj-flex-grid-column [header]="'Id'" [binding]="'masterTransactionId'" [isReadOnly]="true" [width]="60" format="formatNumber(this, f)">
  	<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
  		<input type="text" [ngModel]="cell.item.masterTransactionId" readonly />
  	</ng-template>
  </wj-flex-grid-column>
  

  ~Manish

• 

  sricher

  • Post Options:
  • Link
    Copy

  Posted 1 May 2018, 12:16 am EST

  Hi Manish,

  Thanks for the tips, although this provides the expected functionnality, it now displays the values in a text box. So I changed the setup a little to print out the value directly instead of using a field, and then the readonly flag on the column header could also be removed.

  
  <wj-flex-grid-column [header]="'Id'" [binding]="'masterTransactionId'" [width]="60" format="formatNumber(this, f)">
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
          {{cell.item.masterTransactionId}}
        </ng-template>
  </wj-flex-grid-column>
  
  
  

  Although this appears to be workign correctly initially. I now have a strange behavior when I doubleclick on the number (to select the id with the intention of copy/pasting). The numbers shift a little visually (I think this might be the edit mode switched) and once I deselect, 3 zeros get suffixed to the Id.

  Would you have an idea why this is occurring?

  (I think it might have to do with my formatting, I’ll see if I can refactor that, all I wanted was to prevent the ID from being displayed with the comma in after the 3rd number)

  Thanks again for the help!

• 

  sricher

  • Post Options:
  • Link
    Copy

  Posted 1 May 2018, 12:45 am EST

  Hi Manish,

  After adjusting my formatting, I have something that works for me:

  
  <wj-flex-grid-column [header]="'Id'" [binding]="'masterTransactionId'" [width]="120" format="formatNumber(this)">
        <ng-template wjFlexGridCellTemplate let-cell="cell">
          {{ cell.item.masterTransactionId }}
        </ng-template>
  </wj-flex-grid-column>
  
  

  Do you know where I can find detailed information for formatNumber?

  Thanks!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 May 2018, 10:14 pm EST

  Hi,

  Would you have an idea why this is occurring?
  
  <<<<<<<<<<<<<<<<<<<<<
  
  The isReadOnly property should be remain to true for this column since when the double click occur on cell, the cell goes into edit mode and the extra 0 gets added because of the format set (formatNumber(this,f).

  Please refer to the following documentation link for formatNumber:
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.Globalize.Class.html#formatNumber

  You may directly pass format to Column same as given code below:

  <wj-flex-grid-column [format]="'n0'"></wj-flex-grid-column>
  

  ~Manish