Copy paste and replication functionality in Wijmo Flexgrid

Copy paste and replication functionality in Wijmo Flexgrid

Posted by: suleman1 on 2 March 2019, 10:17 pm EST

• 

  suleman1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 March 2019, 10:17 pm EST - Updated 3 October 2022, 5:48 pm EST

  Hi,

  We had a Silverlight grid which provided copy, paste and replication functionality from the click of the button. As in the screenshot below. As we are replacing that with Wijmo Flexgrid, we need the following functionality enabled in Flexgrid.

  Copy: Will copy any selection of cells from one part of grid to another

  Paste: will paste all the selected cells on the highlighted cell

  Replicate: Will copy the respective selection of row to the whole row

  I was already able to enable copy pasting (through ctrl + c and ctrl + v), however haven’t found any examples on how to do it through separate buttons.

  

  1917×247 17 KB

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 March 2019, 1:04 am EST

  Hi,

  We could replicate the copy/functionality via button click using the getClipString()/setClipString() method. Please refer to the following API docs for more info on getClipString()/setClipString() methods:
  
  • getClipString: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#getClipString
  
  • setClipString: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#setClipString

  Also, we need to maintain an internal variable to keep track of the copied data because browsers don’t allow reading data from the system clipboard(until the user doesn’t explicitly invoke paste command i.e. pressing paste shortcut keys, ctrl+v) due to the security reasons.

  Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/angular-p8bhdd?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  suleman1

  • Post Options:
  • Link
    Copy

  Posted 6 March 2019, 11:32 pm EST

  Thanks Sharad, it works perfectly fine. Just one small thing in the replicate functionality. My requirement is to copy the selected cells and then paste selected content to multiple cells of the same selected row. For e.g.
  
  row is 3|4|5|6|7 . If I press replicate while selecting 5 it should copy 5 and paste 5 in the range of rows final output will be like: 5|5|5|5|5 .

  One more e.g. row is 3|4|7|7|7. User invoke replicate while selecting 3,4 output will be 3|4|3|4|3.

  I am using the setClipString method to paste the copied content to a cell range, but somehow it is not pasting it to the whole range rather justing pasting to first column of the range. I used the following code:

  
    if(this.copyString){
        grid.setClipString(this.copyString, new wjcGrid.CellRange(sel.topRow, 7, sel.bottomRow, grid.columns.length - 1));
      }
  
  

  Do I need to add a loop to paste it in cell range ?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 7 March 2019, 12:41 am EST

  Yes, to achieve the required functionality, we need to iterate over the cell and paste the data.
  
  Please refer to the following updated sample:
  
  https://stackblitz.com/edit/angular-vuynkv?file=src/app/app.component.ts

• 

  vishakha.panchal

  • Post Options:
  • Link
    Copy

  Posted 30 January 2020, 11:33 am EST

  Hi ,

  I am trying to apply similar kind of feature, where I am using wijmo combo box in column header and I want to paste the combo box value in the selected rows.
  
  I am not able to copy the data to selected value cell.below is my code for the feature and attached is the view of the UI.

  [component.html]
  
  <wj-flex-grid-column
  
  binding=“irsmstatusName”
  
  header=“IRSM Status”
  
  [dataMap]=“statusMap”
  
  [width]=“210”
  
  >
  
  
  
  

  
  
  

  
  
  IRSM Status
  
  

  
  
  

  
  
  <wj-combo-box
  
  [itemsSource]=“status”
  
  [(selectedItem)]=“cell.value”
  
  [isEditable]=“false”
  
  >
  
  
  
  <button
  
  [wjTooltip]=“‘copy below’”
  
  style=“align-items: center;padding: 0px !important”
  
  class=“btn btn-light”
  
  (click)=“onCopyBelowClick(cell.value)”
  
  >
  
  
  
  
  
  
  
  
  
  

  
  
  

  
  
  
  
  

  [component.ts]
  
  onCopyBelowClick(value) {
  
  console.log(value);
  
  console.log(this.grid.selectedItems.length);
  
  for (let i = 0; i < this.grid.selectedItems.length; i++) {
  
  this.grid.selectedItems[0].status = value;
  
  console.log(this.grid.selectedItems[0].irsmstatusName);
  
  // this.grid.selectedItems[i].
  
  // rowDataList.push(tempData);
  
  }
  
  }

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 January 2020, 2:23 am EST

  Hello Vishakha,
  
  The code shared in the post will not work since ColumnHeader has cell.value to null. cell.value works when the cell is in edit mode.
  
  To update the value on ComboBox selection change, please refer to the following demo sample:
  
  https://stackblitz.com/edit/wijmo-angular-sj97ze?file=src/app/app.component.ts

  Hope it helps!

  Regards,
  
  Manish Gupta