[Vaadin-Grid] Exclude specific column from sorting.

Flow
1

Hi,

I am using vaadin grid component to display data. It has some columns including a serial number column. The problem is whenever I sort the grid by clicking on grid header on other columns. The serial number column also gets sorted. How can I exclude a particular column from sorting. I have tried using setSortable(false) on Serial Number column. But all it does is, remove the sort icon from it’s header.
I will appreciate any suggestion. Thank You.

2

Are you sure that this isn’t just coincidental? What I mean is, when you sort by clicking another column, is that column sorted properly afterwards?

If that’s not it, you should provide some code to reproduce your issue so we see what you mean.

3

Kaspar Scherrer:
Are you sure that this isn’t just coincidental? What I mean is, when you sort by clicking another column, is that column sorted properly afterwards?

If that’s not it, you should provide some code to reproduce your issue so we see what you mean.

Thanks for the reply. I guess I did not provide sensible explanation of my problem.

Here is my grid implementation,

public class MyView extends VerticalLayout {
	private Grid<Status> statusGrid = new Grid<>(Status.class);
	// Status is entity class with fields id, channelName, time and status 
	private StatusDaoService statusDaoService;

	public MyView(StatusDaoService statusDaoService) {
		this.statusDaoService = statusDaoService;
		createGrid();
		setSizeFull();
		add(statusGrid);
	}

	private void createGrid() {
		List<Status> statusList = statusDaoService.fetchStatusData();
		statusGrid.setItems(statusList);
		statusGrid.removeColumnByKey("id");
		statusGrid.removeColumnByKey("status");
		// Custom column for serial number
		statusGrid.addColumn(status -> {
			int serial = statusList.indexOf(status);
			return String.valueOf(++serial);
		}).setHeader("S.No").setKey("serial").setSortable(false);
		statusGrid.addColumn(new ComponentRenderer<>(status -> {
			Icon statusIcon = null;
			if (status.getStatus()) {
				statusIcon = new Icon(VaadinIcon.CIRCLE);
				statusIcon.getStyle().set("color", "#16eb07");
			} else {
				statusIcon = new Icon(VaadinIcon.CIRCLE);
				statusIcon.getStyle().set("color", "#fc1303");
			}
			return statusIcon;
		})).setHeader("Status").setKey("status");
		statusGrid.setColumnOrder(statusGrid.getColumnByKey("serial"), statusGrid.getColumnByKey("channelName"),
				statusGrid.getColumnByKey("time"), statusGrid.getColumnByKey("status"));
		statusGrid.getColumns()
				.forEach(statusColumn -> statusColumn.setAutoWidth(true));
	}
}

This code produces the grid with 4 columns - Sl. No, Channel Name, Time and Status (Please see attached screenshot)
Whenever I click on channel name header to sort the grid data. The serial number column data gets disturbed too (Please see attached screenshot). But I don’t want that to happen. I want serial number to be constant in the grid. Even if I sort other columns.

18288421.png
18288424.png

4

Oooh, its supposed to be just an index row for the grid, not a serialNumber property of your item. that clears things up

What you missed was that the statusList will not be changed/sorted when the user does some sorting. Therefore, the statusList.indexOf(status); will still return the same index after reordering.

Here is how you can add an index column for your grid, that will always remain the same no matter the sorting:

grid.addColumn(TemplateRenderer.of("[[index]
]"))
		.setHeader("S.No").setKey("serial").setSortable(false);

However, I believe [it will start with 0 and not 1]
(https://vaadin.com/forum/thread/17471146/grid-start-row-count-from-1).
If you need it to start at 1, you can’t do it with a templaterenderer (you can’t do something like TemplateRenderer.of("[[index+1] ]")).
You would have to somehow find out the indexOf(status) from a list that is actually sorted the way the user sees it. → you will probably have to use the grids dataproviders fetch method for this, or Have your own dataprovider implementation that will store the list upon each fetch to prevent too many calls of dataprovider.fetch

Also, please do notice that by calling this column “Serial Number” it implies that its value comes from an actual property of the status. Serial Numbers are usually unique identifying numbers that never change for one item. But in your grid, an items serial number would appear to change on each reorder.

5

Hi Aman

I was very interested in this so I tried some things out and have found a working solution for an index column that starts at 1. I have shared my findings in [this stackoverflow post]
(https://stackoverflow.com/a/62061436/3441504). Cheers

6

Kaspar Scherrer:
Hi Aman

I was very interested in this so I tried some things out and have found a working solution for an index column that starts at 1. I have shared my findings in [this stackoverflow post]
(https://stackoverflow.com/a/62061436/3441504). Cheers

Thank you. It works now.
It would be great if there was a official java way to do this.
Thanks for quick fix Kasper.