I want to remove an item from Vaadin 8 grid, but as far as I see, it’s not possible, or is it ?
if you remove the item from the dataprovider (or database) and refresh the dataprovider, it will be removed from the grid. What do you mean “it’s not possible to remove a item” ?
You have an example (with spring and vaadin 8) here: https://github.com/vaadin/framework8-demo/blob/master/spring-demo/spring-demo-ui/src/main/java/com/vaadin/framework8/samples/crud/ProductDataProviderImpl.java
Well, in Vadin 7, I can use com.vaadin.data.util.AbstractBeanContainer.removeItem(Object itemId) to remove the item from Container & force refresh the client side with recalculateColumnWidths().
But now, do I need to reselect all the data from database or the datasource that I’m usign just to delete 1 item from the grid ?
If you use a “lazy” list (see example) I think you have to query your database. (done by the dataprovider)
If you use a “simple” list (ListDataProvider), you don’t have to:
ListDataProvider dataProvider = new ListDataProvider(yourObjects);
grid.setDataProvider(dataProvider);
// remove object
dataProvider.getItems().remove(yourobject);
dataProvider.refreshAll(); // don’t make a query
OK.
The only thing here is grid.getDataProvider().getItems() doesn’t exist, so I need to know that I had a ListDataProvider, grid.setItems() return the DataProvider as return type but it creates a ListDataProvider, and cast it, or like you did, I need to create the provider with data & keep a ref. to it.
Shame that DataProvider itself doesn’t have getItems() method.(I know that it’s not possible because of Lazy providers)
Unfortunately the DataProvider cannot have the getItems() method, because for a lazy data provider using that would imply fetching all the items from the backend. So currently you have to cast the DataProvider to ListDataProvider.
Another thing, which we are aware of, is the unfortunate missing of removeItem functionality from DataProvider.
Thannks. I suppose it’s not possible to add removeItem functionality to the DataProvider in the future, rgiht ?
Hi Pekka,
is there any news about the ticket?
We don’t currently have that ticket in scope, since it is considered as an improvement that is not a
must have
and we have other things that have higher priority for now.
I recommend doing a +1 on the ticket, it doesn’t quarantee we’ll do it immediately, but at least we can see that it is a requested feature.
If your dataprovider source is a java.util.List you can simply remove item from there, then do a Grid.getDataProvider().refreshAll().
How to remove items from a grid?
This does not work:
grid.getDataProvider().getItems().remove(app);
grid.getDataProvider().refreshAll();
I have to switch views to see the effect of the removal operation.
You have to keep a reference in your code to the list:
List<MyEntity> entities = service.getMyEntities();
grid.setItems(entities);
...
entities.remove(anEntity);
grid.getDataProvider().refreshAll();
I use this template in my project and it works perfectly.
Hey Luca Pertile,
thanks you very much for your quick answer. It works exactly they way you showed me. I wonder why i have a ListValueProvider. For adding elements the ListValueProvider works as expected.
Somewhere in documentation I read that, by default, Vaadin create a ListDataProvider when we use grid.setItems().
I have a three semi-large grids on one page.
Each of them have up to 100 rows and up to 40 columns.
If i modify my grid’s dataProviders and invoke refreshAll() method - it works fine, but there is large data transferred from server to browser. It is about 100Kb and more. At this moment UI freezes for a some seconds, but then works again. After 100-200 grid update operations UI freezes completely and is fully unresponsible. But, if i look at Chrome’s debug console - large data transfer continue.
I think i need to minimize data transfer and grid ui update operations. I have learn to change one item by refreshItem() method, and it took about 1-2Kb at transfer. It is ok. But i don’t know how to make remove and add row operations without full refreshAll() method invoking.
Is there some examples ?
Alexander Cherepanov:
I have a three semi-large grids on one page.
Each of them have up to 100 rows and up to 40 columns.
If i modify my grid’s dataProviders and invoke refreshAll() method - it works fine, but there is large data transferred from server to browser. It is about 100Kb and more. At this moment UI freezes for a some seconds, but then works again. After 100-200 grid update operations UI freezes completely and is fully unresponsible. But, if i look at Chrome’s debug console - large data transfer continue.
I think i need to minimize data transfer and grid ui update operations. I have learn to change one item by refreshItem() method, and it took about 1-2Kb at transfer. It is ok. But i don’t know how to make remove and add row operations without full refreshAll() method invoking.
Is there some examples ?
You should use a DataProvider with pagination, so only the actual page (about 40 rows) will be sent to the client. For example CallBackdataProvider can be paginated, but I think also ListDataProvider is paginated by the lazy-loading pattern.
Anyway, with 40 columns and 40 rows, the payload can be too heavy. Try to display less rows using the method Grid.setHeightByRows or try to hide some less important columns (but pay attention on presentation results).
Luca Pertile:
Alexander Cherepanov:
I have a three semi-large grids on one page.
Each of them have up to 100 rows and up to 40 columns.
If i modify my grid’s dataProviders and invoke refreshAll() method - it works fine, but there is large data transferred from server to browser. It is about 100Kb and more. At this moment UI freezes for a some seconds, but then works again. After 100-200 grid update operations UI freezes completely and is fully unresponsible. But, if i look at Chrome’s debug console - large data transfer continue.
I think i need to minimize data transfer and grid ui update operations. I have learn to change one item by refreshItem() method, and it took about 1-2Kb at transfer. It is ok. But i don’t know how to make remove and add row operations without full refreshAll() method invoking.
Is there some examples ?You should use a DataProvider with pagination, so only the actual page (about 40 rows) will be sent to the client. For example CallBackdataProvider can be paginated, but I think also ListDataProvider is paginated by the lazy-loading pattern.
Anyway, with 40 columns and 40 rows, the payload can be too heavy. Try to display less rows using the method Grid.setHeightByRows or try to hide some less important columns (but pay attention on presentation results).
Thanks for reply, Luca!
I was develop simple class that compare two lists: original (currently actual and painted on Grid) and modified (loaded from database). This class uses Javers library (org.javers.core.Javers) and creates three internal lists: ‘objectsToAdd’, ‘objectsToRemove’, ‘objectsToUpdate’. Then i check if only ‘objectsToUpdate’ non-empty and others two are empty then i only use refreshItem() on ‘objectsToUpdate’ list. Else i invoke refreshAll().
It solve my problems, because most frequently changes for me is ‘objectsToUpdate’ and rarely ‘objectsToAdd’, ‘objectsToRemove’.