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

Sparkline inside a ListView

1 Answer 20 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Andres
Top achievements
Rank 1
Andres asked on 17 Dec 2013, 11:48 PM
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 ...

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 19 Dec 2013, 09:52 AM
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!
Tags
ListView
Asked by
Andres
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or