HowTo - Using GridView



This is a simple tutorial on using GridView component.

A GridView is a component that displays items in a two-dimensional, scrollable grid. The GridView can contain list of TEXT items or Asset image items OR combination

For tutorial purpose, we are using 2 GridView components. The top GridView will include list of Text and the bottom GridView will include list of asset images. The gridview data can be populated using Designer property “ElementsFromSctring” or using blocks like below:

After data is populated, you’ll see results like below:

GridView includes an Event block called AfterPicking. Using this block, allows you to determine which item has been selected (tapped). This block includes a parameter called ‘item’ that shows the name of the selected-item:

Gridview usage!
Are these Right?

Hi Hossein this is a fantastic component that opens up various management options. I want to exploit this element to create a dynamic list of objects, but I need some extra properties for the cells.
The first one does is to give a padding color to highlight the edges of the cells. I also invite other users to give suggestions to other features that can be implemented in this component.
Regards Enzo


Sorry Hossein, I would also add the ability to return the index of the item clicked. It would be very useful. Do you think you can implement these implementations?


It would also be useful to be able to handle other cell events, such as focus and value change. I make an example, I insert a function that calculates the sum of the column a + column b on column c, and changing the column a automatically changes the value of column c.
It would also be very useful to edit the cells.
Hossein do you think it can be done?


@enfandroid so you want to use it as spreadsheet??


as well as a spreadsheet, wanting I could handle it from now on, but I need to know the index of the clicked cell. it’s possible?


@enfandroid we’ll check into it


Hi Hossein, I was thinking of this component as a tool to create interfaces in “run time”, so I would have the following requirements:

  1. Return of the cell index on which you clicked. It is probably best to know which cell of what line was clicked.
  2. Different color for the padding, so you can see better rows and columns.
    I thought I would keep properties in memory for each cell, but I can do it only by knowing which cell of that row has been chosen.
    I would be very grateful for these implementations and I think they might be important to many.


It would also be useful to capture the “long press” event


This looks great, are there any examples or demos of this component in action??


Hello, I would like that this component had have the follow methods:

  • One method to get the value or id when one element is clicked. For example, if I click on element 3, this method return the id 3, if i click on element 150, this method return me the id 15.

  • One method to allow change the value o image of the elements in the grid. Like the game mines of windows.

This would serve us for example to have a grid of tasks and mark which ones I have finished and which I have pending, or have a grid that allows me to mark the pages that I have read from a book, etc., with these changes, it would be magnificent, it could be done many things.


Hi, I think this compunent can be very helpful, is there a way to set the dimension of columns ?
If not, do you think to implement this function?


I have a problem with the width of the columns in a grid view (height and width to fill parent). There are 6 elements (columns) by row:


The images are prefect, but the text columns are too narrow and only two letters can be seen (even in landscape).
Any idea?


Size of thumbnails is resizing all other cells.
May this be changed?