Auto Height for List View

0 Answers 55 Views
ListView
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 03 Sep 2024, 08:03 PM

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

Neli
Telerik team
commented on 06 Sep 2024, 09:36 AM

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

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 06 Sep 2024, 11:42 AM

That doesn't solve the issue. I believe this is a bug Kendo should fix. There are two problems with your solution. First, I have to know the height of the one item, even your example cuts off the bottom. Second, I would have to do the same for if length = 2, 3, 4,... depending on how tall I want the list and how tall each item is. 
Georgi Denchev
Telerik team
commented on 11 Sep 2024, 08:45 AM

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

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 31 Oct 2024, 02:54 PM | edited

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

Neli
Telerik team
commented on 05 Nov 2024, 12:24 PM

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

No answers yet. Maybe you can help?

Tags
ListView
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Share this question
or