New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Events

Event log

The ASP.NET AJAX Chart provides several client-side events, the handlers to which can be attached through the control's ClientEvents inner tag:

  • OnLoad — fires when the control is initialized.
  • OnSeriesHovered — fires when a series is hovered.
  • OnSeriesClicked — fires when a series is clicked.
  • OnLegendItemHovered — fires when a legend item is hovered.
  • OnLegendItemClicked — fires when a legend item is clicked.

All client-side events, except OnLoad, are references to their corresponding events of the Kendo UI HtmlChart object. You can get familiar with the full set of arguments coming with each event in the Kendo UI HtmlChart API reference.

  • DefaultVB.aspx
  • scripts.js
<%@ Page Language="vb"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="BarChart" Transitions="true">
            <ClientEvents OnKendoWidgetInitializing="OnKendoWidgetInitializing" OnLoad="OnLoad" OnSeriesClick="OnSeriesClick"
                OnSeriesHover="OnSeriesHover" OnLegendItemClick="OnLegendItemClick"
                OnLegendItemHover="OnLegendItemHover" />
            <PlotArea>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="2003"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2004"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2005"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <Series>
                    <telerik:ColumnSeries Name="Quarter 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="315000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="495000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="690000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Quarter 2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="360000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="540000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="735000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Quarter 3">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="405000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="600000"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="780000"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>

    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance