Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.


From Wiki
Jump to: navigation, search
Article Metadata
Created: eswar_illuri (28 May 2007)
Last edited: hamishwillee (23 Jul 2012)
Reviewer Approved    Thumbs up icon sm.jpg



Grids are UI controls similar to the lists, in that they display a number of items that can be individually focused and selected. The difference between grids and other kinds of list is that a grid may contain more than one item on a single line. In other words, a grid displays a two-dimensional set of items, a list only a one-dimensional set.

Each item in a grid occupies one cell, and each row contains multiple cells. As with lists, S60 provides a number of different types of grid.

Type Flags to Use in the GRID Resource Example
Selection EAknListBoxSelectionGrid Selecgrid.JPG
Markable EAknListBoxMarkableGrid Markgrid.JPG
MultiSelection EAknListBoxMultiSelectionGrid Selecgrid.JPG
MenuSelection EAknListBoxMenuGrid Menugrid.JPG

Each cell within a grid can contain one or more graphics or pieces of text. Each is referred to as a sub-cell. As with list item fields, a sub-cell is not individually selectable: it is just a component part of the cell, which displays a particular type of data. For example, a grid whose cells contain an icon and a text caption would consist of two sub-cells: one for the icon and one for the text.

The grid's orientation refers to the plane in which items append to it—this can be either horizontal or vertical. You can control the order in which items focus programmatically, such that the focus loops around rows and columns, snakes from row to row or column to column, or stops at particular points. The focus scrolls along rows or columns. When reaching an edge, it can loop, snake or stop. Looping means that if the user attempts to scroll past an edge, it returns to the opposite end of the row or column. Snake means that it moves to the opposite end of the next row or column. Stop means that it will stay at the edge.

As with lists, grid items can be defined dynamic or statically. Unlike lists, you usually determine a grid's layout by calculating exact values, such as the size of the cells and the sub-cells within them, in your own concrete grid class.

Grid Classes

There are a few almost complete grids, and these are Monthly Calender Grid, Pin Board Grid and GMS Grid.

Monthly Calender Grid

This type of grid is used in calendar applications. It displays the days in a single month. The first row shows the days, and the first column the week numbers. The remaining cells show six rows of weeks (to allow for days falling in the previous and next month).


Class CAknCaleMonthStyleGrid
Dimensions 8 by 7 cells with 1 pixel between cells
Example Item String "0\t1\t2" where:

0 = 21 by 19 icon occupying the whole cell—use this for outlining a cell, for example, with a border or colored box

1 = 5 by 5 icon occupying bottom right of cell—use this for marking a day

2 = day number. This should be a maximum of 2 characters wide. Any more and it will show the first character followed by an ellipsis, for example, "123" shows as "1…"

Orientation Vertical

Pin Board Grid

This grid type represents a pin board used to display shortcuts. A possible example use would be in a favorites application, which stores shortcuts to a user's preferred applications and files.


Class CAknPinbStyleGrid
Dimensions 5 by 5
Example Item String "0\t1\t2", where:

0 = 29 by 25 icon occupying center of cell, showing the application for which this is a shortcut, or an icon representing an application instance

1 = 13 by 13 icon occupying top right of cell, used for marking the item

2 = 13 by 13 icon occupying bottom left of cell, used to show the application for which this is a shortcut, if this is a instance of an application

Orientation Vertical

GMS Grid

This type of grid is a markable graphic grid. It could be used, for example, by a graphics messaging application to show a grid of picture messages that can be marked.


Class CAknGMSStyleGrid
Dimensions 2 by 4 as default, but can be changed in ConstructL()
Example Item String "0\t1", where:

0 = 74 by 28 icon occupying background of whole cell

1 = 13 by 13 icon occupying foreground in top right of cell, used for marking the item

N.B.: A 13 by 13 unmarked item icon should also be supplied and will be shown by default until the item is marked

Orientation Vertical


Grid example

Using Grids API's

This page was last modified on 23 July 2012, at 05:44.
35 page views in the last 30 days.