Copy and paste feature row in the grid

9 posts, 0 answers
  1. Anil
    Anil avatar
    5 posts
    Member since:
    Apr 2020

    Posted 05 May Link to this post

    we need the copy and paste feature in grid

    copy the data form one row and then create the new row , paste the data in row 

  2. Martin
    Admin
    Martin avatar
    253 posts

    Posted 07 May Link to this post

    Hi Anil,

    Thank you for the provided screenshot.

    I am afraid that currently such functionality is not supported out-of-the-box. Having said that the developer will need a custom implementation based on Cell templates and Reactive Forms, for example:

    https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/#toc-rendering-editors-in-the-cell-templates

    Let me know if I can provide any further assistance for Kendo UI for Angular.

    Regards,
    Martin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Anil
    Anil avatar
    5 posts
    Member since:
    Apr 2020

    Posted 07 May in reply to Martin Link to this post

    We have copy paste (row) functionality that required  as per the screen shot provided.But  this feature is not available in angular kendo UI.

    Our requirement is:
    After adding a new (blank) record , (for that blank record) we need to copy the existing row and paste it in the newly added blank row.

    please let you know how we can achieve this in kendo ui for angular

  4. Martin
    Admin
    Martin avatar
    253 posts

    Posted 11 May Link to this post

    Hi Anil,

    Indeed, there is no built-in functionality that allows us to copy and paste data to the grid. That is why the desired behavior can be achieved by using a custom JavaScript code by getting the content from the user's clipboard with the ClipboardEvent interface.

    To demonstrate the approach I prepared a StackBlitz example:

    https://stackblitz.com/edit/angular-yddtyq

    Also please check this article from our documentation that shows how to pasted excel values in the Grid using  the Clipboard API:

    https://www.telerik.com/kendo-angular-ui/components/grid/how-to/paste-from-excel/

    The idea of the example is to demonstrate how with custom JavaScript code and Clipboard API the desired functionality could be achieved. However, it needs some further modification by the developer to meet the exact use case and requirements of the project.

    It is worth mentioning that custom logic that is not directly related to the build-in functionality of the Kendo UI for Angular components should be in the hands of the developer, and all custom implementation and feature customizations fall outside of the scope of our support service.

    Regards,
    Martin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Subbu
    Subbu avatar
    1 posts
    Member since:
    May 2020

    Posted 11 May in reply to Martin Link to this post

    hello Martin,

    The same functionality is supported in WinForm and Kendo-jQuery but Angular is not supported.

    Can you support us in ad hoc basis an workable alternative?

     

    Thanks

     

     

     

     

  6. Svetlin
    Admin
    Svetlin avatar
    448 posts

    Posted 13 May Link to this post

    Hi Anil,

    Indeed, there isn't such built-in feature provided by the Kendo UI for Angular Grid. However it can be achieved using some custom logic. For the purpose the desired "Copy" and "Paste" buttons can be added to the command column. Then when clicking the "Copy" button the corresponding dataItem for the current row should be saved. That will allow to use that saved dataItem at a later stage when adding a new row and clicking the "Paste" button. When clicking the "Paste" button the values of the FormControls should be updated accordingly. Please check the following example demonstrating such approach:

    https://stackblitz.com/edit/angular-nnbqkr-4il5yf?file=app%2Fapp.component.ts

    The essential parts are highlighted below:

     

       <kendo-grid-command-column title="command" width="220">
                <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
                    <button kendoGridEditCommand [primary]="true">Edit</button>
                    <button kendoGridRemoveCommand>Remove</button>
                    <button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                    <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
                    <button kendoButton *ngIf="!isNew" (click)="copy(dataItem)">Copy</button>
                    <button kendoButton *ngIf="isNew" (click)="paste()">Paste</button>
                </ng-template>
            </kendo-grid-command-column>
    
    ...
    
        public copy(dataItem){
          this.copiedObject = dataItem;
        }
    
        public paste(){
    
          this.formGroup.get('ProductID').patchValue(this.copiedObject.ProductID); 
          this.formGroup.get('ProductName').patchValue(this.copiedObject.ProductName); 
          this.formGroup.get('UnitPrice').patchValue(this.copiedObject.UnitPrice); 
          this.formGroup.get('UnitsInStock').patchValue(this.copiedObject.UnitsInStock); 
          this.formGroup.get('Discontinued').patchValue(this.copiedObject.Discontinued); 
    
        }

     

    I hope the suggest approach will help you to move forward with this case. Please let us know in case any further assistance is required for this case. Thank you.

    Regards,
    Svetlin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Kamaraj
    Kamaraj avatar
    8 posts
    Member since:
    Sep 2020

    Posted 26 Oct in reply to Martin Link to this post

    Hi Team,

    I am looking for the Copy Columns from grid and Paste Them on Selected Grid Columns .I found similar solution for Jquery but not in Angular .

    Can some one provide the link please ?

    For your reference find the link below for working example in Jquery.I am looking for the same from Angular for kendo grid .

    https://docs.telerik.com/kendo-ui/knowledge-base/grid-copy-columns-from-excel-paste-on-selected-columns

     

     

  8. Kamaraj
    Kamaraj avatar
    8 posts
    Member since:
    Sep 2020

    Posted 27 Oct in reply to Subbu Link to this post

    hi Martin,

    I am also having this issue in Kendo - Angular.This feature issupported in Jquery but not in Angular .

    Find the link below for your reference.

    https://docs.telerik.com/kendo-ui/knowledge-base/grid-copy-columns-from-excel-paste-on-selected-columns

    Regards,

    Kamaraj.P

     

  9. Martin
    Admin
    Martin avatar
    253 posts

    Posted 28 Oct Link to this post

    Hi Kamaraj,

    I am afraid that, currently, there is no such copy from Excel and paste in the Grid feature available out of the box for Kendo UI for Angular.

    If you have the time please support by voting one of the following logged feature requests in our Feedback portal:

    https://feedback.telerik.com/kendo-angular-ui/1360792-copy-data-from-excel-to-kendo-grid-angular-similar-to-kendo-ui-jquery

    http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/suggestions/31493491-import-excel-file-in-to-kendo-grid-for-angular-2

    That will help us to keep track of the client's demand and we will be able to add the required feature to our future development plans. Thank you for voting.

    However, you can check the following How-to article demonstrating how to paste from excel relying on vanilla JavaScript APIs and accessing the clipboard content:

    https://www.telerik.com/kendo-angular-ui/components/grid/how-to/paste-from-excel/ 

    I hope this helps.

    Regards,
    Martin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top