Sparkline inside a ListView

2 posts, 0 answers
  1. Andres
    Andres avatar
    31 posts
    Member since:
    May 2011

    Posted 17 Dec 2013 Link to this post

    Hi, I'm trying to render a list of metrics with sparklines using a listview. I'm using MVVM to do this..... but it doesn't bind the spark lines ... here is some of my code:
    <div data-role="listview"
            style="width: 380px; height: 200px; overflow: auto">
    <script type="text/x-kendo-tmpl" id="metric-summary-template">
            <div class="metric-view">
                <div>#= Name #</div>
                <div data-role="sparkline"
                                       type: 'column',
                                       field: 'TMax',
                                       color: '\#ff0000',
                                       negativeColor: '\#0099ff'
                     data-tooltip="{ visible: true }"
    In this code the sparkline code is static, but I hope to make it dynamic ... do you have some advice? 

    Thanks in advance ...
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 19 Dec 2013 Link to this post

    Hi Andres,

    Your ListView is initialized via data attributes but it is not bound to the source via MVVM binding. The data-source attribute is equal to:
      dataSource: myDataSource

    In order to bind the widget to a source from the ViewModel you should use data-bind="source: myDataSource" attribute. In this way the ListView's template bindings will be evaluated each time the widget refreshes its content.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top