How to trigger loader on PivotView

[Shreekumar]

I have implemented a PivotView as defined in this example 

I'm doing cell edit. Is there any way I can trigger Loader icon on cell edit?

[Sivamathi Natarajan]

Hi Shreekumar, 

 

Thanks for contacting Syncfusion Support. 

 

You can trigger the loader icon using following code example under onFocusOut method. You will get the loader icon while updating the value to the cell. 

 

Code example: 

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

    } 

    this.pivotObj.showWaitingPopup(); 

  } 

 

 

 

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

 

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

 

We hope the above sample meets your requirements. 

 

Regards, 

Sivamathi. 

[Shreekumar]

Thank you so much! 

[Sivamathi Natarajan]

Hi Shreekumar, 

 

Thanks for the response. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Sivamathi.