I have a kendo UI Jquery list view. It has a search bar that filters the datasource. I want the height to be a maximum of 50vh. My issue is that when I only have 1 item, the height is too large. How do I make it automatically calculate the height? Here is a dojo. To demonstrate, set the max and min to 31 so you only have one item, you will notice that the gray box doesn't shrink to fit the one item. If I remove the height option, it doesn't ever show anything.
https://dojo.telerik.com/@dojolee/ApicowUQ
Hi Lee,
I would suggest after the dataSource is filtered to check the count of the results using the view() method:
- https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/view
Based on that you can set different max-height:
dataSource.filter(filter) var count = dataSource.view().length if(count <=1 ){ $('#listView').css('max-height', '25vh') }else{ $('#listView').css('max-height', '50vh') }
Here you will find the modified Dojo example - https://dojo.telerik.com/@NeliK/OlonEQad
I hope this helps.
Regards,
Neli
Hello, Lee,
The height of the ListView is a vital part of the "Endless Scrolling" functionality. Without it, the component cannot work.
With the above said, I would also strongly advise against modifying the initial height. There are internal calculations that are based on it and changing it can break the endless scroll.
If you wish to change the height, then opt-in for regular paging or no paging at all.
One more thing that you could potentially try is to have the ListView wrapped in a parent element and then control the height of the parent, instead of the ListView.
I am not entirely sure if that will work, but it is worth the try if you absolutely must change the appearance of the component.
Best Regards,
Georgi
I turned off endless scrolling but the height ends up being 0 when I don't explicitly set it. Take a look at this modified Dojo. You will notice in dev tools that the element has a style of: height: 2e-06px
https://dojo.telerik.com/cabqTtyx
Hi Lee,
When the scrollable option is enabled, the height of the Listview should be set. As stated in the API. - If set to true the listview will display a scrollbar when the content exceeds the listview height value. Thus, In order for the content of the ListView to be displayed, you will need to set height to the component.
Regards,
Neli