JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Data Grid-Get Pasted value
- This topic has 3 replies, 2 voices, and was last updated 10 months, 1 week ago by
ivanpeevski.
-
AuthorPosts
-
October 25, 2023 at 7:11 pm #109070
khaqan asif
ParticipantDear 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
October 25, 2023 at 8:48 pm #109071ivanpeevski
ParticipantHi 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/October 26, 2023 at 8:44 pm #109078khaqan asif
ParticipantDear 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’).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;
});
}
}
}October 26, 2023 at 9:59 pm #109084ivanpeevski
ParticipantHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.