Skip to content

Commit ab9cd1c

Browse files
committed
Sync with Kendo UI Professional
1 parent eebeb13 commit ab9cd1c

File tree

5 files changed

+289
-1
lines changed

5 files changed

+289
-1
lines changed

docs-aspnet/installation/system-requirements/os-support.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,15 @@ For a full list of the `.NET Core` requirements, see [.NET Core dependencies and
5959
>As of the R3 2022 release, MVC 3 and MVC 4 are no longer supported by {{ site.product }}.
6060
>The R1 2024 release will be the last release that supports .NET Framework versions older than 4.6.2 (4.5-4.6.1). One year of outstanding support service will be provided for the R1 2024 release. For more details on the reasons for dropping the support of the old .NET Framework versions, see this [blog post](https://www.telerik.com/blogs/embracing-future-product-update-enhanced-performance-and-security).
6161
62+
The table below displays the version of `System.Web.Mvc` matching the beginning of the corresponding Telerik Product version.
63+
64+
| MVC Version | Product Version |
65+
| :---------------- | :---------------------------- |
66+
| 5.2.4 | 2018.2.516 (2018 R2) |
67+
| 5.2.7 | 2019.1.220 (2019 R1 SP1) |
68+
| 5.2.9 | 2022.3.913 (2022 R3) |
69+
| 5.3.0 | 2024.1.130 (2024 Q1) |
70+
6271
{% endif %}
6372

6473
## Web Browsers Support
@@ -121,6 +130,6 @@ To boost the performance of your project:
121130
* [Visual Studio 2015 Support]({% slug vs2015support_core %})
122131
{% endif %}
123132
* [jQuery Version Support by {{ site.product }}]({% slug jquerysupport_core %})
124-
* [OS and Web Browser Support by {{ site.product }}]({% slug ossupport_core %})
133+
* [Breaking Changes]({% slug breakingchanges_aspnetcore %})
125134
* [PDF and Excel Export Support by {{ site.product }}]({% slug exportsupport_core %})
126135
* [Earlier Versions Support Policy by {{ site.product }}]({% slug oldversionssupportpolicy_core %})

docs/api/javascript/ui/datetimepicker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ Represents the Kendo UI DateTimePicker widget. Inherits from [Widget](/api/javas
1515

1616
Specifies the adaptive rendering of the component. The supported values are: `none` *(default)*, `auto`.
1717

18+
The adaptive rendering of the DateTimePicker provides consistency to the customer experience on any device by supporting adaptive enhancements such as changes in styling and behavior.
19+
1820
### animation `Boolean|Object`
1921

2022
Configures the opening and closing animations of the popups. Setting the `animation` option to `false` will disable the opening and closing animations. As a result the popup will open and close instantly.

docs/api/javascript/ui/spreadsheet.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1886,6 +1886,27 @@ The index of the sheet to locate.
18861886

18871887
Inserts a sheet with the specified options.
18881888

1889+
#### Example - inseart new sheets on button click
1890+
1891+
<div id="spreadsheet"></div>
1892+
<button>Add New Sheet</button>
1893+
<script>
1894+
var i = 2
1895+
$("#spreadsheet").kendoSpreadsheet({
1896+
sheets: [{ name: "Sheet1" }, { name: "Sheet2" }]
1897+
});
1898+
var sheets = $("#spreadsheet").data("kendoSpreadsheet").sheets();
1899+
$("button").click(function(){
1900+
$("#spreadsheet").data("kendoSpreadsheet").insertSheet({
1901+
name: "Custom Sheet Name" + ++i,
1902+
frozenRows: 1,
1903+
frozenColumns: 1,
1904+
rows: 15,
1905+
columns: 10,
1906+
});
1907+
})
1908+
</script>
1909+
18891910
#### Parameters
18901911

18911912
##### options `Object`
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: Removing Set Column Position option from Grid Column Menu
3+
description: Learn how to remove the Column Reordering option from the column menu of the Kendo UI Grid.
4+
type: how-to
5+
page_title: How to Disable Column Reordering in Kendo UI Grid Column Menu
6+
slug: disable-column-reordering-kendo-ui-grid
7+
tags: kendo-ui, grid, column-menu, column-reordering, javascript, set-column-position
8+
res_type: kb
9+
ticketid: 1660343
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Grid for Progress® Kendo UI®</td>
18+
</tr>
19+
<tr>
20+
<td>Version</td>
21+
<td>2024.3.806</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
I need to remove the Column Reordering functionality from the column menu in the Kendo UI Grid. This KB article also answers the following questions:
28+
- How to hide Column Reordering from the Grid's column menu?
29+
- How to customize the column menu in the Kendo UI Grid?
30+
- How to disable specific options in the Grid's column menu?
31+
32+
## Solution
33+
To remove the Column Reordering option from the column menu in the Kendo UI Grid, utilize the [`columnMenuInit`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnmenuinit) event. This event allows you to customize the column menu after it is initialized. By targeting the specific menu item for Column Reordering, you can hide or remove it from the menu.
34+
35+
Follow these steps to achieve the desired outcome:
36+
37+
1. Define the `columnMenuInit` event in the Grid's configuration.
38+
2. In the event handler function, find the menu item for Column Reordering.
39+
3. Hide the menu item to remove it from the column menu.
40+
41+
Here is a JavaScript example demonstrating how to implement this:
42+
43+
```javascript
44+
$("#grid").kendoGrid({
45+
// Grid configuration...
46+
columnMenuInit: function(e) {
47+
// Target the Column Reordering menu item
48+
let positionItem = $(e.container).find("ul").children("li").eq(1);
49+
// Hide the menu item
50+
positionItem.hide();
51+
}
52+
// Other grid options...
53+
});
54+
```
55+
56+
For a practical demonstration, refer to the below Dojo demo.
57+
58+
``dojo
59+
<div id="grid"></div>
60+
<script>
61+
$("#grid").kendoGrid({
62+
columns: [
63+
{ field: "name" },
64+
{ field: "age" }
65+
],
66+
reorderable: true,
67+
columnMenu: true,
68+
dataSource: [
69+
{ name: "Jane Doe", age: 30 },
70+
{ name: "John Doe", age: 33 }
71+
],
72+
columnMenuInit: function(e) {
73+
let positionItem = $(e.container).find("ul").children("li").eq(1);
74+
positionItem.hide();
75+
}
76+
});
77+
</script>
78+
```
79+
80+
## See Also
81+
- [Grid Column Menu Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columnmenu)
82+
- [ColumnMenuInit Event of Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnmenuinit)
83+
- [Kendo UI Grid Overview](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
title: Highlighting Series on Legend Item Hover in Grouped and Stacked Bar Chart
3+
description: Learn how to highlight all series across groups in a Kendo UI Bar Chart when hovering over a legend item.
4+
type: how-to
5+
page_title: How to Highlight All Series in Grouped and Stacked Bar Chart on Legend Hover - Kendo UI Chart
6+
slug: highlight-all-series-on-legend-hover-kendo-ui-chart
7+
tags: kendo ui, chart, bar chart, legend, hover, highlight, grouped, stacked
8+
res_type: kb
9+
ticketid: 723491
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Chart for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2020.3.915</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When using a grouped and stacked Bar Chart, I want to highlight all series within all groups when hovering over an item in the legend.
30+
31+
This KB article also answers the following questions:
32+
- How to manually control the highlight of chart series on legend hover?
33+
- How to implement custom highlighting for stacked and grouped charts in Kendo UI?
34+
- How to use the `toggleHighlight()` method to highlight chart series?
35+
36+
## Solution
37+
38+
To highlight all series across groups in a Kendo UI Bar Chart when hovering over a legend item, prevent the Chart's internal highlighting logic and implement a custom highlight by using the [`toggleHighlight`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/togglehighlight) method. This can be accomplished within the [`legendItemHover`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemhover) and [`legendItemLeave`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemleave) event handlers.
39+
40+
1. Handle the `legendItemHover` event to prevent the default highlighting logic and manually apply the highlight to the series matching the legend item's text.
41+
2. Use the `legendItemLeave` event to remove the highlight from the series when the mouse leaves the legend item.
42+
43+
The following example demonstrates how to configure the event handlers:
44+
45+
```javascript
46+
$("#chart").kendoChart({
47+
// Chart configuration...
48+
legendItemHover: function(e) {
49+
e.preventDefault(); // Prevent default highlight
50+
e.sender.toggleHighlight(true, e.text); // Apply custom highlight
51+
},
52+
legendItemLeave: function(e) {
53+
e.sender.toggleHighlight(false, e.text); // Remove custom highlight
54+
}
55+
// Additional chart configuration...
56+
});
57+
```
58+
59+
For a practical demonstration, refer to the below Dojo demo.
60+
```dojo
61+
<div id="example">
62+
<div class="demo-section wide">
63+
<div id="chart"></div>
64+
</div>
65+
<script>
66+
function createChart() {
67+
$("#chart").kendoChart({
68+
title: {
69+
text: "World population by age group and sex"
70+
},
71+
legend: {
72+
visible: true
73+
},
74+
seriesDefaults: {
75+
type: "column",
76+
stack: {
77+
type: "100%"
78+
}
79+
},
80+
series: [{
81+
name: "A",
82+
stack: {
83+
group: "Company"
84+
},
85+
data: [10,5,15],
86+
highlight: {
87+
visible: false
88+
},
89+
}, {
90+
name: "A",
91+
stack: {
92+
group: "Mean"
93+
},
94+
data: [5,10,20],
95+
visibleInLegend: false
96+
}, {
97+
name: "B",
98+
stack: {
99+
group: "Company"
100+
},
101+
data: [40,25,50]
102+
},{
103+
name: "B",
104+
stack: {
105+
group: "Mean"
106+
},
107+
data: [50,10,15],
108+
visibleInLegend: false
109+
}, {
110+
name: "C",
111+
stack: {
112+
group: "Company"
113+
},
114+
data: [30,35,5]
115+
}, {
116+
name: "C",
117+
stack: {
118+
group: "Mean"
119+
},
120+
data: [40,25,35],
121+
visibleInLegend: false
122+
}, {
123+
name: "D",
124+
stack: {
125+
group: "Company"
126+
},
127+
data: [20,35,30]
128+
}, {
129+
name: "D",
130+
stack: {
131+
group: "Mean"
132+
},
133+
data: [5,55,30],
134+
visibleInLegend: false
135+
}],
136+
seriesColors: ["#02808B", "#02808B", "#37B1D4", "#37B1D4", "#41EDFC", "#41EDFC", "#81F3FD", "#81F3FD", "#C0F9FE", "#C0F9FE"],
137+
valueAxis: {
138+
line: {
139+
visible: false
140+
}
141+
},
142+
categoryAxis: {
143+
categories: ["Total","Run","Invest"],
144+
majorGridLines: {
145+
visible: false
146+
}
147+
},
148+
tooltip: {
149+
visible: true,
150+
template: "#= series.stack.group #s, age #= series.name #"
151+
},
152+
legendItemHover: function(e){
153+
e.preventDefault();
154+
e.sender.toggleHighlight(true, e.text);
155+
},
156+
legendItemLeave: function(e) {
157+
e.sender.toggleHighlight(false, e.text);
158+
}
159+
});
160+
}
161+
162+
$(document).ready(createChart);
163+
$(document).bind("kendo:skinChange", createChart);
164+
</script>
165+
</div>
166+
```
167+
168+
## See Also
169+
170+
- [Chart Overview](https://docs.telerik.com/kendo-ui/controls/charts/chart/overview)
171+
- [Chart toggleHighlight Method](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/togglehighlight)
172+
- [Chart legendItemHover Event](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemhover)
173+
- [Kendo UI Dojo - Interactive Examples](https://dojo.telerik.com/)

0 commit comments

Comments
 (0)