Skip to content

Commit bcda357

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 7e7b3af commit bcda357

File tree

9 files changed

+400
-7
lines changed

9 files changed

+400
-7
lines changed

‎docs-aspnet/knowledge-base/chart-rounded-columns.md‎

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
---
2+
title: Rounded corners for Chart columns
3+
page_title: Rounded corners for Bar Chart columns
4+
description: "An example on how to apply rounded corners styling to {{ site.product }} Chart columns."
5+
type: how-to
6+
slug: chart-rounded-corners
7+
tags: progress, telerik, aspnet, mvc, core, chart, rounded, corners
8+
res_type: kb
9+
component: chart
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} Chart</td>
18+
</tr>
19+
</table>
20+
21+
## Description
22+
23+
How can I change {{ site.product }} Chart columns to appear with rounded corners?
24+
25+
## Solution
26+
27+
You can achieve this requirement using the .Visual() capability offered by the component. Check the full implementation in this live REPL sample:
28+
29+
[Chart Example: All Corners Rounded](https://netcorerepl.telerik.com/myPlcPlg30MY8AnT10)
30+
31+
The result looks like this:
32+
33+
![chart-rounded-corners](images/chart-rounded-corners.png)
34+
35+
```Razor
36+
<div class="demo-section wide">
37+
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
38+
.Name("chart")
39+
.Title("Orders Status")
40+
.Legend(legend => legend
41+
.Position(ChartLegendPosition.Top)
42+
)
43+
.SeriesDefaults(seriesDefaults => seriesDefaults
44+
.Column().Visual("columnVisual")
45+
.Highlight(highlight => highlight.Toggle("toggleHandler"))
46+
)
47+
.Series(series => {
48+
series.Column(new double[] { 440000 })
49+
.Name("Active").Color("#229954");
50+
series.Column(new double[] { 180000 })
51+
.Name("Delayed").Color("#CD5C5C");
52+
series.Column(new double[] { 230000 })
53+
.Name("Delivered").Color("#145a32");
54+
})
55+
.CategoryAxis(axis => axis
56+
.Labels(labels => labels.Rotation(-90))
57+
.MajorGridLines(lines => lines.Visible(false))
58+
)
59+
.ValueAxis(axis => axis.Numeric()
60+
.Labels(labels => labels.Format("{0:N0}"))
61+
.MajorUnit(50000)
62+
.Line(line => line.Visible(false))
63+
)
64+
.Tooltip(tooltip => tooltip
65+
.Visible(true)
66+
.Format("{0:N0}")
67+
)
68+
)
69+
</div>
70+
<script>
71+
function columnVisual(e) {
72+
return createColumn(e.rect, e.options.color);
73+
}
74+
75+
function toggleHandler(e) {
76+
e.preventDefault();
77+
var visual = e.visual;
78+
var opacity = e.show ? 0.8 : 1;
79+
80+
visual.opacity(opacity);
81+
}
82+
83+
function createLegendItem(e) {
84+
var drawing = kendo.drawing;
85+
var geometry = kendo.geometry;
86+
87+
var color = e.options.markers.background;
88+
var labelColor = e.options.labels.color;
89+
var rect = new geometry.Rect([0, 0], [120, 50]);
90+
var layout = new drawing.Layout(rect, {
91+
spacing: 5,
92+
alignItems: "center"
93+
});
94+
95+
var overlay = drawing.Path.fromRect(rect, {
96+
fill: {
97+
color: "#fff",
98+
opacity: 0
99+
},
100+
stroke: {
101+
color: "none"
102+
},
103+
cursor: "pointer"
104+
});
105+
106+
var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
107+
var label = new drawing.Text(e.series.name, [0, 0], {
108+
fill: {
109+
color: labelColor
110+
}
111+
})
112+
113+
layout.append(column, label);
114+
layout.reflow();
115+
116+
var group = new drawing.Group().append(layout, overlay);
117+
118+
return group;
119+
}
120+
121+
function createColumn(rect, color) {
122+
var drawing = kendo.drawing;
123+
var geometry = kendo.geometry;
124+
125+
var gradient = new drawing.LinearGradient({
126+
stops: [{
127+
offset: 0,
128+
color: color
129+
}, {
130+
offset: 0.5,
131+
color: color,
132+
opacity: 0.9
133+
}, {
134+
offset: 0.5,
135+
color: color,
136+
opacity: 0.9
137+
}, {
138+
offset: 1,
139+
color: color
140+
}]
141+
});
142+
143+
var cornerRadius = 10;
144+
var roundedRect = new geometry.Rect(rect.origin, rect.size, cornerRadius);
145+
var column = new drawing.Rect(roundedRect, {
146+
fill: gradient,
147+
stroke: {
148+
color: "none"
149+
}
150+
});
151+
152+
return column;
153+
}
154+
</script>
155+
```
156+
157+
It is also possible to have only the top corners rounded:
158+
159+
[Chart Example: Top Corners Rounded](https://netcorerepl.telerik.com/woPPcpOm0806bKQP47)
160+
161+
Here is the result:
162+
163+
![chart-rounded-corners](images/chart-top-corners.png)
164+
165+
```Razor
166+
<div class="demo-section wide">
167+
@(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
168+
.Name("chart")
169+
.Title("Orders Status")
170+
.SeriesDefaults(seriesDefaults => seriesDefaults
171+
.Column().Visual("columnVisual")
172+
.Highlight(highlight => highlight.Toggle("toggleHandler"))
173+
)
174+
.Series(series => {
175+
series.Column(new double[] { 440000 })
176+
.Name("Active").Color("#229954");
177+
series.Column(new double[] { 180000 })
178+
.Name("Delayed").Color("#CD5C5C");
179+
series.Column(new double[] { 230000 })
180+
.Name("Delivered").Color("#145a32");
181+
})
182+
.CategoryAxis(axis => axis
183+
.Labels(labels => labels.Rotation(-90))
184+
.MajorGridLines(lines => lines.Visible(false))
185+
)
186+
.ValueAxis(axis => axis.Numeric()
187+
.Labels(labels => labels.Format("{0:N0}"))
188+
.MajorUnit(50000)
189+
.Line(line => line.Visible(false))
190+
)
191+
.Tooltip(tooltip => tooltip
192+
.Visible(true)
193+
.Format("{0:N0}")
194+
)
195+
)
196+
</div>
197+
<script>
198+
function columnVisual(e) {
199+
return createColumn(e.rect, e.options.color);
200+
}
201+
202+
function toggleHandler(e) {
203+
e.preventDefault();
204+
var visual = e.visual;
205+
var opacity = e.show ? 0.8 : 1;
206+
207+
visual.opacity(opacity);
208+
}
209+
210+
function createLegendItem(e) {
211+
var drawing = kendo.drawing;
212+
var geometry = kendo.geometry;
213+
214+
var color = e.options.markers.background;
215+
var labelColor = e.options.labels.color;
216+
var rect = new geometry.Rect([0, 0], [120, 50]);
217+
var layout = new drawing.Layout(rect, {
218+
spacing: 5,
219+
alignItems: "center"
220+
});
221+
222+
var overlay = drawing.Path.fromRect(rect, {
223+
fill: {
224+
color: "#fff",
225+
opacity: 0
226+
},
227+
stroke: {
228+
color: "none"
229+
},
230+
cursor: "pointer"
231+
});
232+
233+
var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
234+
var label = new drawing.Text(e.series.name, [0, 0], {
235+
fill: {
236+
color: labelColor
237+
}
238+
})
239+
240+
layout.append(column, label);
241+
layout.reflow();
242+
243+
var group = new drawing.Group().append(layout, overlay);
244+
245+
return group;
246+
}
247+
248+
function createColumn(rect, color) {
249+
var drawing = kendo.drawing;
250+
var geometry = kendo.geometry;
251+
252+
var gradient = new drawing.LinearGradient({
253+
stops: [{
254+
offset: 0,
255+
color: color
256+
}, {
257+
offset: 0.5,
258+
color: color,
259+
opacity: 0.9
260+
}, {
261+
offset: 0.5,
262+
color: color,
263+
opacity: 0.9
264+
}, {
265+
offset: 1,
266+
color: color
267+
}]
268+
});
269+
270+
var cornerRadius = 10;
271+
var roundedRect = new geometry.Rect(rect.origin, rect.size, cornerRadius);
272+
var column = new drawing.Rect(roundedRect, {
273+
fill: gradient,
274+
stroke: {
275+
color: "none"
276+
}
277+
});
278+
279+
var baseOrigin = [rect.origin.x, rect.origin.y + rect.size.height - cornerRadius];
280+
var baseSize = [rect.size.width, cornerRadius];
281+
var baseRect = new geometry.Rect(baseOrigin, baseSize);
282+
var squareBase = new drawing.Rect(rect, {
283+
fill: gradient,
284+
stroke: {
285+
color: "none"
286+
},
287+
clip: drawing.Path.fromRect(baseRect)
288+
});
289+
290+
var group = new drawing.Group();
291+
group.append(column, squareBase)
292+
return group;
293+
}
294+
</script>
295+
```
296+
297+
## See Also
298+
299+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs-aspnet/knowledge-base/images/chart-rounded-corners.png‎

21.3 KB
Loading

‎docs-aspnet/knowledge-base/images/chart-top-corners.png‎

23 KB
Loading

‎docs-aspnet/security/security.md‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,22 @@ We value the contributions of security researchers and ethical hackers. If a res
3333
|------------------|------------------------|
3434
| First Response | 7 days |
3535
| Time to Triage | 10 days |
36-
| Time to Resolution| Depends on severity |
36+
| Time to Resolution| [Depends on severity](#vulnerability-remediation-guidelines) |
3737

3838
For more information, visit:
3939
- [Bugcrowd Vulnerability Disclosure Program](https://bugcrowd.com/engagements/devtools-vdp)
4040
- [Progress Trust Center](https://www.progress.com/trust-center)
4141
- [Vulnerability Reporting Policy](https://www.progress.com/trust-center/vulnerability-reporting-policy)
4242

43+
## Vulnerability Remediation Guidelines
44+
45+
Progress follows defined timelines for remediating vulnerabilities based on their severity levels, ensuring a structured and efficient approach to maintaining security across all products. These guidelines are aligned with CVSS (Common Vulnerability Scoring System) scoring:
46+
47+
- **Critical scored issues (CVSS 9.0+):** Resolved within **30 days**.
48+
- **High scored issues (CVSS 7.0–8.9):** Resolved within **60 days**.
49+
- **Medium or lower scored issues (CVSS < 7):** Resolved within **90–120 days**, depending on the score.
50+
51+
While these are not strict SLA (Service Level Agreement), they serve as a commitment to providing timely resolutions for identified vulnerabilities.
4352

4453
## What We Do to Mitigate Risk
4554

‎docs/knowledge-base/customize-grouping-field-template-scheduler.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Adding Custom HTML to Grouping Field Template in Scheduler
3+
description: Learn how to customize the Scheduler's grouping column with custom HTML, such as adding buttons or links, using the groupHeaderTemplate configuration.
4+
type: how-to
5+
page_title: How to Customize Grouping Field Template in Scheduler with Custom HTML
6+
slug: customize-grouping-field-template-scheduler
7+
tags: kendo-ui, scheduler, groupheadertemplate, custom-html, customization
8+
res_type: kb
9+
ticketid: 1671258
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Scheduler for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2024.4.1112</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I want to modify the grouping column in the Scheduler with custom HTML, such as adding a button or a link with the ID of the group.
30+
31+
This KB article also answers the following questions:
32+
- How can I add a custom button to the Scheduler's group header?
33+
- Is it possible to insert custom HTML into the Scheduler's grouping template?
34+
- Can I customize the appearance of the Scheduler's group headers with HTML?
35+
36+
## Solution
37+
38+
To customize the grouping column in the Scheduler with custom HTML, such as adding buttons or links, utilize the [groupHeaderTemplate](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/group#groupheadertemplate) configuration option. This option allows the insertion of custom HTML content into the group header cells based on specific conditions or for specific resources.
39+
40+
Below is an example demonstrating how to add a custom button to the group header cell for a specific resource using the `groupHeaderTemplate` configuration:
41+
42+
```html
43+
<script id="groupHeaderTemplate" type="text/x-kendo-template">
44+
# if(data.field === "roomId") { #
45+
<div style="color: #=color#">#=text#</div>
46+
<button>Custom Button</button>
47+
# } else { #
48+
<div style="color: #=color#">#=text#</div>
49+
# } #
50+
</script>
51+
```
52+
53+
In this example, a custom button is added to the group header cell when the grouping is done based on the `roomId` field. You can modify the condition and content as needed to suit your particular requirements.
54+
55+
For a practical implementation of this solution, refer to this [example](https://dojo.telerik.com/MsoTFBhM/3).
56+
57+
## See Also
58+
59+
- [Scheduler Group Header Template Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/group#groupheadertemplate)
60+
- [Scheduler Overview](https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/overview)
61+
- [Templates Overview](https://docs.telerik.com/kendo-ui/framework/templates/overview)

0 commit comments

Comments
 (0)