Grid sort removes canvas elements created by jQuery Sparklines plug in

[Andy]

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);
            }
        } 

[Rosen]

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

[Shankar]

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