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"
            data-template="metric-summary-template"
            data-source="app.getMetricDescriptionsDataSource"
            style="width: 380px; height: 200px; overflow: auto">
    </div>
    <script type="text/x-kendo-tmpl" id="metric-summary-template">
            <div class="metric-view">
                <div>#= Name #</div>
                <div data-role="sparkline"
                     data-series="[{
                                       type: 'column',
                                       field: 'TMax',
                                       color: '\#ff0000',
                                       negativeColor: '\#0099ff'
                                   }]"
                     data-tooltip="{ visible: true }"
                     data-source="app.getTestDS"
                     style="height:30px"></div>
            </div>
        </script>
    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
    Admin
    Alexander Valchev avatar
    2875 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:
    $("#listview").kendoListView({
      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.

    Regards,
    Alexander Valchev
    Telerik
    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