Row number after filtering

Question

How can I display row numbers in order after filtering? The table below should be 1,2,3 instead of 1,2,4.

Sujith Kumar Rajkumar · Accepted Answer

Hi Rohit, Greetings from Syncfusion support. Based on the query we would like to let you know that the pdf and excel export draws value on the exported document from the Grid data source. And since the index is directly set as inner text the value will not be present in the exported document. So for this case you need to add this value as the corresponding column value before pdf and excel export. The steps for achieving this requirement are mentioned below, Instead of the approach mentioned in the last forum update, we suggest you to use the column template functionality to achieve the requirement of displaying index values in each row. This is demonstrated below, constructor() { super(...arguments); this.template = this.gridTemplate; } gridTemplate(props) { // Here the index values will be returned in the arguments which can be used for setting row index values in columns var index = props.index; return (

{index}

); } render() { return (

); } Then in the Grid’s pdfQueryCellInfo and excelQueryCellInfo events(triggered for each cell before export), set the index value(using a global index variable) to the arguments value property for the index column. // Grid’s toolbarClick event handler toolbarClick(args) { switch (args.item.text) { case 'PDF Export': // The global index variable is set as ‘0’ to start from initial row this.index = 0; this.grid.pdfExport(); break; case 'Excel Export': // The global index variable is set as ‘0’ to start from initial row this.index = 0; this.grid.excelExport(); break; } } // Grid’s pdfQueryCellInfo and excelQueryCellInfo event handlers exportQueryCellInfo(args) { // Check if event is triggered for the index column if (args.column.headerText === 'Index') { // The global index value is set as the column value args.value = this.index.toString(); // The global index value is incremented for the next row this.index++; } } We have prepared a sample based on this for your reference. You can find it below, Sample: https://stackblitz.com/edit/react-xybnto More details on this can be checked in the below documentation links, Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/#column-template API links: https://ej2.syncfusion.com/react/documentation/api/grid/#excelquerycellinfo https://ej2.syncfusion.com/react/documentation/api/grid/#pdfquerycellinfo Let us know if you have any concerns. Regards, Sujith R

Sujith Kumar Rajkumar · Answer

Hi Jesse, Greetings from Syncfusion support. Based on your query, we could understand that your requirement is to display the row number continuously in all the Grid actions performed. You can achieve this using the valueAccessor method of the Grid columns which helps to access/manipulate the display data. We have prepared a sample based on this which you can find along with the code example below, export class FilterMenu extends SampleBase { constructor() { super(...arguments); this.indexVal = 0; } // Grid’s dataBound event handler dataBound() { // Global index variable value is set as ‘0’ this.indexVal = 0; } // Value accessor method rowNumerCal(field, data, column) { // Incremented index value is returned for each cell return ++this.indexVal; } render() { return (

. .

); } } render(, document.getElementById('sample')); In the above code snippet, we have defined a global variable as index and assigned its initial value as 0 . Then, we have incremented the row number in the ‘valueAccessor’ method for each call and returned the value. The initial value of the index variable is reset to 0 in the dataBound event handler of Grid. Sample : https://stackblitz.com/edit/react-1drquv?file=index.js More details on this can be checked in the below documentation links, Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/#valueaccessor API: https://ej2.syncfusion.com/react/documentation/api/grid/#databound Please get back to us if you require any further assistance. Regards, Sujith R

Jesse LaVere · Answer

I have tried to implement your code, but I can't seem to get it right. Perhaps it's conflicting with some of the the other filtering or features we're using.

Here's a link to the code:

https://stackblitz.com/edit/react-1drquv-yf6cq8

Here's a full screen demo

https://react-1drquv-yf6cq8.stackblitz.io/

I've attached a screen recording showing that the numbering "tries" to load from one, but then filtering or something interferes.

This behavior occurs in all the browsers I've tried.

Firefox 82, Chrome 86, Safari 14

Attachment: Screen_Recording_20201030_at_2.13.40_PM.mov_7f44414e.zip

Sujith Kumar Rajkumar · Answer

Hi Jesse, 

We checked your reported problem with the provided sample and could see that you have applied initial filter settings and enabled frozen columns in the Grid. Both the frozen and movable columns will be created and appended separately in the Grid and so with these settings the row number requirement cannot be properly achieved in your scenario as the initial filter settings is defined for a movable content column and the row index is defined in a frozen content column. Because of this when the value accessor is triggered for the frozen column it will have the entire data based on which the index values will be set and after that when the movable content is rendered and filter is applied for a column, the data size will be modified thus altering the row index count. 

So for your scenario we suggest you to achieve this requirement by appending the row index count to the frozen column cell’s inner text in the dataBound event as demonstrated in the below code snippet, 





const dataBound = () => { 
    indexValue = 1; 
    gridRef.current.contentModule.freezeRowElements.forEach( ele =>  { 
      ele.querySelector('.e-rowcell').innerText = indexValue; 
      ++indexValue; 
    }); 
}; 

We have modified the shared sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/react-1drquv-fvzpyx  

Let us know if you have any concerns. 

Regards, 
Sujith R

Rohit · Answer

I implemented this with ref and it works in grid but when I am using this column in pdf or excel export, it doesn't show up.Values are  empty, column is shown but blank.