Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development Knowledge Base

ListView to show data in columns side by side

by Developer on ‎07-14-2014 09:20 AM (344 Views)

If you want to use a ListView to show the data in columns with each column with its own header and side by side, this code could be useful to you:

 

import bb.cascades 1.3

Page {
    ListView {  
        layout: GridListLayout {
            headerMode: ListHeaderMode.None
// The columnCount property must match the number of headers of your data
// or you will end up with more than one header per column. columnCount: 3 } dataModel: XmlDataModel { source: "data.xml" } listItemComponents: [ ListItemComponent { type: "header" Container { id: root
// Uncomment the following line if you don't want the inner ListView to
// to have scroll capability. Note that to uncomment this line, your
// columnCount must match the number of headers in your data. // minHeight: Infinity Header { title: ListItemData.title } Container { ListView { dataModel: root.ListItem.view.dataModel rootIndexPath: root.ListItem.indexPath listItemComponents: [ ListItemComponent { type: "item" Label { text: ListItemData.name multiline: true } } ] } } } } ] } }

 

 You can test the previous code with the following .xml file:

 

<root>
    <header title="Hockey">
        <item name="Hockey item information"/>
        <item  name="More Hockey information"/>
        <item  name="Even more information"/>
        <item name="Hockey item information"/>
        <item  name="More Hockey information"/>
        <item  name="Even more information"/>
    </header>
    <header title="Baseball">
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
        <item  name="Baseball related information"/>
    </header>
    <header title="Tennis">
        <item  name="Tennis related information"/>
    </header>
</root>

 

Here is a screenshot of how it looks.  The items in each column are scrollable.

 

column_screenshot.png

 

 

Contributors
Users Online
Currently online: 26 members 2,784 guests
Please welcome our newest community members: