Sparkline inside ListView HTML Template?

[Per]

Hi!

Is it possible to have a sparkline inside a listview HTML template?
If so, what is the best practice regardning binding it to data?

Regards,
Per

[Iliana Dyankova]

Hi Per,

Apologies for not getting back to you earlier.

Yes, you could include the <div> element from which the chart will be initialized into the ListView template. Hence initialize the chart in the ListView dataBound event.

<script type="text/x-kendo-template" id="listview-template">
    <div>
        <div class="chart"></div>
         //....
    </div>
</script>

<script>
$("#listview").kendoListView({
    //....
    template: $("#listview-template").html(),
    dataBound: createChart
});

function createChart(){
    $(".chart").kendoChart({
       //....
    });
}
</script>

 
Regards,
Iliana Nikolova
Telerik

[Per]

Hi and thank you for your reply!

In my application I want to create a different chart for each item in the litsview.
The data I want to use for my charts is contained inside the datasource i bound to my listview.

How can I retrive the correct data for the current listitem i am rendering, so that not all charts looks the same?

What I want to acomplish is somthing similar to whats has been done here: http://jsbin.com/atisuw/4/edit
The difference is that the charts created in this example all uses the same data and not the data contained inside the bound datasource.

Can this be done?

Regards,
Per

[Iliana Dyankova]

Hello Per,

In order to achieve this you can use items uid. For example:

function createChart(){
    var data = this.dataSource.data();
    for (var i = 0; i < data.length; i++) {
         var item = this.wrapper.find("[data-uid='" + data[i].uid + "']");
         var chart = item.find(".chart");
         chart.kendoChart({
             //....
         });
    };
}

  Regards,
Iliana Nikolova
Telerik

[Chris]

Hi,
On reading your reply, im unsure how you would add a wrapper with a unique uid to a listview template, in my example im trying to create a listview of dynamic charts each chart has different data supplied by a datasource. Do we have to create the chart in the template or is there a simpler way.

[Iliana Dyankova]

Hi Chris,

To display charts as listView items you should use a template and there is no a better approach I can suggest.

Regards,
Iliana Nikolova
Telerik