Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
César Varona
155
How to customize the text copied from a data grid's cell
posted

Hi,

I have grid which renders complex objects at every cell. In order to accomplish this I have a component within an igxCell template. I also have a different component to enable edition within an igxCellEditor template. Both rendering and editing work as expected. So far so good.

Attempting to copy any cell's content will yield, as it can be imagined, the dreaded [object Object] string. This can be circumvented by adding a toString() method in the objects acting as cells' values which does more or less the same the rendering component passed as igxCell does. Is there any better way to do this? I for instance attempted to set a HostListener on the rendering component, but it won't listen to keydown events (needed to detect ctrl-c). Clicks and double clicks are detected... but we need dblclick to enter edition.

Any idea as to how to tackle this would be much appreciated.

Parents
  • 660
    Verified Answer
    Offline posted

    Hello,

    Thanks for your detailed explanation. Since I don’t have your actual code, I can’t give you a drop-in solution, but I can share some guidelines that will let you achieve the behavior you’re looking for.

    The cleanest approach is to enable the grid’s clipboard feature and configure it to use your column formatters when copying. That way, instead of getting [object Object], the grid will put the formatted string on the clipboard:

    <igx-grid
  [data]="rows"
  [clipboardOptions]="{ enabled: true, copyHeaders: true, copyFormatters: true }">
  <igx-column
    field="customer"
    [formatter]="customerToText">
    <!-- nice visual for view mode -->
    <ng-template igxCell let-val>
      <!-- your rendering component here -->
    </ng-template>

    <!-- your custom editor -->
    <ng-template igxCellEditor let-cell="cell">
      <!-- your editor component here -->
    </ng-template>
  </igx-column>
</igx-grid>

    // component.ts
customerToText = (c?: Customer) => c ? `${c.code} — ${c.name}` : '';

    With copyFormatters: true, the grid will use the column’s formatter (or pipe) output when copying, so your complex objects are represented as readable text instead of [object Object].

    If you need even more control for example, if you want to copy something different from what’s displayed you can intercept the copy event and override the clipboard contents:

    <igx-grid
  #grid
  [data]="rows"
  [clipboardOptions]="{ enabled: true }"
  (gridCopy)="onGridCopy($event)">
</igx-grid>

    onGridCopy(e: any) {
  // Fully override default copy:
}

    The (gridCopy) event fires when copy is executed and allows you to transform or fully replace what’s written to the clipboard.

    You can find more details and examples in the official documentation on clipboard operations in Ignite UI Angular.

    Please do not hesitate to contact me if you need any further assistance with this matter. 

    Regards,

    Georgi Anastasov

    Associate Software Developer

    Infragistics

Reply Children
No Data