How do you Create Custom Row × Column Grid of TextBoxes Using Recycler List Extension?

[Pralaya_Ranjan_Beher]

I have successfully created a dynamic grid of TextBoxes using the Dynamic Components extension, where I can specify the number of rows and columns, and it generates the appropriate number of TextBoxes arranged in that grid.

Now I want to achieve the same functionality using the Recycler List View extension, to take advantage of better performance with large datasets.

My goal is:

• Specify number of rows and columns (e.g., 5 × 4)
• Generate that many TextBoxes
• Display them in a proper grid layout
• Assign each TextBox a unique ID or hint like box_1, box_2 or R1C1, R1C2 etc.

I’ve already gone through the schema template guide, but I’m still unsure how to:

• Structure the schema for a single cell
• Use on_bind_view and SetItemCount to simulate multiple rows × columns
• Control layout so each row fits the screen width divided by the number of columns

Can anyone provide guidance, example blocks, or a working .aia to help with this?

[TIMAI2]

Some examples:

Create "Infinite" Pager

PART I Using two extensions, RecyclerViewPager and CompCreator, to make an "infinite" pager in your app. Well, not quite infinite, but you can set your number of pages to the thousands... Use the BindView event to set your dynamic content for each "page" BLOCKS [blocks (19)] VIDEO AIA Example rvPager.aia (62.3 KB) Credits @Kevinkun for CompCreator and @iamwsumit for Recycler View Pager PART II I have since had a play with a RecyclerList extension. You can reproduce more or les…

Paid:comment,like system

Here is the aia project used as shown in the video. You will need to use an existing or new firebase realtime database in a project on your firebase account. This will not work with the AI2 provided Firebase. TopicsLikesCommentsFB_blank.aia (194.7 KB) Credits to: @White_Tiger for the RecyclerList extension @vknow360 for the CustomSheet extension @TIMAI2 (me) for the Density extension.

[Guide] How to use RecyclerList extension with large data sets - Basic guide

RecyclerList extension makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and then the RecyclerView library dynamically creates the elements when they're needed. As the name implies, RecyclerView recycles those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. This reuse improves app’s performance and responsive…

Search community for recyclerlist for more

[Pralaya_Ranjan_Beher]

I implemented the logic from

@TIMAI2

PART II

to create a grid of 20×4 TextBoxes . The layout and creation work perfectly.

However, I noticed an issue:
When I enter values into some of the TextBoxes and then scroll the arrangement, the values I entered appear to shift to other TextBoxes or get replaced.

How can I ensure that the data entered in each TextBox stays correctly bound to its position, even after scrolling?

[TIMAI2]

I have not experienced this issue, so check your work, however, this could be a "feature" of how the recyclerlist works...

[Pralaya_Ranjan_Beher]

I’m currently awaiting a response from @dora_paz, as the developer of the extension and may have deeper insights into this issue.

[TIMAI2]

Dora did not develop the extension

We have not heard from @dora_paz for a couple of years

[Pralaya_Ranjan_Beher]

Sorry. @ZainUlHassan developed this. is he available?

[TIMAI2]

Last seen here 3 years ago.

[TIMAI2]

You may note I used the modified recyclerlist extension by @White_Tiger

[Pralaya_Ranjan_Beher]

I’ve tried using it but am still encountering the same issue. @White_Tiger, could you kindly assist me in resolving this?

[TIMAI2]

You might share your example aia?

[Pralaya_Ranjan_Beher]

Dynamic_TextBox(2).aia (168.8 KB)

pls ignore this. i was just testing

[TIMAI2]

Can't see from your blocks how you are creating a row of 4 textboxes? Your blocks logic for building your list looks confused to me.

Will you only have one "page", with 20 rows of 4 textboxes, or 20 "pages" with 4 textboxes each

[Pralaya_Ranjan_Beher]

The span count is set to 4, meaning there are 4 columns. You can enter a number in the textbox to specify the number of rows. Based on that input, it will generate the corresponding number of rows, each containing 4 textboxes.
here are the cleaned blocks

[Pralaya_Ranjan_Beher]

Enter 50 in the textbox and click the Add button. This will generate 200 dynamic textboxes, arranged in 50 rows and 4 columns. After that, try entering some values in the textboxes and scroll down — you'll notice the issue at that point.

[TIMAI2]

I would suggest you run a text example project, following @dora_paz 's first example, but set the span to 4. See how that works ?

[Pralaya_Ranjan_Beher]

I observed the issue — it actually depends on the OnBindView event. If the data is set during the binding process, it works correctly even while scrolling. However, if I manually change the text in a textbox and then scroll, the old data (set during OnBindView) is automatically restored, overwriting the changes. I’m in the process of implementing a solution, but I’m still facing challenges getting it to function as expected.

[White_Tiger]

I made simple solution , you can check this logic if it works for you .You can test this aia too for refrence.

RVtextbox.aia (129.3 KB)

[Pralaya_Ranjan_Beher]

It’s working flawlessly now! Thank you for your time and the great effort you put into this. Much appreciated!

[Pralaya_Ranjan_Beher]

I’m working with the Speech Recognizer component. When I speak a number like "4546", I convert it into a list of two-digit numbers — for example, it becomes ["45", "46"]. I would like to display these values in dynamically generated textboxes arranged in a grid , filling them row by row. For instance, "45" goes into the first textbox, "46" into the second, and so on. What would be the best way to implement this?