Message over table when empty

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’

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…

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

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

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.

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