Is there any way to set the cell focus after Render?

[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.

Because of this, every time Cell focus will be set to some absolute position.

Is there any way I can set the cell focus to new cell after Re-Render?

For example:

1] If I use Enter Key to modify the cell, After (this.pivotGridObj as any).initEngine(); Re-Render,

Focus should move to Bottom Cell of the recently edited cell.

2] If I use Tab Key to modify the cell, After (this.pivotGridObj as any).initEngine(); Re-Render,

Focus should move to Next Cell of the recently edited cell.

3] If I use Shift + Tab to modify the cell, After (this.pivotGridObj as any).initEngine(); Re-Render,

Focus should move to Previous Cell of the recently edited cell.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Based on your requirement we have prepared a sample to focus the next row cell based on edited cell. 

Please check the following code example. 

 

Code Example: 

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

 

let cCellColIndex: string; 

let cCellRowIndex: string; 

 

 onFocusOut(args: any) { 

    // To maintain the value in pivot grid 

    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(); 

    }  

    this.pivotObj.showWaitingPopup(); 

     cCellColIndex = (parseInt(args.currentTarget.getAttribute('aria-colindex')) + 1).toString(); 

     cCellRowIndex = args.currentTarget.getAttribute('index'); 

    

  } 

 

 dataBound(args): void { 

    if (cCellColIndex && cCellRowIndex &&  document.querySelectorAll('td[aria-colIndex="' + cCellColIndex +'"][index="' + cCellRowIndex +'"]')[0]) 

  document.querySelectorAll('td[aria-colIndex="' + cCellColIndex +'"][index="' + cCellRowIndex +'"]')[0].classList.add('e-focused') 

  } 

 

 

 

Meanwhile, we have prepared a sample for your reference. Kindly check the below sample link. 

 

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

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi.