Sync with Kendo UI Professional

telerik · Nov 26, 2024 · bcda357 · bcda357
1 parent 7e7b3af
commit bcda357
Show file tree

Hide file tree

Showing 9 changed files with 400 additions and 7 deletions.
diff --git a/docs-aspnet/knowledge-base/chart-rounded-columns.md b/docs-aspnet/knowledge-base/chart-rounded-columns.md
@@ -0,0 +1,299 @@
+---
+title: Rounded corners for Chart columns
+page_title: Rounded corners for Bar Chart columns
+description: "An example on how to apply rounded corners styling to {{ site.product }} Chart columns."
+type: how-to
+slug: chart-rounded-corners
+tags: progress, telerik, aspnet, mvc, core, chart, rounded, corners
+res_type: kb
+component: chart
+---
+
+## Environment
+
+<table>
+ <tr>
+  <td>Product</td>
+  <td>{{ site.product }} Chart</td>
+ </tr>
+</table>
+
+## Description
+
+How can I change {{ site.product }} Chart columns to appear with rounded corners?
+
+## Solution
+
+You can achieve this requirement using the .Visual() capability offered by the component. Check the full implementation in this live REPL sample:
+
+[Chart Example: All Corners Rounded](https://netcorerepl.telerik.com/myPlcPlg30MY8AnT10)
+
+The result looks like this:
+
+![chart-rounded-corners](images/chart-rounded-corners.png)
+
+```Razor
+<div class="demo-section wide">
+    @(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
+        .Name("chart")
+        .Title("Orders Status")
+        .Legend(legend => legend
+            .Position(ChartLegendPosition.Top)
+        )
+        .SeriesDefaults(seriesDefaults => seriesDefaults
+            .Column().Visual("columnVisual")
+            .Highlight(highlight => highlight.Toggle("toggleHandler"))
+        )
+        .Series(series => {
+            series.Column(new double[] { 440000 })
+            .Name("Active").Color("#229954"); 
+            series.Column(new double[] { 180000 })
+            .Name("Delayed").Color("#CD5C5C");
+            series.Column(new double[] { 230000 })
+            .Name("Delivered").Color("#145a32");
+        })
+        .CategoryAxis(axis => axis
+            .Labels(labels => labels.Rotation(-90))
+            .MajorGridLines(lines => lines.Visible(false))
+        )
+        .ValueAxis(axis => axis.Numeric()
+            .Labels(labels => labels.Format("{0:N0}"))
+            .MajorUnit(50000)
+            .Line(line => line.Visible(false))
+        )
+        .Tooltip(tooltip => tooltip
+            .Visible(true)
+            .Format("{0:N0}")
+        )
+    ) 
+</div>
+<script>
+    function columnVisual(e) {
+        return createColumn(e.rect, e.options.color);
+    }
+
+    function toggleHandler(e) {
+        e.preventDefault();
+        var visual = e.visual;
+        var opacity = e.show ? 0.8 : 1;
+
+        visual.opacity(opacity);
+    }
+
+    function createLegendItem(e) {
+        var drawing = kendo.drawing;
+        var geometry = kendo.geometry;
+
+        var color = e.options.markers.background;
+        var labelColor = e.options.labels.color;
+        var rect = new geometry.Rect([0, 0], [120, 50]);
+        var layout = new drawing.Layout(rect, {
+            spacing: 5,
+            alignItems: "center"
+        });
+
+        var overlay = drawing.Path.fromRect(rect, {
+            fill: {
+                color: "#fff",
+                opacity: 0
+            },
+            stroke: {
+                color: "none"
+            },
+            cursor: "pointer"
+        });
+
+        var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
+        var label = new drawing.Text(e.series.name, [0, 0], {
+            fill: {
+                color: labelColor
+            }
+        })
+
+        layout.append(column, label);
+        layout.reflow();
+
+        var group = new drawing.Group().append(layout, overlay);
+
+        return group;
+    }
+
+    function createColumn(rect, color) {
+        var drawing = kendo.drawing;
+        var geometry = kendo.geometry;
+
+        var gradient = new drawing.LinearGradient({
+            stops: [{
+                offset: 0,
+                color: color
+            }, {
+                offset: 0.5,
+                color: color,
+                opacity: 0.9
+            }, {
+                offset: 0.5,
+                color: color,
+                opacity: 0.9
+            }, {
+                offset: 1,
+                color: color
+            }]
+        });
+
+        var cornerRadius = 10;
+        var roundedRect = new geometry.Rect(rect.origin, rect.size, cornerRadius);
+        var column = new drawing.Rect(roundedRect, {
+            fill: gradient,
+            stroke: {
+                color: "none"
+            }
+        });
+
+        return column;
+    }
+</script>
+```
+
+It is also possible to have only the top corners rounded:
+
+[Chart Example: Top Corners Rounded](https://netcorerepl.telerik.com/woPPcpOm0806bKQP47)
+
+Here is the result:
+
+![chart-rounded-corners](images/chart-top-corners.png)
+
+```Razor
+<div class="demo-section wide">
+    @(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.ElectricityProduction>()
+        .Name("chart")
+        .Title("Orders Status")
+        .SeriesDefaults(seriesDefaults => seriesDefaults
+            .Column().Visual("columnVisual")
+            .Highlight(highlight => highlight.Toggle("toggleHandler"))
+        )
+        .Series(series => {
+            series.Column(new double[] { 440000 })
+            .Name("Active").Color("#229954"); 
+            series.Column(new double[] { 180000 })
+            .Name("Delayed").Color("#CD5C5C");
+            series.Column(new double[] { 230000 })
+            .Name("Delivered").Color("#145a32");
+        })
+        .CategoryAxis(axis => axis
+            .Labels(labels => labels.Rotation(-90))
+            .MajorGridLines(lines => lines.Visible(false))
+        )
+        .ValueAxis(axis => axis.Numeric()
+            .Labels(labels => labels.Format("{0:N0}"))
+            .MajorUnit(50000)
+            .Line(line => line.Visible(false))
+        )
+        .Tooltip(tooltip => tooltip
+            .Visible(true)
+            .Format("{0:N0}")
+        )
+    ) 
+</div>
+<script>
+    function columnVisual(e) {
+        return createColumn(e.rect, e.options.color);
+    }
+
+    function toggleHandler(e) {
+        e.preventDefault();
+        var visual = e.visual;
+        var opacity = e.show ? 0.8 : 1;
+
+        visual.opacity(opacity);
+    }
+
+    function createLegendItem(e) {
+        var drawing = kendo.drawing;
+        var geometry = kendo.geometry;
+
+        var color = e.options.markers.background;
+        var labelColor = e.options.labels.color;
+        var rect = new geometry.Rect([0, 0], [120, 50]);
+        var layout = new drawing.Layout(rect, {
+            spacing: 5,
+            alignItems: "center"
+        });
+
+        var overlay = drawing.Path.fromRect(rect, {
+            fill: {
+                color: "#fff",
+                opacity: 0
+            },
+            stroke: {
+                color: "none"
+            },
+            cursor: "pointer"
+        });
+
+        var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
+        var label = new drawing.Text(e.series.name, [0, 0], {
+            fill: {
+                color: labelColor
+            }
+        })
+
+        layout.append(column, label);
+        layout.reflow();
+
+        var group = new drawing.Group().append(layout, overlay);
+
+        return group;
+    }
+
+    function createColumn(rect, color) {
+        var drawing = kendo.drawing;
+        var geometry = kendo.geometry;
+
+        var gradient = new drawing.LinearGradient({
+            stops: [{
+                offset: 0,
+                color: color
+            }, {
+                offset: 0.5,
+                color: color,
+                opacity: 0.9
+            }, {
+                offset: 0.5,
+                color: color,
+                opacity: 0.9
+            }, {
+                offset: 1,
+                color: color
+            }]
+        });
+
+        var cornerRadius = 10;
+        var roundedRect = new geometry.Rect(rect.origin, rect.size, cornerRadius);
+        var column = new drawing.Rect(roundedRect, {
+            fill: gradient,
+            stroke: {
+                color: "none"
+            }
+        });
+
+        var baseOrigin = [rect.origin.x, rect.origin.y + rect.size.height - cornerRadius];
+        var baseSize = [rect.size.width, cornerRadius];
+        var baseRect = new geometry.Rect(baseOrigin, baseSize);
+        var squareBase = new drawing.Rect(rect, {
+            fill: gradient,
+            stroke: {
+                color: "none"
+            },
+            clip: drawing.Path.fromRect(baseRect)
+        });
+
+        var group = new drawing.Group();
+        group.append(column, squareBase)
+        return group;
+    }
+</script>
+```
+
+## See Also
+
+* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)
diff --git a/docs-aspnet/knowledge-base/images/chart-rounded-corners.png b/docs-aspnet/knowledge-base/images/chart-rounded-corners.png
diff --git a/docs-aspnet/knowledge-base/images/chart-top-corners.png b/docs-aspnet/knowledge-base/images/chart-top-corners.png
diff --git a/docs-aspnet/security/security.md b/docs-aspnet/security/security.md
@@ -33,13 +33,22 @@ We value the contributions of security researchers and ethical hackers. If a res
 |------------------|------------------------|
 | First Response    | 7 days                 |
 | Time to Triage    | 10 days                |
-| Time to Resolution| Depends on severity    |
+| Time to Resolution| [Depends on severity](#vulnerability-remediation-guidelines)    |
 
 For more information, visit:
 - [Bugcrowd Vulnerability Disclosure Program](https://bugcrowd.com/engagements/devtools-vdp)
 - [Progress Trust Center](https://www.progress.com/trust-center)
 - [Vulnerability Reporting Policy](https://www.progress.com/trust-center/vulnerability-reporting-policy)
 
+## Vulnerability Remediation Guidelines
+
+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:
+
+- **Critical scored issues (CVSS 9.0+):** Resolved within **30 days**.  
+- **High scored issues (CVSS 7.0–8.9):** Resolved within **60 days**.  
+- **Medium or lower scored issues (CVSS < 7):** Resolved within **90–120 days**, depending on the score.  
+
+While these are not strict SLA (Service Level Agreement), they serve as a commitment to providing timely resolutions for identified vulnerabilities.
 
 ## What We Do to Mitigate Risk
 

diff --git a/docs/knowledge-base/customize-grouping-field-template-scheduler.md b/docs/knowledge-base/customize-grouping-field-template-scheduler.md
@@ -0,0 +1,61 @@
+---
+title: Adding Custom HTML to Grouping Field Template in Scheduler
+description: Learn how to customize the Scheduler's grouping column with custom HTML, such as adding buttons or links, using the groupHeaderTemplate configuration.
+type: how-to
+page_title: How to Customize Grouping Field Template in Scheduler with Custom HTML
+slug: customize-grouping-field-template-scheduler
+tags: kendo-ui, scheduler, groupheadertemplate, custom-html, customization
+res_type: kb
+ticketid: 1671258
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Scheduler for Progress® Kendo UI®</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>2024.4.1112</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+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.
+
+This KB article also answers the following questions:
+- How can I add a custom button to the Scheduler's group header?
+- Is it possible to insert custom HTML into the Scheduler's grouping template?
+- Can I customize the appearance of the Scheduler's group headers with HTML?
+
+## Solution
+
+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.
+
+Below is an example demonstrating how to add a custom button to the group header cell for a specific resource using the `groupHeaderTemplate` configuration:
+
+```html
+<script id="groupHeaderTemplate" type="text/x-kendo-template">
+  # if(data.field === "roomId") { #
+  <div style="color: #=color#">#=text#</div>
+  <button>Custom Button</button>
+ #  } else { #
+ <div style="color: #=color#">#=text#</div>
+ # } #
+</script>
+```
+
+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.
+
+For a practical implementation of this solution, refer to this [example](https://dojo.telerik.com/MsoTFBhM/3).
+
+## See Also
+
+- [Scheduler Group Header Template Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/group#groupheadertemplate)
+- [Scheduler Overview](https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/overview)
+- [Templates Overview](https://docs.telerik.com/kendo-ui/framework/templates/overview)