Cell edit on Focus and Key Press Event

[Shreekumar]

I have implemented editable Pivot-View as defined in this example: https://stackblitz.com/edit/angular-iqe2sr-qkaerq?file=app.component.ts

After edit, I'm calling  (this.pivotGridObj as any).initEngine(); to refresh the Pivot Data-Source with new value and Re-Render.

Is there any way I can do Cell Edit on Focus on Cell + Pressing Any key? Instead of double click?

This is something similar to Excel Cell Edit.

[Sivamathi Natarajan]

Hi Shreekumar, 

 

Thanks for contacting Syncfusion support. 

 

You can edit the cell by clicking enter key or cellClick(single click) event. Kindly check the below samples link. 

 

Sample Link using enter key: https://stackblitz.com/edit/angular-iqe2sr-gazffc?file=app.component.ts 

Sample Link using cell click: https://stackblitz.com/edit/angular-iqe2sr-5nm1qa?file=app.component.ts 

 

We hope the above sample meets your requirements.  

 

Regards, 

Sivamathi. 

[Shreekumar]

I wanted it in another way, 

For example: If I edit something and click on Tab, Focus will be shifted to next Cell. 

On the same type, If I enter something it should go to editable mode.

Focus + KeyPress 

[Sivamathi Natarajan]

Hi Shreekumar, 

 

Based on your requirement we have prepared a sample to change the cell to editable mode by clicking focus + Space key and for update the values use Tab key. Kindly check the below sample link. 

 

Sample link: https://stackblitz.com/edit/angular-iqe2sr-sbrgnn?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Shreekumar]

Thanks for the response.

I'm using (drillThrough) and (created) events to attach Textbox to a cell and make it editable.

<ejs-pivotview #pivotview id='PivotView' showFieldList='false' [editSettings]='editSettings'

[dataSourceSettings]='dataSource' height='{{height}}' showGroupingBar='true' allowCalculatedField='true'

(cellSelected)='cellSelected($event)' (drillThrough)="editCell($event)" [gridSettings]='gridSettings'

showToolbar='true' [toolbar]='toolbarOptions' (toolbarRender)='beforeToolbarRender($event)'

[showTooltip]='false' (dataBound)='dataBound($event)' (paste)="paste($event)"

allowConditionalFormatting='true' allowDeferLayoutUpdate='true' (created)='created($event)'>

</ejs-pivotview>

Here, with DrillThroughEventArgs I'm getting currentCell and rawData properties.

editCell(args: DrillThroughEventArgs): void {

args.rawData

this.previousArgs = args;

if (args.currentCell.axis === 'value' && (!this.previousArgs || this.previousArgs.currentCell !== args.currentCell)) {

// tslint:disable-next-line: max-line-length

args.currentTarget.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit" value='

+ genericOperation.round(args.currentCell.value) + '></input>';

this.rowIndex = args.currentCell.rowIndex;

this.columnIndex = args.currentCell.colIndex;

this.pivotGridObj.grid.queryCellInfo = this.queryCell.bind(this);

args.currentTarget.querySelector('input').focus();

// To update cursor position to recently added character in textBox

const inputLength = args.currentCell.value.toString().length;

args.currentTarget.querySelector('input').setSelectionRange(inputLength, inputLength);

// args.currentTarget.querySelector('input').select();

args.currentTarget.querySelector('input').addEventListener('keyup', event => this.updateData(event));

args.currentTarget.querySelector('input').addEventListener('keydown', event => this.updateData(event));

args.currentTarget.querySelector('input').addEventListener('focusout', event => { this.onFocusOut(event);

});

}

But, with (created) event, I'm not getting currentCell and rawData properties.

Because, in both the methods I'm attaching and calling FocusOut method and passing event as argument.

Inside this function, I'm using Previous Argument to get the Raw Data and Current Cell Information.

How to get the currentCell and rawData properties from (created) event arguments?

created(e) {

this.pivotGridObj.grid.addEventListener('keyPressed', this.keyDownHandler.bind(this));

  if (args.code === 'F2') {

this.previousArgs = args;

const td: any = args.target;

td.innerHTML = '<input type="text" class="e-input e-pivot-cell-edit"></input>';

this.rowIndex = parseInt(td.getAttribute('aria-colindex'));

this.columnIndex = parseInt(td.getAttribute('index'));

this.pivotGridObj.grid.queryCellInfo = this.queryCell.bind(this);

td.querySelector('input').focus();

td.querySelector('input').addEventListener('focusout', event => this.onFocusOut(event));

}

}

async onFocusOut(args) {

let cell = this.previousArgs.currentCell;

let rawdata = this.previousArgs.rawData;

}

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

The event drillThrough will be triggered during double click on cell. So, you will receive the currentCell details. But created event will be triggered once pivot table is created alone. So, it is not valid to get the currentCell details in created event. 

 

Regards, 

Sivamathi.