Serial numbers in grid grouping

[Nagendra Gupta]

Dear Team

How do i insert the row number or serial numbers in grid grouping control?

like if there are two group in grid and first group contain 2 rows and second group contain 5 rows,

Grid make srno number for first group is 1,2 and second group is 1,2,3,4,5.

Regards

Nagendra Gupta

[Pavithra Subramaniyam]

Hi Nagendra Gupta,

You can render serial numbers based on the Grid groups by iterating the row elements inside the dataBound. Please refer to the below code example in which we have added a column to display the serial numbers and set the inner text inside the dataBound event.

[html]

<div class="control-section" style="padding-top:100px">

  <ejs-grid #grid [dataSource]="data" [allowGrouping]="true"

    [groupSettings]="groupOptions" (dataBound)="dataBound($event)">

    <e-columns>

      <e-column headerText="Serial No" width="180"></e-column>

      .  .  .

    </e-columns>

  </ejs-grid>

</div>

 

[ts]

dataBound(args) {

    var i = 1;

    [].slice

      .call(this.grid.getContentTable().querySelectorAll('tr'))

      .map((row) => {

        if (row.classList.contains('e-row')) {

          row.querySelector('.e-rowcell').innerText = i;

          i++;

        } else {

          i = 1;

        }

      });

  }

 

Sample: https://stackblitz.com/edit/angular-3rfu9k?file=src%2Fapp.component.ts

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

Regards,

Pavithra S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Nagendra Gupta]

Hi Pavithra Subramaniyam,

Thank you for your quick response, I need serial number column in excel and pdf export as well.

Regards

Nagendra Gupta

[Pavithra Subramaniyam]

Hi Nagendra Gupta,

We suggest the “Custom Adaptor” extended from the default JsonAdaptor to add serial number field to the Grid columns. Using this approach, you can also add the serial number while exporting. Please refer to the below code example, documentation and sample link for more information.

In the below code example we override the default processResponse method to add another field “Sno” to the result.

class SerialNoAdaptor extends JsonAdaptor {

  processResponse() {

    let i = 0;

    const Sno = 'Sno';

    // calling base class processResponse function

    const original = super.processResponse.apply(this, arguments);

    // Adding serial number

    var loop = function (obj) {

      for (var i = 0; i < obj.length; i++) {

        if (obj[i].count) {

          loop(obj[i].items);

        } else {

          obj[i][Sno] = 1 + i;

        }

      }

    };

    if (original.result.level) {

      loop(original.result);

    } else {

      original.result.forEach((item) => (item[Sno] = ++i));

    }

    return { result: original.result, count: original.count };

  }

}

 

export class AppComponent {

  ngOnInit(): void {

    this.data = new DataManager({

      json: inventoryData,

      adaptor: new SerialNoAdaptor(),

    });

  }

 

}

 

 

Documentation : https://helpej2.syncfusion.com/angular/documentation/grid/data-binding/remote-data#custom-adaptor

Sample               : https://stackblitz.com/edit/angular-3rfu9k-uj1tsd?file=src%2Fapp.component.ts

Regards,

Pavithra S

[Nagendra Gupta]

Hi Pavithra Subramaniyam,

I really appreciate your quick reply and solution.But I want this solution without Adaptor.

Please give me solution without using Adaptor

Regards

Nagendra Gupta

[Pavithra Subramaniyam]

Hi Nagendra Gupta,

Since we need to add the group wise serial number in exporting also, we need to make the changes in the processing level of the original data only. So Custom Adaptor solution is the recommended way to achieve your requirement. If you are facing any issues with this given approach, could you please share the details which will be helpful for us to provide a better solution as early as possible?

Regards,

Pavithra S

[Nagendra Gupta]

Dear Pavithra Subramaniam,
​

I am not completely satisfied with your given example. You and your team make and give examples without testing them properly.

Those who have given us serial numbers by generating them, they are failing while doing virtualization in the grouping grid.

Serial number is getting printed wrong when we are scrolling the grid.

Please check the below link for better understanding.

​
https://stackblitz.com/edit/angular-3rfu9k-hkcweh?file=src%2Fapp.component.html ​

Regards

Nagendra Gupta

[Pavithra Subramaniyam]

Hi Nagendra Gupta,

Since adding the serial number is not a default feature, we have provided the solution as a workaround for the reported feature only. So, it may not work with all the Grid features. In the virtual scrolling, we will load the data and render the rows as per the scroll level only. So, adding a serial number is not compatible with the Virtual scrolling and Grouping feature.

Regards,

Pavithra S

[Nagendra Gupta]

Dear Pavithra Subramaniyam,

I am understanding what you are saying. But you and your testing team should have to test properly before handover the task to any user which who use syncfusion controls. Because user totally depend of your proper solution.

Please give me solution which I have shared earlier to you.

Regards

Nagendra Gupta

[Pavithra Subramaniyam]

Hi Nagendra Gupta,

Thanks for your understanding.

As we updated earlier, the workaround for adding a serial number is not compatible with the Virtual scrolling and Grouping feature and there is no built-in option to achieve this requirement. If you want this requirement with any other features, please share the list of features in your Grid. So that we could check the feasibility and test the solution with the listed features and share the solution as early as possible.

Regards,

Pavithra S