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
Developer
Posts: 180
Registered: ‎12-09-2011
My Device: 9360, BB10

Click to expand the grid list

[ Edited ]

Capture.PNG

 

Hello everyone,

I want to make a screen according to the screen shot attached in the thread. Here i want that when i click on the drop down button of the grid list item then it will expand. That is also provided in the native apps of the devices like Pictures, Videos etc.
Please provide me the solution. Thanx in advance.

 

Thank You

Hemant Sain

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Click to expand the grid list

Still waiting for the picture to be approved, do you want to explain in words what you are trying to achieve as well?


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 180
Registered: ‎12-09-2011
My Device: 9360, BB10

Re: Click to expand the grid list

Actually i am trying to say that, when i click on list item down arrow shown in the image then list will expand & will show next items in grid.
For more understanding please see native apps of the BB 10 device like Pictures, Videos.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Click to expand the grid list

I have and I still don't get it (no ListItem down arrow that I can see in my native apps) so I'll wait for the picture. :-)

If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane

Re: Click to expand the grid list

Simply use a ScrollView with a container

 

ScrollView {
    Container {
        id: contentContainer
    }
}

also, create a button to add more elements.

the Container has a StackLayout from Top to Bottom by Default, so each time the button is pressed, simply add more elements to the contentContainer. The scroll view does the rest

 


Also, about the grid: either use a list inside the content container (with gridlayout), and add more items to the datamodel of the list, or create containers yourself and add them each time to the contentContainer

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
Posts: 180
Registered: ‎12-09-2011
My Device: 9360, BB10

Re: Click to expand the grid list

Hi BBSJDev,

 

Thanks for reply.

What i actually want is if you seen the first screenshot. I am inserting the data in the list and doing the groping. But what is happing there by which key i am doing the grouping, if more than 8 item are there so it is showing all the data in the group but i want to show only 8 items in each group and if more than 8 items are there than show the arrow icon at the right bottom corner of the group. And when i click on the particular arrow of particular group only that groups data expand or navigate to next page.

 

So now you got it what i excatally want.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Click to expand the grid list

Okay I can see the image now, as an alternative to pyth's suggestion you can just use a GridListLayout ListView disable the scroll and set the listview postion by the overlayed down button.

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 180
Registered: ‎12-09-2011
My Device: 9360, BB10

Re: Click to expand the grid list

Hi BBSJDev,

 

Thanks for reply.

I am doing the same which you suggest but i am confuse about overlayed down button. So can you please explain and if possible can you suggest some code for it.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Click to expand the grid list

[ Edited ]

Sure, just create a DockLayout Container at exactly the same size and position as your ListView.

It should be defined later than your ListView (in C++ CustomControl or QML, you haven't specified how you are doing it) so that it is placed on top of the ListView when added to the scene graph.

 

Turn off passthrough of events on that container.

 

Then place an ImageView at the bottom right of that container, this ImageView is your down button.

Add a tap gesture to the ImageView that when fired sets the index position of the current listitem position + 8.

 

I'm sure there are many different ways of doing this but as a general rule I try and use the Cascade objects as much as possible before writing my own as in Pyth's suggestion.  There's nothing wrong with his suggestion but why bother writing your own code to add, scroll and display when there is already a control for that.

 

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 148
Registered: ‎09-28-2012
My Device: Blackberry Developer

Re: Click to expand the grid list


----------------------------------------------------------
Feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.