Grid and Touchkit?

Flow
1

Hi all,

Is the Grid (7.4.3) supposed to work with Touchkit (4.0.1)?

I tried to migrate a table that I use with Touchkit to Grid and it works almost, except that you can’t scroll the content on touch devices (in my case an iPad). On desktop browsers, it works.

Any idea?

Thanks
Markus

2

Hi all,

Any idea?

Thanks
Markus

3

Hi, I haven’t tried this myself, but it definitely should work just fine. I’d first try with the latest Vaadin version (7.5.4). If you have issues with it, could you fill a bug report to dev.vaadin.com ? Include all versions (vaadin, touchkit, ios) to help our fellows to track down the issue.

cheers,
matti

4

I wonder if anyone has been successful using a Grid in a Touchkit page?

I have a well working multi-select Grid on a desktop UI. I’ve tried to get it working on a Touchkit UI by:

  1. Making the grid no select, it will be read-only to mobile users
  2. Placing it as a component on the Touchkit UI
  3. Modifying the optimized mobile widgetset as per the instructions in the ?debug window
  4. Copying the relevant css items in the desktop .scss file to the mobile .scss file
  5. Recompiling the theme and widgetsets

The result is a grid with no styling, only text. It won’t scroll horizontally or vertically. Page scrolling can’t be done from any part of the grid. I briefly tried the multi-select grid option on Touchkit and found the checkboxes appeared and the text of the grid would scroll horizontally but the check boxes remained stationary - the text of the Grid slid under them.

I am either missing something important here or Touchkit isn’t working for Grid.

Vaadin 7.5.1, Touchkit 4.0.2, Tomcat 8.0.24, Java 8u51

5

​I have a similar problem using the Table object and even if there is css style on it (when I tried to replace it with a Grid, no more CSS), it does not scroll verticaly when trying to use the project as an application and only in that case. (on Ipad and Iphone with IOS 8).

I don’t understand what I missed since the two objects works perfectly on Vaadin Parking and Mobile Mail…

Working with vaadin 7.4.8, TouchKit 4.0.2 and JBoss 7.1.

6

I just found a solution to your problem.

I included the Valo theme to my application and you can tell it to use the style only for the grid by doing something like this :

[code]
$v-included-components: grid;

@import “…/valo/valo”;
@mixin mymobileapp {
@include valo;
}
[/code]You can find more here :
https://vaadin.com/book/-/page/themes.valo.html

7

Thanks Sebastien. Based on the symptoms (no Grid styling) it looks like your solution should be on the right track. I wasn’t successful getting that to work today but it could easily be something in my configuration. I’m not likely to return to this for a while as second thoughts are that Grid is probably not the most consice or consistent way of presenting the data on a mobile device in my use case. I’ve worked around it for now presenting the key data in an alternate way.

8

I am using a parking demo provided by vaadin and trying to get data in grid while application is offline or online.
I have below code to design text,dropdown and all.

private final VTextField addressField;
private final DatePicker timeField;
private Date date = new Date();
private final VTextField vehicleIdField;
private final ListBox violationBox;
private final ListBox areaBox;

Any idea to get data in grid ?

9

I’m not aware of any examples of the com.vaadin.client.widgets.Grid, but in theory you should be able to use that from the GWT code like others. The source code and JavaDocs might help you to get started. You can also use other GWT data grid components if you want.

cheers,
matti