ListView limiting control height

2 posts, 0 answers
  1. David
    David avatar
    7 posts
    Member since:
    Oct 2012

    Posted 05 Sep 2012 Link to this post

    Hi,

    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.

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

    Template
    <script id="heatmapitem-template" type="text/x-kendo-tmpl">
        <div class="heatmapitem" style="background-color: rgb(${HeatMapColour})">
            <h3>${Symbol}</h3>
            <div>${kendo.toString(Percent,"p2")}</div>
        </div>
    </script>

    JQuery
    $("#heatmapView").kendoListView({
        dataSource: {
            transport: {
                read: {
                    url: ("http://www.getsomedata.com"),
                    dataType: "json"
                }
            },
            batch: true
        },
        height: 250,
        template: kendo.template($("#heatmapitem-template").html())
    });

    Can someone please help?
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 10 Sep 2012 Link to this post

    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:
    http://demos.kendoui.com/web/listview/remote-data.html


    Regards,
    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!
  3. Kendo UI is VS 2017 Ready
Back to Top