By migrating my (first) vaadin programm from 7 to 8 I’m experimenting some issues.
I must say that all the issues described here worked in Vaadin 7.
How to update Vaadin 8 grid
I have grid of products in AbsoluteLayout wich form part the form of the type Window
To update this grid another form of type Window is open.
After adding new product this form is closed and the grid’s content is not updated.
In Vaadin 7 this was working, but doesn’t anymorein Vaadin 8.
public class FormAddProduct …
…
private void buttons() {
btnSave.addClickListener( event → {
saveProduct();
close();
});
I tried without line “UI.getCurrent().access(() → {”, and didn’t work either
How to select/deselect a Grid
I select my grid like this
grid.addSelectionListener(event → {
selection = grid.asSingleSelect();
.
.
});
But when I have in the code a listener to deselect the selection
abslayoutFormContent.addLayoutClickListener((LayoutEvents.LayoutClickEvent event) → {
grid.deselectAll();
});
they ocurr at the same time and that way the events has no efect.
How to solve this?
CheckBox Problem
In my grid I have the line to create checkbox in a column, but this checkbox can be clicked I don’t know how
to make it Read Only
grid.addComponentColumn(
p → new CheckBox(“”,.isActiv())).setId(“activCol”).setCaption(“Activo”).setWidth(60);
I don’t know if this way is correct and how to make the checkbox read only.
There are quite a few issues here, might be useful to divide them to separate threads since it’s simpler to address one problem at a time. Also, if you have any simple GitHub project or other test code that reproduces the issues that might speed things up.
To start with the check box, it doesn’t have to all be on a single line, you can save a (temporary or permanent) reference to the checkbox and call setReadOnly(true) for it separately. If you want to keep it within the setter, you can change it to p → { … return checkbox; } similar to your selection listener handling. Note that e.g. binding might override read only state, so if it doesn’t work, add some break points or logging to figure out just what is going on there. It’s been a while since I played with the editor and don’t have time to set up a new project and test it right now, so I can’t remember the details very well off the top of my head, but if there are issues you might need to call the method at different stage of proceedings, and for that you might need an outside reference.
You other question was about getting items updated in Grid after you modify them.
There are to methods in DataProvider, refreshItem(…) and refreshAll(). If you are adding and/or removing items, you should allways use the later one. If you modify specific item which is already in dataset, you can refresh it with the first one.
Also note, that you cannot use UI.getCurrent() in background thread in Vaadin 8. You need to first get the UI in some thread safe place, e.g. constructor of the presenter class or something like that. There is small change between Vaadin 7 & 8. Vaadin 7 allowed to do that, which worked in some scenarios, but was very prone to errors, thus better pattern to use it is enforced in Vaadin 8.
Thank you both for the [quote=Tatu Lund]
You other question was about getting items updated in Grid after you modify them.
There are to methods in DataProvider, refreshItem(…) and refreshAll(). If you are adding and/or removing items, you should allways use the later one. If you modify specific item which is already in dataset, you can refresh it with the first one.
Also note, that you cannot use UI.getCurrent() in background thread in Vaadin 8. You need to first get the UI in some thread safe place, e.g. constructor of the presenter class or something like that. There is small change between Vaadin 7 & 8. Vaadin 7 allowed to do that, which worked in some scenarios, but was very prone to errors, thus better pattern to use it is enforced in Vaadin 8.
Thank you both for the answers. I was able to solve my “CheckBox” issue using VaadinIcons as the simplest solution in this case.
According to Grid updating I have solved in some way this problem, but I don’t know if this is the correct solution. Namelly, calling
formProductList.refreshGridProductos(false, “”, “”);
before
close();
the Grid does refresh. But I don’t like this approach calling “refresh” method from formProduct after adding or editing product’s data but I don’t know how to do it another way.
First I call my form
FormListProducts (a Window object) from the main page (VerticalLayout) and then from
FormListProducts
another Window object
FormProduct
. I haven’t found an example of how to refresh grid in my case. Also I don’t know how to do it without
UI.getCurrent()
and “in some thread safe place” as you mentioned. Can you show me how to do this with an short example?
Besides, I don’t know when and/or why should I use
ListDataProvider
instead of .setItems. I haven’t found anything in Vaadin documentation about it.
Issue with the Footer:
I want to know how to update this line of code after updating the grid:
footer.join(“col1”, “col2”, “col3”).setText("Products: " + listOfProducts.size());
I hope I was clear enough in my explanation. I have even more cuestions.
I think this kind of situations should be described in Vaadin documentation.
Hi Aleksander!
Sorry to intrude, but maybe I could give a hand with your last post.
If I understood you correctly, you have a window (named
FormListProducts ), and then, from that window you’re opening another one (named
FormProduct ). In that one you’re modifying some item of a grid that belongs to the other window (
FormListProducts ) and you want to see that change in the grid, after you close the window "
FormProduct ". For doing that, you have a reference to that window and you’re invoking a method named
refreshGridProductos , inside that method (I’m guessing here) you’re calling the method
refreshItem of the grid component. If you’re calling that method (
refreshGridProductos ) from a listener of a button (maybe a close button on the
FormProduct screen, you don’t need to enclose that in
UI.getCurrent().access() because you are already in the context of the UI. You said that you don’t like that approach, another one, would be to use lambda expressions, and send a callback to the
FormProduct window (maybe in the constructor?), so that can be called after you hit the close button, and in that callback you could execute the
refreshItem method of the grid.
ListDataProvider is the most common implementation of DataProvider, you don’t need to cast to that class if you want just to execute the
refreshItem method.
Remember that if you have modified the contents of a single object represented by a single row of the grid, you should call
grid.getDataProvider().refreshItem(item) , and if you have added or deleted an item of the underlying collection, you should call
grid.getDataProvider().refreshAll() .
Regarding your last question about the footer, you should first obtain a footer row (using
getFooterRow ) and then obtain a specific cell of it using
getCell , and then invoke the
setText method.
Hope this can be helpfull to you!
Regards.
If this aproach is OK where
formA calls
formB and then
formA is called from
formB to do some work in the very the same form (
formA ) then I will let like this without complaining. Especially because is working and I don’t know how to do it the other way.
In fact I do the refresh like this
grid.setItems(listOfProducts);
after retriving the product list from backend.
Acording to
grid.getDataProvider()
can yo send me an example, “plis”? I haven’t found anything it.
UI
I don’t use any more
UI.getCurrent().access().
For accesing and showing a Window object from another Window form I use
UI.getCurrent().addWindow(formProduct);
Footer:
I have FooterRow like this
FooterRow footer = grid.appendFooterRow();
footer.join(“col1”, “col2”).setText("Products: " + listofProducts.size());
how to know what is the name of the cell now:
footerRow.getCell(???);
You could save the merged cell (that the footer.join returns) to a variable so you’ll have the reference ready. In my opinion getCell with either column id
should return the merged cell, but it doesn’t – should probably make a
new issue about it.
I did exactly this.
And yes, the behaviour of this feature is little bit weird. The FooterCell should have
setCell_id(xx) or something like this where one would be able to save joined cell to a new cell.
Finally, I don’t have further issues for now.
But I repeat my constructive critics, all this issues I consider trivial, but in Vaadin they became complicated and without good explanation.
For example, HeaderRow and FooterRow are not totally the same, nevertheless only HeaderRow is explained (with the code) satisfactorily.
The same situation is with SingleSelect and MultiSelect Grid Mode.
Thank you all for all the support,
Regards,
Aleksander
I will continue in this post because the cuestions are similar to the posts already posted.
[u]
[i]
RadioButtonGroup
[/i]
[/u]
how to change the color of this component?
I managed to change the colr of the label but not of the control it self.
I thought that is the same as for
CheckBox
So, for Check Box I did it like this: .
v-checkbox {
color: $barvaModra;
@include valo-checkbox-style($selection-color: $barvaModra);
}
For RadioButton this style does not work:.
v-radiobutton {
color: $barvaModra;
@include valo-radiobutton-style($selection-color: $barvaModra);
}
[u]
Panel’s Caption color and backgroud color
[/u]
how to change both of them without ValoTheme internal calculations?
3) CheckBox and Required Field Indicator
the indicator doesn’t appear beside the label and I added it with the help of “::after”
but when the error ocurr I got the situation showed at the snapshot (“CheckBoxReuiered.jpg”)
4) I have a grid where by clicking a row a window opens.
everything fine so far.
But I want that the window opens bellow the clicked row. (snapshot “RowAndOpenedWindow”)
Is there a way to know which row of the visibles Grid rows was clicked?
The stylename for RadioButtonGroup seems to be “v-select-optiongroup” and “v-select-option” is used for individual RadioButtons
This is tricky. I can figure out couple of ways to determine row index of the given item. However I think you need the relative row index of the visible rows, which is different thing. That is the tricky part. I think you should reconsider to use details generator for this, since it opens right below. Would be easier to implement. If you really need window, one approach would be to use click coordinates, something like:
I want to know, if
TwinColSelect is not ment to be bind with “Binder”
I recive the error that the source code can’t be compiled.
I solved this binding to the Binder the “unattached” TextField to be able that way to run
binder.validate() and to get my error message.
I’m still waiting for the aswers 2), 4) and 5). Especially, I want to know how to use ComboBox and TwinColSelect with the Binder, or, with something else, if Binder is not to ment to use with this two Components.
