Data Grid-Get Pasted value

[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

 

Regards,

Khaqan

[ivanpeevski]

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
https://www.htmlelements.com/

[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

Html:

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

Component:

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’;

@Component({
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 => {
resultCallbackFunction({
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’
}
onCellUpdate(
cells: any[],
oldValues: any[],
values: any[],
confirm: { (commit: boolean): void }
) {
//Contains all updated cells
console.log(‘hello’);
console.log(cells);

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

//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.
this.loadData();
}

ngAfterViewInit(): void {
// afterViewInit code.
this.init();
}

init(): void {
// init code.

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

[ivanpeevski]

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- https://www.htmlelements.com/angular/demos/grid/server-side-cell-edit/

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
https://www.htmlelements.com/

[Author]

Posts