Browse Prior Art Database

A new method of interaction/displaying data grid UI on cross platform devices Disclosure Number: IPCOM000238402D
Publication Date: 2014-Aug-25

Publishing Venue

The Prior Art Database


This disclosure describe a new way for displaying and interacting tree grid web widget on mobile. In order to save the limited screen space on mobile, this disclosure suggest a new way to display the complex tree grid web widget and make the user interaction more reasonable and with better user experience, which also focus on displaying the most important data on the limited mobile screen space

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 50% of the total text.

Page 01 of 17

A new method of interaction

A new method of interaction/

//displaying data grid UI on cross platform devices

displaying data grid UI on cross platform devices

[Field of this invention]

The present invention relates to an user inerface model in web and desktop of computer and smart device technologies;

[Problem, known solution, related ART, drawbacks]

In nowadays information and internet age, more and more information is displayed on computer and smart device screens; Table, as a basic UI element, is widely used in desktop application, mobile application and web pages, especially for display a set of objects which have common attributes;

A table usually has two dimensions: row and column; A row represents one data record, such as a person; a column represents an attribute of the record, like "name"; With a row and a column, user would get the the specific attribute of that record, for example a person's name is "Tom"; Fig. 1.1 is a sample of a table.

Nam e

Ag e

Point s

Tom 33 50 Mike 21 94 Jack 45 80 Ada
m 28


Fig. 1.1 Table sample


Page 02 of 17

The table in Fig.1 is a "plain" table: each row is at the same level and has the same attributes. While sometimes the records in one table are not at the same level, they have "parent" and "child" relationship. For example, one row represents the whole year 2014, another row represents first quarter of 2014, then the first row is the "parent" of the second, and the second is the "child" of the first row.

In order to clearly give user the relationship info, the table need some extra behavior such as expand, collapse and indent; the table that created for display such tree structured data we call it "tree table. Fig. 1.2 is a sample of tree table.

Fig. 1.2 Tree table sample.

Tree table is good, but it also has problem; Take Fig.2 as an example, its first three columns are used to represent the level information: season, game and quarter; only next 4 columns are for displaying information; Look at the third row "Quarter 1", its first two columns are blank, as they are indents just to indicate this row is a child under "Game 1" of "Season 1". The space utilization rate in third row is only 5/7=71% (assume each column has the same width). If there are more levels, the rate will be further low. If there are more columns to show, or this is on a small size screen, this tree table will not fit.

Considering the mobile and smart devices are more and more popular, a tree table which can maximally utilize the screen space will have a strong need.
[Core idea]


Page 03 of 17

Fig. 2.1

The present invention has two key points:

1. Dive in and dive out by on a row

Show an arrow at the end of the row if the current row has children; When user click the arrow icon towards the right (->), an animation will show to dive in to the children view.

The animation contains 2 steps: The first step is moving the left rows out of the screen and then moving the children rows into the viewport. The second step is mov...