Sparkline inside a ListView

[Andres]

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 ...

[Alexander Valchev]

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