Sparkline inside ListView HTML Template?

6 posts, 0 answers
  1. Per
    Per avatar
    116 posts
    Member since:
    Jan 2008

    Posted 21 Jul 2013 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 24 Jul 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Per
    Per avatar
    116 posts
    Member since:
    Jan 2008

    Posted 02 Aug 2013 Link to this post

    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
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 Aug 2013 Link to this post

    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!
  6. Chris
    Chris avatar
    4 posts
    Member since:
    Jul 2012

    Posted 16 Jun 2014 Link to this post

    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.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Jun 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready