Skip to content

Commit eae896a

Browse files
docs(htmlchart): Add KendoWidgetInitializing client-side event
1 parent b3cb39a commit eae896a

File tree

1 file changed

+40
-1
lines changed
  • controls/htmlchart/client-side-programming/events

1 file changed

+40
-1
lines changed

controls/htmlchart/client-side-programming/events/overview.md

+40-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ position: 0
1212

1313
**RadHtmlChart** exposes several client-side events for handling different user interactions:
1414

15+
* **OnKendoWidgetInitializing**—raised just before the Kendo Widget is initialized. Receives the chart and the chart widget's options as arguments.
16+
1517
* **OnLoad**—raised when the control is initialized.
1618

1719
* [OnDrag](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-drag)—raised as long as the user is dragging the chart using the mouse or swipe gestures.
@@ -40,6 +42,41 @@ position: 0
4042

4143
To use these events, simply write a JavaScript function that can be called when the event occurs. Then assign the name of this function as the value of the the corresponding property in the **ClientEvents** RadHtmlChart subtag.
4244

45+
>caption **Example 1:** Handle the client-side **OnKendoWidgetInitializing** event
46+
47+
````ASP.NET
48+
<script type="text/javascript">
49+
function OnKendoWidgetInitializing(chart, options) {
50+
options.title.text = "title text changed from init";
51+
}
52+
</script>
53+
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart3" Width="800px" Height="400px">
54+
<ClientEvents OnKendoWidgetInitializing="OnKendoWidgetInitializing" />
55+
<PlotArea>
56+
<Series>
57+
<telerik:ColumnSeries Name="In 2010">
58+
<SeriesItems>
59+
<telerik:CategorySeriesItem Y="46.3" />
60+
<telerik:CategorySeriesItem Y="46.5" />
61+
</SeriesItems>
62+
</telerik:ColumnSeries>
63+
</Series>
64+
<XAxis>
65+
<Items>
66+
<telerik:AxisItem LabelText="January" />
67+
<telerik:AxisItem LabelText="Februrary" />
68+
</Items>
69+
</XAxis>
70+
<YAxis>
71+
<LabelsAppearance DataFormatString="{0}%" />
72+
</YAxis>
73+
</PlotArea>
74+
<ChartTitle Text="Firefox market share">
75+
</ChartTitle>
76+
</telerik:RadHtmlChart>
77+
````
78+
79+
>caption **Example 2:** Handle the client-side **OnLoad** event
4380
````ASP.NET
4481
<script type="text/javascript">
4582
function OnLoad(chart) {
@@ -72,8 +109,10 @@ To use these events, simply write a JavaScript function that can be called when
72109
</telerik:RadHtmlChart>
73110
````
74111

75-
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](https://docs.telerik.com/kendo-ui/api/dataviz/chart#events). For example:
76112

113+
All client-side events, except **OnLoad** and **KendoWidgetInitializing**, 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](https://docs.telerik.com/kendo-ui/api/dataviz/chart#events). For example:
114+
115+
>caption **Example 3:** Handle the client-side **OnSeriesClick** event
77116
````ASP.NET
78117
<script type="text/javascript">
79118
function OnSeriesClick(args) {

0 commit comments

Comments
 (0)