BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
drillThrough(args): void {
if (args.currentCell.axis === 'value') {
args.currentTarget.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit" maxlength="10"></input>';
this.rowIndex = args.currentCell.rowIndex;
this.columnIndex = args.currentCell.colIndex;
this.pivotObj.grid.queryCellInfo = this.queryCell.bind(this);
args.currentTarget.querySelector('input').addEventListener('focusout', (event) => this.onFocusOut(args));
this.previousArgs = args;
this.previousValue = args.currentCell.value;
}
}
onFocusOut(args: any) {
// To maintain the value in pivot table
let fields: object[] = [];
let row: string[] = args.currentCell.rowHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter);
let column: string[] = args.currentCell.columnHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter);
for (let j: number = 0; j < row.length; j++) {
let field: object = {};
field[this.pivotObj.dataSourceSettings.rows[j].name] = row[j];
fields.push(field);
}
for (let j: number = 0; j < column.length; j++) {
let field: object = {};
field[this.pivotObj.dataSourceSettings.columns[j].name] = column[j];
fields.push(field);
}
let index: number[] = [];
for (let i: number = 0; i < Pivot_Data.length; i++) {
let value: number = 0;
for (let j: number = 0; j < fields.length; j++) {
if (Pivot_Data[i][Object.keys(fields[j])[0]] &&
String(Pivot_Data[i][Object.keys(fields[j])[0]]) === fields[j][Object.keys(fields[j])[0]]) {
value++;
}
}
if (value === fields.length) {
index.push(i);
}
}
for (let i: number = 0; i < index.length; i++) {
Pivot_Data[index[i]][args.currentCell.actualText] =
Number(args.currentTarget.querySelector('input').value.replace(/[^0-9]+/g, "")) / index.length;
}
if (index.length) {
(this.pivotObj as any).initEngine();
}
}
queryCell(args: any): void {
(this.pivotObj.renderModule as any).rowCellBoundEvent(args);
if (args.cell && JSON.parse(args.cell.getAttribute('aria-colIndex')) == this.columnIndex && JSON.parse(args.cell.getAttribute('index')) == this.rowIndex) {
// Here you can apply any styles to the specified class in app.component.css file.
args.cell.classList.add('selectedCell')
}
} |
Hi shreekumar,Thanks for contacting Syncfusion support.Based on your requirement we have prepared a sample to edit the cell value and highlight the modified value in drillThrough event. Kindly check the below code example.Code Example:
drillThrough(args): void {if (args.currentCell.axis === 'value') {args.currentTarget.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit" maxlength="10"></input>';this.rowIndex = args.currentCell.rowIndex;this.columnIndex = args.currentCell.colIndex;this.pivotObj.grid.queryCellInfo = this.queryCell.bind(this);args.currentTarget.querySelector('input').addEventListener('focusout', (event) => this.onFocusOut(args));this.previousArgs = args;this.previousValue = args.currentCell.value;}}onFocusOut(args: any) {// To maintain the value in pivot tablelet fields: object[] = [];let row: string[] = args.currentCell.rowHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter);let column: string[] = args.currentCell.columnHeaders.split(this.pivotObj.engineModule.valueSortSettings.headerDelimiter);for (let j: number = 0; j < row.length; j++) {let field: object = {};field[this.pivotObj.dataSourceSettings.rows[j].name] = row[j];fields.push(field);}for (let j: number = 0; j < column.length; j++) {let field: object = {};field[this.pivotObj.dataSourceSettings.columns[j].name] = column[j];fields.push(field);}let index: number[] = [];for (let i: number = 0; i < Pivot_Data.length; i++) {let value: number = 0;for (let j: number = 0; j < fields.length; j++) {if (Pivot_Data[i][Object.keys(fields[j])[0]] &&String(Pivot_Data[i][Object.keys(fields[j])[0]]) === fields[j][Object.keys(fields[j])[0]]) {value++;}}if (value === fields.length) {index.push(i);}}for (let i: number = 0; i < index.length; i++) {Pivot_Data[index[i]][args.currentCell.actualText] =Number(args.currentTarget.querySelector('input').value.replace(/[^0-9]+/g, "")) / index.length;}if (index.length) {(this.pivotObj as any).initEngine();}}queryCell(args: any): void {(this.pivotObj.renderModule as any).rowCellBoundEvent(args);if (args.cell && JSON.parse(args.cell.getAttribute('aria-colIndex')) == this.columnIndex && JSON.parse(args.cell.getAttribute('index')) == this.rowIndex) {// Here you can apply any styles to the specified class in app.component.css file.args.cell.classList.add('selectedCell')}}Meanwhile, we have prepared a sample for your reference.We hope that the above sample meets your requirement if not kindly share us more details along with screen-shots/video if possible.Regards,Sivamathi.
<div class="row">
<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings showTooltip='false' width='100%'
height='300' [gridSettings]='gridSettings' [editSettings]='editSettings' (drillThrough)='drillThrough($event)' (dataBound)='dataBound($event)'>
</ejs-pivotview>
</div>
dataBound(args): void {
this.pivotObj.grid.addEventListener('keyPressed', this.keyDownHandler.bind(this));
}
keyDownHandler(args: KeyboardEventArgs) {
args.cancel = true;
}
|