Main page

Horizontal Grid with Multiple Columns

Description

This example shows how to build a Horizontal Grid with Multiple Columns.

Steps to Recreate

1. Use the Grid Builder to create the store_products grid.
   • On Step 2 select image_url and product_name from 'Available field'.
   • On Step 4 select the No sorting option and set Record Per Page to 9. This number should be divisible by the number of columns, which you would like to create.
2. Change field type image_url to 'image'.
3. Switch to the HTML Mode.
4. Move label product_name into the table cell with the image, enter <BR> tag before it and then remove the empty cell.
5. Move <tr class="Row"> before <!-- BEGIN Row --> and </tr> after <!-- END Row -->.
6. Add panel RowSeparator right before <!-- END Row --> and enter the following HTML within the Panel block: </tr><tr class="Row">.
7. Add label EmptyRow right after <!-- END Row --> before </tr>.
8. Change colspan="2" to colspan="3" in the Navigator row.
9. For both labels set the Content property to HTML.
10. Add the appropriate programming code in the events as shown in the example.
11. Make cosmetic changes as needed by modifying the text or captions within the HTML.

Database Tables Used

Database: InternetDB

Tables: store_products

Programming Notes

The grid Before Show Row event is used to add the Row Separator after each three columns.

The EmptyRow label's Before Show event is used to add missing cells to the last row, if the number of rows is less then three.