Hello,
I have a databound chart to sqldatasource. In DataBound event on server-side I want to check if the chart has data and if it does not I want to hide it. I've tried this but without any luck (VB.NET):
Protected Sub RadHtmlChart1_DataBound(sender As Object, e As EventArgs) Handles RadHtmlChart1.DataBound
If RadHtmlChart1.PlotArea.Series(0).Items.Count = 0 Then
RadHtmlChart1.Visible = False
Else
RadHtmlChart1.Visible = True
End If
End Sub
6 Answers, 1 is accepted
RadHtmlChart does not implement the server-side OnDataBound event as it uses client-side data binding and rendering. This issue is explained in details in the following article:
RadHtmlChart Known Limitations
Regards,
Vessy
Telerik
Rank 1
Hello
Thank you for your reply. Can you please guide me how to hide the chart if it's empty on client side? Please note that my chart is databound to sqldatasource control.
Thanks
You can get access to the chart's data source on the client through the control's kendo object and hide it depending on the result using its set_visible() method. For example:
var chart = $find("RadHtmlChart1");if (chart.get_kendoWidget().dataSource.data().length < 1) { chart.set_visible(false);}You can also find useful information on the matter in the RadHtmlChart Client-side API article.
Regards,
Vessy
Telerik
Rank 1
Hi Vessy,
this method doesn't work - or I'm missing something. I'm getting an javascript error saying: "Cannot read property 'get_kendoWidget' of null", meaning $find function is returning null.
Here's my code:
01.<%@ Page Language="VB" %>02.<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>03. 04.<!DOCTYPE html>05. 06.<script runat="server">07. 08.</script>09. 10.<html xmlns="http://www.w3.org/1999/xhtml">11.<head runat="server">12. <title></title>13.</head>14.<body>15. <form id="form1" runat="server">16. <div>17. <asp:ScriptManager runat="server" id="sm1"></asp:ScriptManager>18. <telerik:RadHtmlChart RenderAs="Canvas" Transitions="false" runat="server" Width="540px" Height="200px" ID="RadHtmlChart1" DataSourceID="SqlPrisutnost">19. <PlotArea>20. <Series>21. <telerik:LineSeries DataFieldY="postotak" Name="Attendance">22. <LineAppearance Width="5" />23. <TooltipsAppearance Visible="False" />24. <Appearance Overlay-Gradient="None"></Appearance>25. </telerik:LineSeries>26. </Series>27. <XAxis DataLabelsField="razdoblje">28. </XAxis>29. <YAxis MaxValue="100" MinValue="0" Step="20">30. <TitleAppearance Text="%" />31. <MinorGridLines Visible="False" />32. </YAxis>33. 34. </PlotArea>35. <Legend>36. <Appearance Visible="false" />37. </Legend>38. <ChartTitle Text=" ">39. </ChartTitle>40. </telerik:RadHtmlChart>41. 42. <asp:SqlDataSource ID="SqlPrisutnost" runat="server"43. ConnectionString="<%$ ConnectionStrings:bazaConn %>"44. SelectCommand="p_prisutnost_clan" SelectCommandType="StoredProcedure">45. </asp:SqlDataSource>46. </div>47. <script>48. var chart = $find("RadHtmlChart1");49. if (chart.get_kendoWidget().dataSource.data().length > 0) {50. chart.set_visible(false);51. }52. </script> 53. </form>54.</body>55.</html>
Rank 1
Hi,
I found the solution my self! I was missing pageLoad() function. After I put my javascript code inside that, it worked!
I am glad you managed to solve the problem on your own. Feel free to reach us again in case further assistance is needed.
Regards,
Vessy
Telerik