It is a very common task to display data in a table-like grid. For this, you can use the grid tag. The grid tag is used to create a Grid object. The Grid class is a subclass of BaseGrid, which itself is derived form BaseComponent.
Table 8.2 shows the attributes defined in the BaseGrid class and Table 8.3 presents the attribute defined in the Grid class.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
bgcolor0 | Tag and JS | color code | read-write | |
Description. The background color for even-numbered rows. | ||||
bgcolor1 | Tag and JS | color code | read-write | |
Description. The background color for odd-numbered rows. | ||||
columns | Tag and JS | object | read-write | |
Description. An array containing the basegridcolumns used by this grid. | ||||
contentdatapath | Tag only | string | * | read-write |
Description. The datapath to use for the contents of the grid. | ||||
hilite | Tag and JS | LzView | read-write | |
Description. The view which is currently highlighted. | ||||
multiselect | Tag and JS | Boolean | true | read-write |
Description. Indicates whether or not multi selection is allowed. | ||||
rowheight | Tag and JS | number | read-write | |
Description. The height of the rows in pixels. | ||||
selectable | Tag and JS | boolean | true | read-write |
Description. Indicates whether or not the rows are selectable. | ||||
showhlines | Tag and JS | boolean | false | read-write |
Description. Indicates whether or not the lines between two columns are displayed. | ||||
shownitems | Tag and JS | number | -1 | read-write |
Description. The number of rows visible at a time. | ||||
showvlines | Tag and JS | boolean | false | read-write |
Description. Indicates whether or not the lines between two rows are displayed. | ||||
sizetoheader | Tag and JS | boolean | read-write | |
Description. Indicates if the grid will keep its width set to the size of the header. | ||||
spacing | Tag and JS | number | 0 | read-only |
Description. The spacing between the rows. |
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
showhscroll | Tag and JS | boolean | true | read-write |
Description. Indicates whether or not to display a horizontal scrollbar. |
The code in Listing 8.6 shows how to display data in a grid.
<canvas height="300" width="500"> <dataset name="myData" src="library.xml"/> <grid datapath="myData:/library" contentdatapath="book"> <gridcolumn width="100"> ISBN <text datapath="isbn/text()"/> </gridcolumn> <gridcolumn width="200"> Title <text datapath="title/text()"/> </gridcolumn> <gridcolumn width="100"> Price <text datapath="price/text()"/> </gridcolumn> <gridcolumn width="100"> Available <view > <checkbox align="center" value="$path{'@available'}"/> </view> </gridcolumn> </grid> </canvas> |
Note that the check box is placed in a view so that it can be centered.
<view > <checkbox align="center" value="$path{'@available'}"/> </view>
To test the application in Listing 8.6, direct your browser to this URL:
http://localhost:8080/lps-4.0.x/app08/gridTest1.lzx
Figure 8.2 shows the result.
In addition, you can also use the gridtext tag, which is an extension of gridcolumn. The gridtext tag adds the editable attribute. A column whose editable attribute is true (the default) will be editable.
The application in Listing 8.7 shows how to use gridtext.
<canvas height="300" width="500"> <dataset name="myData" src="library.xml"/> <grid datapath="myData:/library" contentdatapath="book"> <gridtext width="100" editable="false" datapath="isbn/text()"> ISBN </gridtext> <gridtext width="200" datapath="title/text()"> Title </gridtext> <gridtext width="100" datapath="price/text()"> Price </gridtext> <gridcolumn width="100"> Available <view > <checkbox align="center" value="$path{'@available'}"/> </view> </gridcolumn> </grid> </canvas> |
Note that when using gridtext, you don’t need to use the text tag. Instead, you can use the datapath attribute of the gridtext tag.
You can run the LZX application in Listing 8.7 by using this URL:
http://localhost:8080/lps-4.0.x/app08/gridTextTest1.lzx
The generated application is displayed in Figure 8.3. Note that the Title and Price columns are editable.