Tutorial 9 - UD40

UD40

Ultradev Tutorials

Home | Search | Back

Tutorial 9 - Nested repeats

This tutorial shows you how to create nested repeats using UltraDev. It involves a little handcoding, but nothing too complicated.

If you do not know what a nested repeat is, study the screen shot to the right. As you can see, I have a list of musical instruments in a database table together with their respective categories.

Now I want to list all the musical instruments on a web page grouped under the 4 different categories. Something like this:

Strings
- Violin
- Viola
- Cello
- Double Bass

Brass
- Horns
- Trumpets
- Trombones
- Tuba

We shall start by creating a recordset to get the necessary data from our database:

You can order the recordset by the category heading under which we wish to list the individual items, or by both the category and instrument (ORDER BY Category, Instrument). After that we shall proceed to design the visual arrangement of the list, which using tables seems to be the best approach. This is what I have come up with:

Next, select the entire table and apply a Repeat Region Server Behavior to it. Set the Behavior to show all records. You will now see this on your screen:

This is as far as UltraDev is going to take us. The rest we will have to rely on handcoding to achieve what we want. There are 3 steps that you must follow closely:

Step 1.

Go to the HTML Source window, and locate the start of the code of the repeat region. Add in by hand above the repeat region this 2 lines of codes:

Step 2.

This step is a bit tricky, so pay close attention. Directly below the code blocks shown above you should find the table that holds information from the Category and Instrument fields. By hand add in the codes shown in line 102 and line 106. The important thing here is to make sure the two code blocks are placed immediately outside of the <tr> and </tr> tags of the table row that holds your category heading.

Step 3.

Now for the coup de grace. Add in by hand the codes in line 114. This will make sure that the category changes for the next time through the loop.

Simple, isn't it? At this stage, your screen should like this:

You should click on the three little ASP symbols to see what is inside each of them. You can combine the two adjacent ASP code blocks into a single one to improve (very slightly) the performance of the code.

Demo | Back