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

Reply
Contributor
DarcAlpha
Posts: 19
Registered: ‎07-12-2012
My Device: 9700, Playbook 16GB, and Dev Alpha
My Carrier: Starhub

ListView filter or search function?

[ Edited ]

Hi, I have ListVIew that is filled with hard-coded DataModel. Then I want to create DropDown menu that contains the header's title.

 

When I select the DropDown option, I want ListView will only show the items for the selected header.

 

So, my questions is:

1. How can I do this in QML?

2. Is there any way to populate the DropDown's Option with the data model?

 

Here's my application structure:

 

Page{
     Container{
         DropDown{} //onSelectedValueChanged, I want the ListView filtered
         ListView{
              dataModel: XmlDataModel{...}
              listItemComponents: [...]
         }
     }
 }

 

Thanks before

Please use plain text.
Developer
taylortbb
Posts: 137
Registered: ‎10-26-2010
My Device: Bold 9900 + PlayBook
My Carrier: Rogers

Re: ListView filter or search function?

You'll want to use the ListView's rootIndexPath attribute. By setting it to the index path of the header only child nodes of that header will be displayed.

Some of the standard data model functions let you query the data, including determining what children the root node has. Each child of the root node should be a header. I recommend calling countChildren on the root node, then using a loop to retrieve each of those children with the data method. I'll note that index paths are arrays of integers, so your headers will have paths of [0], [1], [2],....
--------
Taylor Byrnes
Please use plain text.
Contributor
DarcAlpha
Posts: 19
Registered: ‎07-12-2012
My Device: 9700, Playbook 16GB, and Dev Alpha
My Carrier: Starhub

Re: ListView filter or search function?

[ Edited ]

Hi, thanks for the answer. I managed to create the filter. But after selecting the DropDown option, it disables the layout I set.

My ListView is 2 columns, so after changing the rooIndexPath, it becomes 1 column.

I tried to re-apply the properties but it does not work:

 

onSelectedValueChanged: {
    myList.rootIndexPath = selectedValue
    myList.layout.cellAspectRatio = 0.75
    myList.layout.columnCount = 2
}

 

Any solution? Thanks

 

Oh and for your second answer, can you tell me how to create Option object in JavaScript? I can see that the right function to use is insert(int index, Option option) . But how to create Option object? Sorry n00b here

 

 

Please use plain text.
Developer
taylortbb
Posts: 137
Registered: ‎10-26-2010
My Device: Bold 9900 + PlayBook
My Carrier: Rogers

Re: ListView filter or search function?

I'm not sure about the layout properties, but I can tell you that creating an Option in JS will require using a ComponentDefinition. You can call the .createObject() method on the ComponentDefinition to create instances of it, which you can then insert into the DropDown.

I'll take a look at the layout issue when I've got a computer in front of me (just on my phone now).
--------
Taylor Byrnes
Please use plain text.
Contributor
DarcAlpha
Posts: 19
Registered: ‎07-12-2012
My Device: 9700, Playbook 16GB, and Dev Alpha
My Carrier: Starhub

Re: ListView filter or search function?

Thanks you're the man. Until now I haven't figured out the properties problem
Please use plain text.