Skip to content

Commit e06e4f6

Browse files
JekataJekata
committed
Merge branch 'production' of github.com:telerik/ajax-docs into production
2 parents 6ad5ee9 + 0eb315e commit e06e4f6

4 files changed

+260
-28
lines changed

‎knowledge-base/htmlchart-create-scrollable-legend.md‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: Implementing a Scrollable Legend for RadHtmlChart in ASP.NET AJAX
3+
description: This article demonstrates how to create a custom, scrollable legend for RadHtmlChart when handling large amounts of data.
4+
type: how-to
5+
page_title: How to Create a Scrollable Legend for RadHtmlChart in ASP.NET AJAX Without KendoUI
6+
slug: htmlchart-create-scrollable-legend
7+
tags: radhtmlchart, asp.net ajax, legend, scrollable, custom legend
8+
res_type: kb
9+
ticketid: 1682206
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadHtmlChart for ASP.NET AJAX</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>All</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When dealing with large amounts of data in RadHtmlChart, the chart and its legend may disappear or become unmanageable. Additionally, there's a need to have a legend with a scrollbar at the bottom without relying on external libraries like KendoUI. This knowledge base article also answers the following questions:
30+
31+
- How can I make a legend with a scrollbar for RadHtmlChart?
32+
- How to manage large data sets in RadHtmlChart without losing the chart or the legend?
33+
- How to implement a custom legend for RadHtmlChart that is scrollable?
34+
35+
## Solution
36+
To create a custom, scrollable legend for RadHtmlChart, follow the steps below:
37+
38+
1. Ensure your RadHtmlChart is properly configured in your ASPX page. The legend visibility in the chart settings must be set to `false` since we are implementing an external legend.
39+
40+
2. Include a `div` element in your HTML markup where the custom legend will be rendered. This div will be made scrollable through CSS.
41+
42+
3. Implement JavaScript logic to dynamically create the legend based on the chart data. This includes creating legend items for each series item in the chart, handling hover effects to highlight corresponding chart segments, and toggling series visibility upon clicking a legend item.
43+
44+
4. Style the legend container to be scrollable and adjust the styling of legend items to match your design requirements.
45+
46+
Here is an example implementation:
47+
48+
````HTML
49+
<div id="legend"></div>
50+
51+
<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true" Skin="Silk">
52+
<ChartTitle Text="Browser Usage for October 2021">
53+
<Appearance Align="Center" Position="Top">
54+
</Appearance>
55+
</ChartTitle>
56+
<Legend>
57+
<Appearance Position="Right" Visible="false">
58+
</Appearance>
59+
</Legend>
60+
<PlotArea>
61+
<Series>
62+
<telerik:PieSeries StartAngle="90">
63+
<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
64+
</LabelsAppearance>
65+
<TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
66+
<SeriesItems>
67+
<telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Chrome" Y="64.67"></telerik:PieSeriesItem>
68+
<telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Internet Explorer" Y="0.61"></telerik:PieSeriesItem>
69+
<telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Safari" Y="19.06"></telerik:PieSeriesItem>
70+
<telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Firefox" Y="3.66"></telerik:PieSeriesItem>
71+
<telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Opera" Y="2.36"></telerik:PieSeriesItem>
72+
<telerik:PieSeriesItem BackgroundColor="#333333" Exploded="false" Name="Samsung Internet" Y="2.81"></telerik:PieSeriesItem>
73+
<telerik:PieSeriesItem BackgroundColor="#222222" Exploded="false" Name="Edge" Y="3.11"></telerik:PieSeriesItem>
74+
<telerik:PieSeriesItem BackgroundColor="#111111" Exploded="false" Name="Others" Y="3.34"></telerik:PieSeriesItem>
75+
</SeriesItems>
76+
</telerik:PieSeries>
77+
</Series>
78+
</PlotArea>
79+
</telerik:RadHtmlChart>
80+
````
81+
82+
````JavaScript
83+
function pageLoadHandler() {
84+
let kendoChart = $find("<%= PieChart1.ClientID %>").get_kendoWidget();
85+
let series = kendoChart.options.series[0].data; // Assuming it's a Pie Chart
86+
let legendContainer = document.getElementById("legend");
87+
88+
// Clear previous legends
89+
legendContainer.innerHTML = "";
90+
91+
// Create legend items dynamically
92+
series.forEach((item, index) => {
93+
let legendItem = document.createElement("div");
94+
legendItem.className = "legend-item";
95+
96+
let marker = document.createElement("span");
97+
marker.className = "legend-marker";
98+
marker.style.background = item.color;
99+
100+
let label = document.createElement("span");
101+
label.textContent = item.category;
102+
103+
legendItem.appendChild(marker);
104+
legendItem.appendChild(label);
105+
legendContainer.appendChild(legendItem);
106+
107+
// Hover effect
108+
legendItem.addEventListener("mouseenter", function () {
109+
kendoChart.toggleHighlight(index, true);
110+
});
111+
112+
legendItem.addEventListener("mouseleave", function () {
113+
kendoChart.toggleHighlight(index, false);
114+
});
115+
116+
// Click event to toggle visibility
117+
legendItem.addEventListener("click", function () {
118+
let isVisible = kendoChart.options.series[0].data[index].visible !== false;
119+
120+
kendoChart.options.series[0].data[index].visible = !isVisible;
121+
marker.style.background = isVisible ? "grey" : item.color;
122+
kendoChart.refresh();
123+
});
124+
});
125+
}
126+
127+
Sys.Application.add_load(pageLoadHandler);
128+
````
129+
130+
````CSS
131+
#legend {
132+
display: flex;
133+
width: 300px;
134+
overflow-x: scroll; /* Make it scrollable */
135+
}
136+
137+
.legend-item {
138+
font: 12px sans-serif;
139+
margin: 5px;
140+
cursor: pointer;
141+
display: flex;
142+
align-items: center;
143+
}
144+
145+
.legend-marker {
146+
display: inline-block;
147+
width: 12px;
148+
height: 12px;
149+
margin-right: 5px;
150+
border-radius: 50%;
151+
}
152+
````
153+
154+
This solution provides a way to manage large data sets in RadHtmlChart by implementing a custom, scrollable legend without the need for KendoUI.
155+
156+
## See Also
157+
158+
- [RadHtmlChart Documentation](https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/overview)
159+
- [Creating Custom HTML Elements with JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
160+
- [Managing Event Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

‎knowledge-base/htmlchart-keyboard-accessibility-for-series-items.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Enabling Keyboard Accessibility for RadHtmlChart Series
3+
description: Learn how to make RadHtmlChart series focusable and clickable via the Enter key for keyboard navigation and accessibility.
4+
type: how-to
5+
page_title: Making RadHtmlChart Bar Series Accessible with Keyboard
6+
slug: htmlchart-keyboard-accessibility-for-series-items
7+
tags: radhtmlchart, accessibility, keyboard, focus, click, asp.net ajax
8+
res_type: kb
9+
ticketid: 1680317
10+
---
11+
12+
## Description
13+
14+
In web development, ensuring accessibility for all users, including those relying on keyboard navigation, is crucial. This knowledge base article provides a guide on making the series in a RadHtmlChart focusable and clickable via the Enter key. This functionality is essential for implementing drill-down features accessible through keyboard navigation, in line with WCAG 2.1 guidelines.
15+
16+
This knowledge base article also answers the following questions:
17+
- How can I make the RadHtmlChart series focusable using keyboard navigation?
18+
- How do I enable clicking on RadHtmlChart series with the Enter key for drill-down functionality?
19+
- What are the steps to achieve keyboard accessibility for RadHtmlChart in ASP.NET AJAX applications?
20+
21+
## Solution
22+
23+
To enable keyboard navigation and accessibility for the RadHtmlChart series, follow these steps:
24+
25+
1. Ensure each bar in the RadHtmlChart is focusable by setting its `tabindex` to `"0"`.
26+
2. Add a keydown event listener to each focusable bar.
27+
3. In the event listener, check if the Enter key is pressed. If so, manually trigger the desired click action.
28+
29+
### Updated JavaScript Code
30+
31+
````JavaScript
32+
function onChartLoad(sender, args) {
33+
setTimeout(function () {
34+
var chart = $find("<%= AssetRadChart.ClientID %>");
35+
if (chart) {
36+
var kendoChart = chart.get_kendoWidget ? chart.get_kendoWidget() : null;
37+
if (kendoChart) {
38+
var bars = kendoChart.element.find("svg path[fill]:not([fill='none'])");
39+
if (bars.length > 0) {
40+
bars.attr("tabindex", "0"); // Make bars focusable
41+
bars.first().focus();
42+
43+
// Add keydown event listener to make bars clickable via Enter key
44+
bars.on('keydown', function (e) {
45+
if (e.key === 'Enter') {
46+
var seriesIndex = $(this).index();
47+
var dataItem = kendoChart.dataSource.view()[seriesIndex];
48+
var sender = {
49+
series: { field: kendoChart.options.series[seriesIndex].field },
50+
dataItem: dataItem
51+
};
52+
OnClientSeriesClicked(sender);
53+
}
54+
});
55+
}
56+
}
57+
}
58+
}, 1000);
59+
}
60+
````
61+
62+
### Explanation
63+
64+
- **Tabindex:** By setting `tabindex="0"`, the SVG path elements become focusable, allowing for navigation through chart bars using the Tab key.
65+
- **Keydown Event:** The keydown event listener on each bar checks for the Enter key press (`e.key === 'Enter'`).
66+
- **Simulate Click:** Upon detecting the Enter key press, the code constructs a `sender` object, mimicking the one during a mouse click, and invokes the `OnClientSeriesClicked` function.
67+
68+
Implementing this solution will make the RadHtmlChart series not only focusable but also clickable via the Enter key, enhancing accessibility in compliance with WCAG 2.1 guidelines.
69+
70+
## See Also
71+
72+
- [RadHtmlChart Documentation](https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/overview)
73+
- [Keyboard Accessibility in Web Applications](https://www.w3.org/WAI/standards-guidelines/wcag/)

‎knowledge-base/spreadsheet-understanding-telerik-ajax-and-document-processing-library-spreadsheet-workbook-and-worksheets.md‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,12 @@ The Workbook and worksheets from the AJAX and DPL are not interchangeable. Never
3131
- An instance method .ToDocument() that all allows any AJAX Workbook instance to be converted to a DPL Workbook;
3232
- A static method Workbook.FromDocument() that allows any DPL Workbook to be converted to an AJAX Workbook;
3333

34-
````
34+
````C#
3535
using System;
36+
using System.Collections.Generic;
3637
using DPL = Telerik.Windows.Documents.Spreadsheet.Model;
3738
using AJAX = Telerik.Web.Spreadsheet;
38-
using System.Collections.Generic;
39-
````
4039

41-
````
4240
// AJAX to Document Processing Library
4341
AJAX.Workbook ajaxWorkbook = new AJAX.Workbook();
4442
AJAX.Worksheet ajaxWorksheet = ajaxWorkbook.AddSheet();
@@ -54,13 +52,11 @@ DPL.Worksheet dplWorksheet = dplWorkbook.Worksheets[0];
5452
// Document Processing Library to AJAX
5553
AJAX.Workbook convertedAjaxWorkbook = AJAX.Workbook.FromDocument(dplWorkbook);
5654
AJAX.Worksheet convertedAjaxWorksheet = convertedAjaxWorkbook.Sheets[0];
57-
55+
5856
// value is "Test cell"
5957
string value = convertedAjaxWorksheet
6058
.Rows.Find(r=> r.Index == 2)
6159
.Cells.Find(c=> c.Index == 2)
6260
.Value.ToString();
6361
````
64-
65-
6662

‎licensing/license-errors-warnings.md‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,35 @@ Starting with the 2025 Q1 release, using Telerik UI for ASP.NET AJAX without a l
1515

1616
An invalid license can be caused by any of the following:
1717

18-
* Using an expired subscription license—subscription licenses expire at the end of the subscription term.
19-
* Using a perpetual license for product versions released outside the validity period of your license.
20-
* Using an expired trial license.
21-
* A missing license for Telerik UI for ASP.NET AJAX.
22-
* Not installing a license key in your application.
23-
* Not updating the license key after renewing your Telerik UI for ASP.NET AJAX license.
18+
- Using an expired subscription license—subscription licenses expire at the end of the subscription term.
19+
- Using a perpetual license for product versions released outside the validity period of your license.
20+
- Using an expired trial license.
21+
- A missing license for Telerik UI for ASP.NET AJAX.
22+
- Not installing a license key in your application.
23+
- Not updating the license key after renewing your Telerik UI for ASP.NET AJAX license.
2424

2525
## License Warnings and Errors
2626

2727
When using Telerik UI for ASP.NET AJAX in a project with an expired or missing license, the `Telerik.Licensing` build task will indicate the following errors:
2828

29-
30-
| Error or Condition | Solution |
31-
| --- | --- |
32-
| `No license key is detected` | [Set up a license key]({%slug licensing/license-key%}) to activate the UI controls and remove the error message. |
33-
| `Invalid license key` | [Download a new license key]({%slug licensing/license-key%}#downloading-the-license-key) and use it to activate the UI controls and remove the error message. |
34-
| `Your subscription license has expired.` | Renew your subscription and [download a new license key]({%slug licensing/license-key%}#downloading-the-license-key). |
35-
| `Your perpetual license is invalid.` | You are using a product version released outside the validity period of your perpetual license. To remove the error message, do either of the following: |
36-
| | - Renew your license, then download a new license key and use it to activate the controls. |
37-
| | - Downgrade to a product version included in your perpetual license as indicated in the message. |
38-
| `Your trial license has expired.` | Purchase a commercial license to continue using the product. |
39-
| `Your license is not valid for the detected product(s).` | Review the purchase options for the listed products. Alternatively, remove the references to the listed packages from `package.json`. |
29+
| Error or Condition | Message Code | Solution |
30+
| ------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
31+
| `No Telerik and Kendo UI License file found` | `TKL002` | [Install a license key]({%slug licensing/license-key%}) to activate the UI controls and remove the error message. |
32+
| `Corrupted Telerik and Kendo UI License Key content` | `TKL003` | [Download a new license key]({%slug licensing/license-key%}#downloading-the-license-key) and install it to activate the UI components and remove the error message. |
33+
| `Unable to locate licenses for all products` | `TKL004` | Your license is not valid for all Telerik and Kendo products added to your project. If you have already purchased the required license, then . |
34+
| `Corrupted Telerik and Kendo UI License Key content` | `TKL003` | [Download a new license key]({%slug licensing/license-key%}#downloading-the-license-key) and install it to activate the UI components and remove the error message. |
35+
| `Telerik UI for ASP.NET AJAX is not listed in your current license file` | `TKL101` | Review the purchase options for the listed products. Alternatively, remove the references to the listed packages from `package.json`. |
36+
| `Your current license has expired` | `TKL103`, `TKL104` | You are using a product version released outside the validity period of your perpetual license. To remove the error message, do either of the following: |
37+
| | | - Renew your subscription and [download a new license key]({%slug licensing/license-key%}) |
38+
| | | - Downgrade to a product version included in your perpetual license as indicated in the message. |
39+
| `Your subscription has expired` | `TKL103`, `TKL104` | Renew your subscription and [download a new license key]({%slug licensing/license-key%}) |
40+
| `Your trial expired` | `TKL105` | Purchase a commercial license to continue using the product. |
41+
| `No Telerik or Kendo UI product references detected in project.v.` | `TKL001` | - If you use Telerik products and see this message, update the `Telerik.Licensing` package to version 1.4.9 or later. |
42+
| | | - If you do not use Telerik products, remove the `Telerik.Licensing` NuGet reference from your project. |
4043

4144
## See Also
4245

43-
* [Setting Up Your License Key]({%slug licensing/license-key%})
44-
* [Adding the License Key to CI Services]({%slug licensing/add-license-to-ci-cd%})
45-
* [Frequently Asked Questions about Your Telerik UI for ASP.NET AJAX License Key]({%slug licensing/licensing-faq%})
46-
* [Resolving TelerikLicense.vb Build Error]({%slug common-resolve-teleriklicense-vb-build-error%})
46+
- [Setting Up Your License Key]({%slug licensing/license-key%})
47+
- [Adding the License Key to CI Services]({%slug licensing/add-license-to-ci-cd%})
48+
- [Frequently Asked Questions about Your Telerik UI for ASP.NET AJAX License Key]({%slug licensing/licensing-faq%})
49+
- [Resolving TelerikLicense.vb Build Error]({%slug common-resolve-teleriklicense-vb-build-error%})

0 commit comments

Comments
 (0)