Hi,
I've got a simple panel bar code at: http://plnkr.co/edit/cJsESYQY5Dz4voQcudud?p=preview
In this code, you can see a panelbar that's limited in size (imagine it has a context) and the panelbar item is much larger.
What I want to happen is the following:
1) Panels won't be able to open more than the UL height.
2) Spread the panels in various heights - so the first would be 75% and the second would be 25%.
I tried doing it with jquery - changing the heights dynamically - but things got much more comlicated when I had a grid inside one of the panels...
Is there a smart way to do this?
I've got a simple panel bar code at: http://plnkr.co/edit/cJsESYQY5Dz4voQcudud?p=preview
In this code, you can see a panelbar that's limited in size (imagine it has a context) and the panelbar item is much larger.
What I want to happen is the following:
1) Panels won't be able to open more than the UL height.
2) Spread the panels in various heights - so the first would be 75% and the second would be 25%.
I tried doing it with jquery - changing the heights dynamically - but things got much more comlicated when I had a grid inside one of the panels...
Is there a smart way to do this?
4 Answers, 1 is accepted
0
Accepted
Hello Omer,
The described behavior is possible to achieve if you use the widget's expand and collapse events to check which container is visible/expanded/collapsed and adjust the other container's height.
In order to ensure that the item containers are able to fit random amount of content, they should be scrollable.
Animations should be disabled.
If you want to use animations as well, you will need to use custom ones, because the custom resizing logic will interfere with the the native PanelBar animations.
Here is a demo, which I made to be sure that I can claim the desired behavior is possible to achieve in theory. It is a custom implementation of a generally unsupported scenario, so it is provided "as is".
http://jsfiddle.net/dimodi/LH2w9/
Regards,
Dimo
Telerik
The described behavior is possible to achieve if you use the widget's expand and collapse events to check which container is visible/expanded/collapsed and adjust the other container's height.
In order to ensure that the item containers are able to fit random amount of content, they should be scrollable.
Animations should be disabled.
If you want to use animations as well, you will need to use custom ones, because the custom resizing logic will interfere with the the native PanelBar animations.
Here is a demo, which I made to be sure that I can claim the desired behavior is possible to achieve in theory. It is a custom implementation of a generally unsupported scenario, so it is provided "as is".
http://jsfiddle.net/dimodi/LH2w9/
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
OMER
Top achievements
Rank 1
Rank 1
answered on 10 Feb 2014, 11:41 AM
Hi,
It seems cool, if a bit messy (i.e. what happens when you have more than 2-3 panels?).
But this, along with setting grid height, solved my problem.
Thanks
It seems cool, if a bit messy (i.e. what happens when you have more than 2-3 panels?).
But this, along with setting grid height, solved my problem.
Thanks
0
OMER
Top achievements
Rank 1
Rank 1
answered on 15 Mar 2014, 09:53 PM
If anyone is interested in a generic dynamic panel bar here it is:
http://plnkr.co/edit/wBQFE6vIAGUpLlGUX3qu?p=preview
In this example it makes all the panels to get the same height, but a minor change in logic can give them different heights (e.g. set an array of weights for each panel and apply it in turn).
Hope this is helpful :)
http://plnkr.co/edit/wBQFE6vIAGUpLlGUX3qu?p=preview
In this example it makes all the panels to get the same height, but a minor change in logic can give them different heights (e.g. set an array of weights for each panel and apply it in turn).
Hope this is helpful :)
0
OMER
Top achievements
Rank 1
Rank 1
answered on 17 Mar 2014, 02:54 PM
And here it is with some static panels in an array. It took some more modification than I thought, so I post it here:
http://plnkr.co/edit/ykEX8tjWCzQZ3RcCMG8M?p=preview
http://plnkr.co/edit/ykEX8tjWCzQZ3RcCMG8M?p=preview