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

How to displaying serial number in Angular Grid?

Hi,


Does grid have the function of displaying serial number ? like below?



1 Reply

MS Manivel Sellamuthu Syncfusion Team June 23, 2021 09:20 AM UTC

Hi lorryl, 

Greetings from Syncfusion support. 

You can achieve your requirement by using the rowDataBound event of the Grid. Please refer the below code example and sample for more information. 

    <ejs-grid #grid [dataSource]='data' (rowDataBound)="rowDataBound($event)" height='400'> 
        <e-columns> 
// here we are adding a empty column to show the serial no 
            <e-column headerText="Serial No" width='100'></e-column> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
        </e-columns> 
    </ejs-grid> 
export class AppComponent { 
    public data: Object[] = []; 
    @ViewChild('grid', {statictrue}) 
    public grid: GridComponent; 
 
    ngOnInit(): void { 
        this.data = orderDetails; 
    } 
 
rowDataBound (args) { 
// here we are calculating the serial no 
      var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex')); 
      var page = this.grid.pageSettings.currentPage - 1; 
      var totalPages = this.grid.pageSettings.pageSize; 
      var startIndex = page * totalPages; 
      var sno = startIndex + (rowIndex + 1); 
//  updating the value  in the first cell of the row where we have rendered a empty column for this 
      args.row.cells[0].innerText = sno; 
    } 
} 



Please let us know if you need further assistance. 

Regards, 
Manivel 


Loader.
Up arrow icon