We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Serial no on grid with json object data

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>


5 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team January 14, 2020 10:54 AM UTC

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. 
 
 
Regards 
Prasanna Kumar N.S.V 



AP Ankit Pathak January 14, 2020 11:09 AM UTC

Hi Prasanna,

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

Best Regards,
Ankit Pathak


DR Dhivya Rajendran Syncfusion Team January 15, 2020 10:57 AM UTC

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   



NG Nagendra Gupta December 30, 2021 09:34 AM UTC

Hey Team


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



BS Balaji Sekar Syncfusion Team December 31, 2021 05:34 AM UTC

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. 


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


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

Regards, 
Balaji Sekar 


Loader.
Live Chat Icon For mobile
Up arrow icon