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

Sparkline inside ListView HTML Template?

5 Answers 84 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Per
Top achievements
Rank 1
Per asked on 21 Jul 2013, 06:49 PM
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

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 24 Jul 2013, 07:43 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Per
Top achievements
Rank 1
answered on 02 Aug 2013, 02:48 PM
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
0
Iliana Nikolova
Telerik team
answered on 06 Aug 2013, 02:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 16 Jun 2014, 03:09 PM
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.
0
Iliana Nikolova
Telerik team
answered on 18 Jun 2014, 03:13 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Sparkline
Asked by
Per
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Per
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or