Grid - Custom TextField and Custom Button collumns which are linked

I have created a rather strange table where there are 3 pairs of TextField/Button combinations. These pairs work something like this …

  • The table stores this weeks data and last weeks data for each of the textfields (along with a great deal more)
  • A calculation is made on the two weeks, and if the difference is too great the validator fires, the field becomes red and the Button becomes enabled.
  • When they press the button, a popup appears where they must give the reason for the difference.
  • Once they give this reason, the validator is happy and the field turns white once more.
  • Each textfield has a different equation to determine if the button becomes enabled
  • Each button opens a slightly different window

One problem is that the client doesn’t like that the table cache’s the data. They like to quickly scroll through, and the loading drives them crazy. Also, there are many other little things that go on when cells are given focus, which makes it a bit slow (for example, they want arrow keys to work between fields). There’s also the fact that the table is a bit glitchy when using the keyboard in general.

Preliminary tests with the Grid showed that it is much more responsive, so I decided to try and rework the table into a Grid. At first this went really well, but unfortunately now I have hit the most important bit, these custom components. The more I read about how to create these custom components, the more I think that what they want isn’t even possible.

From what I gather, it seems that I need to create a custom renderer for this. The problem, how do I link the two columns together? I was thinking to extend a Panel, but I’m not sure that this is even possible. I don’t want to spend days on this only to find that I hit a hurdle that I can’t overcome. Can someone please either point me in the right direction, or confirm that what I want to do is not possible?

First things first:
Is it necessary that the TextField and Buttons are visibile all the time? If not you might be better of using Inline Editors as you can simply assign standard Vaadin components as Editor Fields. So you could even create a custom Panel/CustomComponent with a setValue and getValue method and set it as an Editor. An example can be found here:
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/item-editor

If they have to be visible all the time you have to use a Renderer. Think of a Renderer as a Presentation layer for column data. So if you have a Textfield Renderer on top of a column called “TestColumn” and in the textfield you wrote “TestContent”, item.getItemProperty(“TestColumn”).getValue() should return “TestContent”. Directly accessing the rendered component might be difficult if not impossible (i just recently started diving into Renderers).

To create a custom Renderer you have to know a bit about Vaadin’s GWT client-side as the Rendererd Component is build in GWT and not using Vaadin’s server-side interfaces.

Marius, thank you for the info. Unfortunately, the text fields need to always be visible. This is due to speed. This grid is used for data entry, and the users have many crazy requirements that need to be met.

That being said, I am curious if you can help me out with regards to logically mapping out the structure of the grid. I found this post which gives me an idea of how to develop the custom renderer (
https://vaadin.com/forum#!/thread/9418390/9765924
), but I am not sure if my idea will work. Fact is, I am not sure how to build a column renderer that can access the data of another column, and act accordingly when that data is manipulated. I was thinking to combine the two columns into a single column, placing the text field and button in a HorizontalLayout then rendering this. Do you see any reason that this wouldn’t work?

Next, with regards to the Arrow Keys, what do you think would be the best way to get it so these work properly? Currently, I setup a two dimensional array of text boxes with pointers to the actual text boxes, adding and removing shotcut listners as focus is gained then lost pointing the arrows to the appropriate fields. However, I can’t envision how to do this in the case of a custom renderer. What do you think?

Lastly, if you have any other good links on custom renderers in grids, I would greatly appreciate it. Strangely, it is hard to find much resources on this subject.