|
There are several ways to display data in XHTML. All of them are relatively simple, are not interactive and the data can not be edited. Using the Backbase Client Framework this can already be improved partially by, for example, adding sort functionality to a table. However, this may not be enough for the features that are required in an application. The Backbase Tag Library (BTL) contains widgets that offer built in solutions for the more advanced features that are required, like sorting, column resizing and editing. One of these widgets is the listGrid.
The listGrid is a powerful mechanism for displaying tabular data. The listGrid supports sorting, value formatting and editing. Furthermore, there are some styling possibilities and it is possible to show smaller parts of data via a paging mechanism rather than showing all data at once. This example is an introduction to the listGrid and its features.
Note: You can view an example of the listGrid in the Backbase Explorer.
Showing data
The listGrid is a databound widget. The first step to show data is to connect the listGrid to a dataSource. As the listGrid is a dataObserver, the dataSource attribute can be used. The value of the dataSource attribute is the name of the dataSource the listGrid needs to be connected to.
<b:listGrid xmlns:b="http://www.backbase.com/2006/btl" dataSource="data"></b:listGrid>
The second step is to add listGridCol elements inside the listGrid to determine the amount of columns to be shown. The number of listGridCol elements should not exceed the amount of fields in a record. It is however possible to show fewer columns than the amount of fields in a record. To give the columns a meaningful description the label attribute can be added to a listGridCol.
<b:dataContainer>
<records xmlns="">
<record>
<field>Frank</field>
<field>Showcase</field>
<field>frank.showcase@mail.company.com</field>
</record>
<record>..</record>
<record>..</record>
</records>
</b:dataContainer>
</b:dataSource>
<b:listGrid xmlns:b="http://www.backbase.com/2006/btl" dataSource="data">
<b:listGridCol label="Name"></b:listGridCol>
<b:listGridCol label="Surname"></b:listGridCol>
</b:listGrid>
By default the columns get their values from the fields of records that have the same position. In snippet 2 this means that Frank is listed under Name and Showcase is listed under Surname. The email is not visible as only two listGridCol elements have been used.
It is possible to indicate which field's value should be shown in a column. This can be achieved by adding the select attribute to the listGridCol. The value of the select attribute is an identifier for the field. An identifier can be the name of the field or its position.
<b:dataContainer>
<records xmlns="">
<record>
<name>Frank</name>
<surname>Showcase</surname>
<email>frank.showcase@mail.company.com</email>
</record>
</records>
</b:dataContainer>
</b:dataSource>
<b:listGrid xmlns:b="http://www.backbase.com/2006/btl" dataSource="data">
<b:listGridCol label="Email" select="*[3]"></b:listGridCol>
<b:listGridCol label="Name" select="name"></b:listGridCol>
<b:listGridCol label="Surname" select="surname"></b:listGridCol>
</b:listGrid>
Snippet 3: The select attribute
Example 1: The listGrid as created in snippet 3 with additional records
| Attachment | Size |
|---|---|
| Introduction_to_the_listGrid_Code.zip | 977 bytes |
