Products

[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;
});
}
}
}

[Author]

Posts