This is a migrated thread and some comments may be shown as answers.

ListView limiting control height

1 Answer 476 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
David asked on 05 Sep 2012, 05:22 PM

I'm using the ListView control to create a Heatmap and it's working perfectly, except I'm trying to limit the height of the control to 250px, but setting "height: 250" doesn't do anything.  I'm not used this control before and I know from using the grid this would work.

Currently I'm loading in about 500 items and it's making the whole page scrollable, but I want to have the control scrollable within it's own div (just like the Grid control).  BTW, I don't want to use paging.

<div id="heatmapView"></div>

<script id="heatmapitem-template" type="text/x-kendo-tmpl">
    <div class="heatmapitem" style="background-color: rgb(${HeatMapColour})">

    dataSource: {
        transport: {
            read: {
                url: (""),
                dataType: "json"
        batch: true
    height: 250,
    template: kendo.template($("#heatmapitem-template").html())

Can someone please help?

1 Answer, 1 is accepted

Sort by
Nikolay Rusev
Telerik team
answered on 10 Sep 2012, 08:27 AM
Hello David,

You cannot set height of the ListView wrapper in the initialization. You can simply set on the element, i.e
<div id="myListView" style="height: 250px"></div>

Regarding scrolling - it is not directly supported by the ListView widget, but you can implemented as shown on the demo bellow:

Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question