Grid: Start row count from 1?

Flow
1

I saw in the Java example that there is a way to add row # to a Grid:

// You can use the [[index]
] variable to print the row index (0 based)
grid.addColumn(TemplateRenderer.of("[[index]
]")).setHeader("#");

However, is there a way to modify this so the count starts with 1 instead of 0?

2

There is no variable like a 1-based-index to use there.

However, it can be achieved by adding an index field to the class that holds the grid, and then do

grid.addColumn(this::getRowIndex).setHeader("#");

private int rowIndex = 0;
private String getRowIndex(){
    return String.valueOf(++this.rowIndex); // increments the rowIndex for each row
}

rowIndex will need to be reset after reloading of items (maybe after resorting too, I don’t know).

There is also [this variant]
(https://vaadin.com/forum/thread/15863529/15868120) (V8 grid, but the idea should still work)

3

Would this solution be able to handle updating the rowIndex value when grid Filtering is involved, though?

4

[Vaadin 10 Grid 1-based rowindex - what is the simplest way to achieve?]
(https://vaadin.com/forum/thread/17245260/vaadin-10-grid-1-based-rowindex-what-is-the-simplest-way-to-achieve)

[row numbering - it would be nice having also 1 based index #1386]
(https://github.com/vaadin/vaadin-grid/issues/1386)

I modified the following code in my project and it works fine (Vaadin 12.0.3):

org\webjars\bowergithub\vaadin\vaadin-grid\vaadin-grid-5.2.5.jar\META-INF\resources\webjars\vaadin-grid\src\vaadin-grid.html

__getRowModel(row) {
        return {
          index: row.index+1,
5

I’m not sure how manually modifying the .jar file would be helpful.

The GitHub issue you linked mentions a way of achieving this through Renderers - would you happen know of any examples? I am using the pure Java (vaadin-grid-flow) version of Vaadin, so I am not very savvy with the Polymer template solution, but if that is an option, that would be helpful to know of, too.

6

Tori Santonil:
I’m not sure how manually modifying the .jar file would be helpful.

The vaadin-grid-flow java compenent is based on the vaadin-grid-5.2.5.jar (polymer) webcomponent.
For me that modification was the fastest and simplest workaround. I could not manage it using computed bindings and I am not sure whether such a thing is possible.
I tried something similar like this using an own js function to increment the current index value:

[https://stackoverflow.com/questions/46143762/polymer-how-to-use-imported-function-in-computed-binding]
(https://stackoverflow.com/questions/46143762/polymer-how-to-use-imported-function-in-computed-binding)

[https://stackoverflow.com/questions/45136185/how-to-access-functions-defined-in-js-file-inside-the-template-of-polymer-elemen]
(https://stackoverflow.com/questions/45136185/how-to-access-functions-defined-in-js-file-inside-the-template-of-polymer-elemen)

7

Norbert Pocze help was great since Grid v 5.4.8.
Grid structure completely changed, moreover is in different jar: com.vaadin:vaadin-grid-flow.
Please help. How to change the grid, to enable row count starting with 1 instead of 0.
Thanks.
Honza.

8

Jan Halík:
Please help. How to change the grid, to enable row count starting with 1 instead of 0.

Changed to this code

__getRowModel(row) {
        return {
          index: row.index+1,

in the file META-INF\resources\webjars\vaadin-grid\src\vaadin-grid.html in .m2\repository\org\webjars\bowergithub\vaadin\vaadin-grid\5.4.8\vaadin-grid-5.4.8.jar using vaadin version 14.0.3 and vaadin.compatibilityMode=true still works with my project.

9

Yes but not when the compatibility mode is set to false. Which should be clear solution.
Honza.

10

Honza, I agree. Where are the files of the grid component used by v14 located when compatibility mode set to false? Is it vaadin-grid-flow-4.0.5.jar ?
In the .m2\repository\com\vaadin\vaadin-grid-flow\4.0.5\vaadin-grid-flow-4.0.5.pom I see :

<dependency>
            <groupId>org.webjars.bowergithub.vaadin</groupId>
            <artifactId>vaadin-grid</artifactId>
            <version>5.4.8</version>
</dependency>
11

The problem with editing the vaadin-grid.html is that you need to apply this manual patching each time you update the framework.

One solution could be to add support for so called calculated data binding or in more generic case support for script part with template into TemplateRenderer, but that is not a trivial thing to do.

Here is an example how you do it with Polymer template https://stackoverflow.com/questions/40869721/computed-properties-on-an-item-of-dom-repeat-template, but this cannot be used with TemplateRenderer at the moment.

12

[This]
(https://stackoverflow.com/a/62061436/3441504) is how it can be done, without having issues at each framework update. Cheers

13

Kaspar Scherrer, thank you so much! This solution worked perfect for me, and also updates accordingly to filtering.