How can i add sparkline to kendo grid after the loading process? - kendo-ui

Question

Guys I wanted to know the ways of adding sparkline to grid after the loading,I myself used the change event but the problem is after clicking on the grid ,sparkline appears!
For clarification ,I've added a video regarding my project
http://jsfiddle.net/psot98/AxMHY/3/embedded/result/
Video
event change grid
change: function (e) {
$(".sparkline").kendoSparkline({
type: "area",
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],
}, {
name: 'New York',
data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
}],
});
}

Answer 1

What about : http://jsfiddle.net/vojtiik/AxMHY/4/embedded/result/
You can use DataBound event, so once data is loaded and bound - you show your fancy charts. http://docs.kendoui.com/api/web/grid#events-dataBound
dataBound : function (e) {
$(".sparkline").kendoSparkline({
type: "area",
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],
}, {
name: 'New York',
data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 4.1, 8.6, 2.5],
}],
});
}

Answer 2

try this:
$.fn.kendoSparkline = function(options){
// if the grid is not prepared just keep waiting
if($(this).find('.k-grid-header').length == 0){
setTimeout(function(){
$(this).lockColumn(count);
},50);
return;
}
// kendoSparkline logic
}
$('#kendoGrid').kendoGrid({...});
$(".sparkline").kendoSparkline({...});
This method will check if the grid is loaded, and will keep waiting util it's loaded.