Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #109070
    khaqan asif

    Dear Team,

    I am using data grid in my angular 16 application. I have enabled copy paste option in grid. I want to trigger the event when value is copy and pasted between cells so that I can save the pasted value in database. Kindly confirm how I can achieve this functionality as I am unable to find such event in grid API. Thanks





    Hi khaqan asif,

    When the values are pasted, the “onCellUpdate” callback function will be called. You can use it to get the cells, which will be updated. The function also contains a “confirm” callback, which you can use to confirm the changes if the database save was successful or otherwise cancel them.

    You can have a look at the code here – stackblitz, for Google Chrome you may need to run the demo locally, since the Clipboard API is not available for security reasons.


    Best Regards,
    Ivan Peevski
    Smart UI Team

    khaqan asif

    Dear Ivan,

    Thanks for your response. I have checked “onCellUpdate” is calling correctly and also it is working fine at my side when I use dataSource with runtime generated data. When I use “virtualDataSource” then “onCellUpdate” or “onRowUpdate” is not calling on copy and paste event. “onCellUpdate” and “onRowUpdate” working correctly with “virtualDataSource” when I input some text in cell but not calling on “paste” event. Everytime on paste virtualDataSource callback function is being called. And in case of direct input in cell then “OnCellUpdate” or “onRowUpdate” is called first then virutalDataSource callback function is being called. Below is my code. Thanks


    <smart-grid #grid id=”grid” [dataSource]=”dataSource” [onCellUpdate]=”onCellUpdate” [onRowUpdate]=”onRowUpdate” [columns]=”columns” [editing]=”editing” [selection]=”selection”></smart-grid>


    import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from ‘@angular/core’;
    import { GridComponent, GridColumn, DataAdapter, Smart, GridRow } from ‘smart-webcomponents-angular/grid’;
    import { GetData } from ‘../../app/common/data’;
    import { CustomerOrderModel } from ‘../models/CustomerOrderModel’;
    import { ApiService } from ‘../services/api.service’;

    selector: ‘app-table-list’,
    templateUrl: ‘./table-list.component.html’,
    styleUrls: [‘./table-list.component.css’]
    export class TableListComponent implements AfterViewInit {
    constructor(private api: ApiService) {

    dropdownData: any[] = [];
    gridCols: any[] = [];
    selectedItem: string = ”;
    @ViewChild(‘grid’, { read: GridComponent, static: false }) grid!: GridComponent;

    dataSource = new Smart.DataAdapter({
    /*dataSource: GetData(1000),*/
    virtualDataSource: function (resultCallbackFunction: any, details: any) {
    fetch(‘https://localhost:44455/customerorder/getcustomerorders&#8217;).then(response => response.json())
    .then(data => {
    dataSource: data,
    virtualDataSourceLength: data.length
    dataFields: [
    ‘id: number’,
    ‘customerName: string’,
    ‘uid: string’,
    ‘sku: string’,
    ‘paperType: bool’,
    ‘fileName: string’,
    ‘width: number’,
    ‘height: number’,
    ‘borderLeft: number’,
    ‘borderRight: number’,
    ‘borderTop: number’,
    ‘borderBottom: number’,
    ‘limitEditionQu: number’,
    ‘specialPrintSettings: string’

    onRowUpdate = (indexes: any, rows: any, oldDatas: any, datas: any, confirm: any) => {

    //Code logic here

    editing = {
    enabled: true,
    mode: ‘cell’,
    action: ‘click’,
    addNewRow: {
    //visible: true,
    //position: ‘far’
    autoCreate: true
    selection = {
    enabled: true,
    allowCellSelection: true,
    mode: ‘extended’
    cells: any[],
    oldValues: any[],
    values: any[],
    confirm: { (commit: boolean): void }
    ) {
    //Contains all updated cells

    //save changes to database…
    //call confirm(true) to confirm changes

    //call confirm(false) to cancel the changes

    columns = [
    { label: ‘Customer’, dataField: ‘customerName’ },
    { label: ‘UID’, dataField: ‘uid’ },
    { label: ‘SKU’, dataField: ‘sku’ },
    { label: ‘Paper Type’, dataField: ‘paperType’ },
    { label: ‘File Name’, dataField: ‘fileName’ },
    { label: ‘Width’, dataField: ‘width’, editor: ‘numberInput’ },
    { label: ‘Height’, dataField: ‘height’, editor: ‘numberInput’ },
    { label: ‘Border Left’, dataField: ‘borderLeft’, editor: ‘numberInput’ },
    { label: ‘Border Right’, dataField: ‘borderRight’, editor: ‘numberInput’ },
    { label: ‘Border Top’, dataField: ‘borderTop’, editor: ‘numberInput’ },
    { label: ‘Border Bottom’, dataField: ‘borderBottom’, editor: ‘numberInput’ },
    { label: ‘Limited Edition Qu’, dataField: ‘limitEditionQu’, editor: ‘numberInput’ },
    { label: ‘Special Print Settings’, dataField: ‘specialPrintSettings’ }


    ngOnInit(): void {
    // onInit code.

    ngAfterViewInit(): void {
    // afterViewInit code.

    init(): void {
    // init code.

    loadData() {
    this.api.GetOrderViews().subscribe(data => {
    this.dropdownData = data;


    Hi khaqan asif,


    When using virtualDataSource, the pasting operation will trigger an ‘update’ callback for the virtualDataSource, the same way cell editing does.

    You can have a look at the demo here-

    You can try to copy and paste some values and you will see the changes in the SQL Table shown below the grid.


    Best Regards,
    Ivan Peevski
    Smart UI Team

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.