Attached is a screenshot of a Column Chart I did using HTMLChart.
I would like to have a button next to each Coil ID in the chart or make each Coil ID a link that a user can click on to open a new RadWindow with a page that has more detailed data from another database table regarding that Coil ID that the user clicked.
The Column Chart is bound to a dataset that gets dynamic data from a database table.
Is it possible to do this?
If so then can you give an example of how to do it?
Sincerely,
Keith Jackson
7 Answers, 1 is accepted
Hi Keith,
You can use the tooltip template and put an HTML element in it that will have the needed handler attached: http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/display-html-and-execute-javascript.
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="data" Name="some series"> <TooltipsAppearance> <ClientTemplate> <span onclick="openWnd(\'#=dataItem.someColumn#\')">open dialog with details</span> </ClientTemplate> </TooltipsAppearance> </telerik:ColumnSeries> </Series> </PlotArea></telerik:RadHtmlChart><script> function openWnd(data) { alert(data) }</script>Regards, Marin Bratanov
Telerik
Rank 1
Hi Marin,
Thanks for your response but this is not working!
As soon as there is anything in onclick for <span>, the chart does not load. If onlick is empty or onclick is removed from the span then the chart is able to load.
Please help. Thanks!
Sincerely,
Keith Jackson
Hello Keith,
I am attaching a working example based on the code I provided earlier so you can use it as a starting point. Note how I have escaped the apostrophes, you should do the same, otherwise you will get script errors and this will break the entire page, not only the chart. You can read more on the matter here: http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/handle-special-symbols.
Regards,
Telerik
Rank 1
Hi Marin,
Thanks for providing an example! I was to get it to work on my system.
But here are the issues found with your example:
- Visual Studio 2013 is showing the onclick to the Javascript function with an error. Please see the screenshot attached with yellow circles showing the error. According to Visual Studio 2013, it states "Javascript: unexpected \". How to clear that error?
- <script> was highlighted green to indicate that "type" is required. I had changed it to <script type = "text/javascript" > and it still worked.
Even though it is showing an error, it was able to build successfully and able to load the page. But I still need to clear the error.
Please help. Thanks!
Sincerely,
Keith Jackson
Rank 1
Hi Marin,
By the way, your example only works with C#. If I convert your code-behind to VB.net then it does NOT work. With VB.Net as the code-behind, only the grid for the chart is shown. That may be due to the Javascript error with the onclick. Please see the attached screenshot.
I need this to work with VB.Net as the code-behind.
Please help. Thanks!
Sincerely,
Keith Jackson
Hi Keith,
The type attribute of the script element is determined by the doctype. HTML5 does not require it.
VS will always complain there is a script error or an invalid character because in this case there is scipt directly in the markup but not in a script tag. You can set the string with the desired template from the server code to avoid this if you like, and you should escape the string properly, as advised in the help article I previously linked: http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/handle-special-symbols. This is not an actual error, however, but a false positive by the code analysis tool.
In your case, though, there must be some kind of JS error that breaks the chart rendering, or there is an issue with the data source. In either case, that would be something specific to your concrete case.
Anyway, I am attaching here a VB version that works fine. One of the charts uses markup, the other - the VB code. I trust this should help you get started.
Regards,
Telerik
Rank 1
Hi Marin,
The script error in VS 2013 was actually coming from JustCode.
When you provided your first example, I tested it on my end to make sure it works for me. Once I confirmed that it was working, I created a new ASP.Net page with VB as the code-behind. The new ASP.Net page has the same ASP.Net code as your first example. With the C# code-behind with your first example, I went to converter.telerik.com web site convert the C# code to VB. I was frustrated to find that the new ASP.Net page with VB code-behind was not working. I had thought the script error was causing the problem.
The VB version of your example helped me confirm that it would work. Then I started doing testing and comparing your VB version with the other VB code that was converted from C# to determine why the converted code did not work and your VB code did work. The result was the Page_Load procedure in the converted code did not have "Handles Me.Load" at the end of it. Just like with the Telerik demos, it would not work properly without "Handles Me.Load" for the Page_Load procedure.
Anyways, thanks for your help! The VB version helped to clarify what was causing the problem and a way to use TryCast to set up the ClientTemplate from code-behind so there are no errors, even if it is a false positive.
Sincerely,
Keith Jackson