Ng-templates copy/paste compatible

[Willemin]

Hello,

I would like to be able to copy and paste the content of the ng-templates in my syncfusion grid.
How can I get the ng-templates values in the copy and paste ?

Thank you in advance for your answer.
Sincerely, Tom Willemin

Attachment: test_6db4772d.zip

[Vinitha Balasubramanian]

Hi Customer,

Greetings from the Syncfusion support.

Currently we are working your query and we will update further details on June 7,2022.

until then we appreciate your patience.

Regards

Vinitha Balasubramanian

[Rajapandi Ravi]

Hi Willemin,

Thanks for your patience

We have checked your shared application and it was not running at our end. From validating your application, we could see that you are binding checkbox to the template column and like to copy the value of the checkbox. By default, in our EJ2 Grid, we can copy one the cell content value and we cannot copy the template column values, because in template column contain any of the custom HTML elements. So, we cannot copy the template column values. This was the default behavior of Grid.

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution.

1)       Share us your exact requirement scenario step by step with detailed description.

2)       Explain your requirement scenario with pictorial representation.

3)       Please confirm you like to copy the checkbox element value or not.

Regards,

Rajapandi R

[Willemin]

Hi Ravi

Thanks for your feedback.

We just found a solution for the copy: we are using the cell innerText to get the ng-template value into the clipboard. It's working as excepted.

Now we are facing a new problem with the pasting. We want to use the beforePaste event, but we discover that the event is not triggered for the ng-template.

Is it a bug? Is there any workaround? Maybe we missed something (any other event)?

In attachment, you can find a simple project. As you can see when pasting some values, the console log ouput (from beforePaste) is working for all cells except the ng-template one.

Thanks in advance for your help

Tom

Attachment: exampleNgTemplate_26ac2e32.zip

[Vinitha Balasubramanian]

Hi Willemin,

Currently we are working your query and we will update further details on June 15, 2022.

until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Willemin,

Thanks for the patience.

Based on your query, you have mentioned that copy and paste action doesn’t work for ng-template. By default, copy and paste action is feasible only for data basis. In our provided sample you have render ng-template which considered as the element. Copy and paste action is not applicable with element.

So, we need to convey that copy and paste action for ng-template is not feasible. Kindly ensure this with your sample.

Regards,

Vinitha Balasubramanian

[Willemin]

Hi Balasubramanian,

Thank you for your answer.

We found a solution to copy/paste the content of an ng-template.

To copy the content of an ng-template, we put a value in the ng-template which is hidden with the CSS :

<ng-template #template #templateCheckbox let-data>
  <input type="checkbox" [checked]="data[data.column.field]"
         (change)="changeNgTemplateValue($event.target, data, true)">
  <label class="hiddenInnerText">{{data[data.column.field]}}</label> <!-- Here is the inner text -->
</ng-template>

To paste the content into an ng-template, we listened for the 'paste' event in the grid component.

Note that the 'beforePaste' event is not called when pasting on ng-template cells.

For each event 'paste' received, we parse the value of the clipboard ('' means new line and '\t' means new cell). Once we have an array of values, we browse it. For each value, we check if it is part of a column containing ng-template. We can know where the cell is by starting from the cell selected during the copy :

this.grid.getSelectedRowCellIndexes();

If the column contains ng-template then we paste the value by hand :

this.grid.updateCell(rowIndex, field, value);

I hope our solution can help other people with the same problem.

[Vinitha Balasubramanian]

Hi Willemin,

We need some more time to validate your query and we will update further details within two business days (28-06-2022).

Until then, we appreciate your patience.

Regards

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi customer,

Thanks for update.

We have checked your suggested solution at our side, and it works. Thanks for sharing your suggestion with us.

Regards,

Vinitha Balasubramanian