Serial no on grid with json object data

[Ankit Pathak]

Hi,

I am using Angular Grid in my Angular 8 Project.

I have implemented Serial No by using template and data index but there are no values in my data (as object) against Serial No field.

Now serial is visible on my grid but when I export grid as excel, then Sr. No column comes empty.

Can you please share any way by which I can add serial no column in my grid, which is also visible during excel export.

Below is the column which I have used for Serial No.

Best Regards,

Ankit Pathak

                <e-column [headerText]="column.headerText" [width]="column.width" textAlign='Center'

                    *ngIf="column.columnType=='SERIALNO'" [visible]="column.visible">

                    <ng-template #template let-d>

                        <div>{{ +d.index+1 }}</div>

                    </ng-template>

                </e-column>

[Prasanna Kumar Viswanathan]

Hi Ankit , 

 

Greetings from Syncfusion support 

 

Query : Serial no on grid with json object data 

 

we have considered this as a improvement task. It will be included in any of our upcoming release. At the planning stage for every release cycle, we review all open features. We will let you know when this feature is implemented. The status of implementation can be tracked through our Features Management System. 

 

Feedback Link : https://www.syncfusion.com/feedback/10384/need-to-provide-support-for-exporting-grid-with-column-template-and-detail 

 

Regards 

Prasanna Kumar N.S.V 

[Ankit Pathak]

Hi Prasanna,

Thank you for the reply back. I will wait for this feature.

Best Regards,

Ankit Pathak

[Dhivya Rajendran]

Hi Ankit, 

Thanks for your update 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through previously provided feedback link. 

 

Please get back to us if you need further assistance from us. 

 

Regards, 

R.Dhivya   

[Nagendra Gupta]

Hey Team

Is there any update on this, I want to manage Serial No in Excel Export.

[Balaji Sekar]

Hi Nagendra, 

Based on your requirement, you want to export with the serial number (text value by using column-template) in the excel file. We suggest you to use excelQueryCellInfo event to customize the text value while export the template column (“SerialNo”). Find the below code example and sample for more information. 

excelQueryCellInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#excelquerycellinfo 

[app.component.html] 

  <ejs-grid 

    #grid 

    [dataSource]="data" 

    [allowPaging]="true" 

    [toolbar]="toolbarOptions" 

    height="272px" 

    [allowExcelExport]="true" 

    (toolbarClick)="toolbarClick($event)" 

    (excelQueryCellInfo)="excelQueryCellInfo($event)" 

  > 

    <e-columns> 

      <e-column field="SerialNo" headerText="Serial No" width="150"> 

        <ng-template #template let-data> 

          {{+data.index+1}} 

        </ng-template> 

      </e-column> 

      ---- 

    </e-columns> 

  </ejs-grid> 

[app.component.ts] 

export class AppComponent { 

  public serialNo: any = -1; 

 

  ----- 

  toolbarClick(args: ClickEventArgs): void { 

    if (args.item.text === "Excel Export") { 

      this.serialNo = 0; // initialize the serial No 

      this.grid.excelExport(); 

    } 

  } 

  excelQueryCellInfo(args) { 

    if (args.column.field == "SerialNo") { 

      args.value = (this.serialNo + 1).toString(); // bind the serial No in the excel cell 

      this.serialNo++; // increase the serial No 

    } 

  } 

} 

 

In the above code example, we stored the Serial No in a reference variable and dynamically export the SerialNo in the excel cell and increase the SerialNo using excelQueryCellInfo event. 

Sample: https://stackblitz.com/edit/angular-emqpb1-ehzhu9?file=app.component.ts 

Please get back to us if you need further assistance with this. 

Regards, 

Balaji Sekar