Sparkline in RadGrid in Tab (not visible at page load)

[Dan]

So, here is the scenario...

I have a tab strip with 3 tabs.  Each has a RadGrid with summary sales information by year.  I am using a Sparkline to visually represent the data in one of the columns.

This would wonderfully in the first tab, which is visible when the page renders.  The sparkline is properly sized to fit in the cells of the radgrid.  However when I move to another tab - the sparkchart is trying to render in a 100px by 100px square that is cutting off and looks terrible.  As soon as I sort of filter or do anything to rebind the Radgrid on these other tabs, it looks ok.  

So, now I am trying to figure out how to repaint or properly resize these sparklines in the radgrids that are in the tabs that are not visible on page load.  Ideally, I could run a jQuery loop and redraw them?  We want to avoid forcing a server trip for a rebind on tab changes if at all possible.  Any help appreciated.

[Attila Antal]

Hi Dan,

One option would be to subscribe the charts to the OnLoad client-side event, and repaint them in this event handler.

Markup

<telerik:RadHtmlChart ...>
    <ClientEvents OnLoad="ChartLoad" />
    ...
</telerik:RadHtmlChart>

JavaScript - OnLoad event handler

<script type="text/javascript">
    function ChartLoad(sender, args) {
        sender.get_kendoWidget().surface.setSize({ width: sender.get_width(), height: sender.get_height() });
        sender.repaint();
    }
</script>

Eventually, you can try the approach you have mentioned, by looping through all the objects and repainting them.

Attached you can find a sample demonstrating this scenario. Please check it out and see if that works for you.

KInd Regards,
Attila Antal
Progress Telerik