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

Grid sort removes canvas elements created by jQuery Sparklines plug in

2 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 05 Jul 2012, 07:56 PM
I have created a grid and after it is created I'm trying to loop over elements and generate a sparkline using the jQuery Sparklines open source plug-in.  This works just fine but as soon as I sort the grid the sparklines disappear.  The sparklines are canvas elements and they vanish from the DOM as soon as the grid is sorted.  Here is my code...

        function getLimitedKPIListCallback(result) {
            $("#grid").kendoGrid({
                dataSource: {
                    data: result.d,
                    schema: {
                        model: {
                            fields: {
                                ClientID: { type: "string" },
                                ClientName: { type: "string" },
                                RegionDisplay: { type: "string" },
                                ClientIndexRating: { type: "number" },
                                ChrgKPI: { type: "number" },
                                PymtKPI: { type: "number" },
                                RevKPI: { type: "number" }
                            }
                        }
                    }
                },
                navigatable: true,
                scrollable: true,
                sortable: {
                    mode: "multiple"
                },
                groupable: true,
                resizable: true,
                filterable: true,
                reorderable: true,
                selectable: "row",
                columns: [
                    {
                        field: "ClientID",
                        title: "Client ID",
                        width: 100
                    },
                    {
                        field: "ClientName",
                        title: "Client Name",
                        width: 300
                    },
                    {
                        field: "RegionDisplay",
                        title: "Region",
                        width: 90
                    },
                    {
                        field: "ClientIndexRating",
                        title: "Rating",
                        width: 100
                    },
                    {
                        field: "ChrgKPI",
                        title: "Charges vs. KPI",
                        width: 100,
                        format: "{0:n2}"
                    },
                    {
                        title: "Charge History<br/>Last 30 Days",
                        sortable: false,
                        filterable: false,
                        groupable: false,
                        template: "<div id='chargeSum-${DataSourceID}-${ClientID}'></div>"
                    },

                    {
                        field: "PymtKPI",
                        title: "Payment vs. KPI",
                        width: 100,
                        format: "{0:n2}"
                    },
                    {
                        field: "RevKPI",
                        title: "Revenue vs. KPI",
                        width: 100,
                        format: "{0:n2}"
                    }
                ]
            });


            var kpiList = result.d;
            $.each(kpiList, function (ii) {
                getChargeTotalsByCreationDate(kpiList[ii].DataSourceID, kpiList[ii].ClientID);
            });


        }


        function getChargeTotalsByCreationDate(dataSourceID, clientID) {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "Services/ChargeActive.asmx/GetChargeTotalsByCreationDate",
                dataType: "json",
                data: "{ 'dataSourceID' : '" + dataSourceID + "', 'clientID' : '" + clientID + "', 'lastXDays' : " + 30 + " }",
                success: function (msg) {
                    getChargeTotalsByCreationDateCallback(msg, dataSourceID, clientID);
                },
                error: errorHandler
            });
        }


        function getChargeTotalsByCreationDateCallback(result, dataSourceID, clientID) {
            var ca = result.d;
            if (ca.length > 0) {
                var sparkVals = [];
                $.each(ca, function(ii){
                    sparkVals.push(ca[ii].BaseFee);
                });
                $("#chargeSum-" + dataSourceID + "-" + clientID).sparkline(sparkVals);
            }
        } 

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 06 Jul 2012, 06:31 AM
Hi Andy,

As the Grid content is recreated on operations like sorting, filtering, grouping, paging etc. you will need to re-execute the sparkline initialization logic. The best place to do this is Grid's dataBound event. Thus, you should move this code there.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shankar
Top achievements
Rank 1
answered on 17 Jul 2012, 08:17 AM
Hi Everyone,

I am using jquery sparklines within Grid details templates and i am able to see the sparklines which is good. but on mouse over it is not displaying the tool tip. Can any one helps me on this piece or  let me know is there any alternates.

Thank you in advance.

Regards,
Shankar 
Tags
Grid
Asked by
Andy
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Shankar
Top achievements
Rank 1
Share this question
or