Simple Dynamic Grid View Using Dynamic Extension

Introduction

Hi Koders, it’s been a few months since the latest guide from me. Today I will share a method to make simple and customizable grid view using @yusufcihan’s dynamic component extension.

Blocks

First Method:

It is a loop in a loop.
Firstly, it will create numbers of row using Horizontal Arrangement. Inside the row (Horizontal Arrangement), we have to create your desire numbers of cells. After a couple loop, it’s done!

Note: in the calculation of the id, `5` is the number of cells in each row, so you have to input your own number. (column is a wrong variable name)

Second Method:

This time, we will create the needed row first. Afterwards, add the numbers of needed cells.
The way to get the row component is to first add all component in a global list. Then take it out from the list using some calculation.

Note: `50` in the loop is all cells needed, and in the dividing calculation, `5` is the number of cells in each row

Customization Tips

• If you want it to be as wide as the screen is, set all horizontal arrangement and card view to `-2`
• If there is too much cells, the card view will shrink. Therefore you can use Horizontal Scroll Arrangement instead of Horizontal Arrangement.

Testing

That’s all for today! Thanks for reading this guide
Also big thanks to @yusufcihan’s extension
Kodular for a great platform
If you like it, give it a thumbs-up

24 Likes

Great work

2 Likes

Thanks

1 Like

Thanks, very nice guide.

1 Like

Congratulations. This is a good algorithm exercise for newbies (I’m not talking about young people, but newcomers to algorithms).

3 Likes

Thanks, @The_K_Studio

1 Like

@Rogerio_Rios I totally agree with you. And I always love your signture “Everything is AIgorithm” (btw I think you spelled it wrong in your signture)

1 Like

Everything is algorithm. Make coffee, bathe, go to the beach to play Beach Tennis … Did you want “Everything is an algorithm”?

2 Likes

Ohhhhh…the letter “h”…

1 Like

i have a confusion
with your fiest method
if we have a list of items say these are digits from 1…20
the if we want to add text of label from these numbers then we should use following block
m i right?

1 Like

Correct. My guide only tell you how to make a grid. You can add whatever you want.

1 Like

Good Job !!! pls help …

1 Like

Navigate to the menu on the left. Expand the `Any Component` and scroll down to `Card View`. There it is.

1 Like

Thanks for you reply, but …

Try dragging one card view and set it to invisible.

1 Like

thanks, it work,

1 Like

thank you for sharing this guide.

2 posts were merged into an existing topic: How can i make this type of list view?