Contact us
Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 6 days ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Message over table when empty

Oliv Mor
1 decade ago Feb 10, 2012 2:42pm

Hi,

I'm looking for a way to display a message into empty table. The table is designed to display result of a search, but if there is none, the user doesn't know if the search is delayed or the search is done but there are no result.

I've try this trick, using CSS, but i'm not sure this is the best way to achieve my goal:

Table table = new Table();
...
TextField searchTF = new TextField();
searchTF.addListener(new ValueChangeListener()
		{
			public void valueChange(ValueChangeEvent event)
			{
				table.setContainerDataSource(searchObject(searchTF.getValue()));
				if (table.getItemIds().isEmpty())
				{
					table.setStyleName("empty");
				}
				else
				{
					table.setStyleName("");
				}
			}
		});

and the linked CSS:

.v-table-empty .v-table-body {
	background-image: url('sorry_empty.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-color: red;
}

Any comment would be welcome.

Oliv'

Last updated on Feb, 10th 2012
Oliv Mor
1 decade ago Feb 17, 2012 2:22pm

Hi,

Well I've slightly improved to code, using filter features instead of create a new container...

public Example() {

table = new Table();
...
// The search textfield
filterBepTF = new TextField();
filterBepTF.addListener((TextChangeListener) this);

}

public void textChange(TextChangeEvent event)
	{
		Filterable f = (Filterable) table.getContainerDataSource();
		f.removeAllContainerFilters();

		String searchString = event.getText();
		if (searchString != null && searchString.trim().length() != 0)
		{
			AbstractJunctionFilter filter = null;
			for (String part : searchString.trim().split(" "))
			{
				if (filter != null)
					filter = new And(filter, new Or(new SimpleStringFilter(BrowserTable.PROPERTY_NAME, part, true, false), new SimpleStringFilter(
							BrowserTable.PROPERTY_KIND, part, true, false)));
				else
					filter = new Or(new SimpleStringFilter(BrowserTable.PROPERTY_NAME, part, true, false), new SimpleStringFilter(BrowserTable.PROPERTY_KIND,
							part, true, false));
			}

			f.addContainerFilter(filter);
		}

		if (table.getItemIds().isEmpty())
		{
			table.setStyleName("empty");
		}
		else
		{
			table.removeStyleName("empty");
		}

	}

And the style.css:

.v-table-empty .v-table-body {
	background-image: url('no_result.png');
	background-repeat: no-repeat;
	background-position: center center;
}

Any feedback would be appreciate....

Last updated on Feb, 17th 2012
+1
Mathias Clerc
1 decade ago Feb 20, 2012 4:29am

This seems like a quite useful feature and could be a nice add-on if you have the time to wrap it up ^^

mrunal lohar
7 years ago Sep 06, 2015 4:11pm

Hi,

I am using vaadin 7.5 and trying to show message "No results found." on vaadin grid if no contents to display. I read above thread but didnt get exactly what to do.

Please advice.

Thanks
Mrunal

Adam Jilling
6 years ago Jul 18, 2016 6:22pm

mrunal,

table.getItemIds() will return a collection of all the row indices, therefore if a table is empty it will return ""

table.getItemIds().isEmpty()

will return true if the table is empty, false otherwise.

Nikolay Artamonov
5 years ago Apr 12, 2017 12:34pm

After 5 years we still haven't any solution from framework for such basic need :-( I've created issue for that case.