Skip to content

Commit cb124d5

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 0684ce5 commit cb124d5

8 files changed

+578
-25
lines changed

‎docs/intro/installation/npm.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -222,33 +222,38 @@ As of `2024.4.1112` the `@progress/kendo-ui` NPM package introduce a more fine-g
222222

223223
```javascript
224224
`@progress/kendo-ui` //Imports the kendo.all.js
225-
`@progress/kendo-ui/*.js` //Imports the files corresponding to the modul system used - ESM or CJS.
225+
`@progress/kendo-ui/*.js` //Imports the files corresponding to the module system used - ESM or CJS.
226226
`@progress/kendo-ui/esm` //Imports kendo.all.js only for ESM.
227227
`@progress/kendo-ui/esm/*.js` //Imports the files for ESM.
228-
`@progress/kendo-ui/cjs` //Importskendo.all.js only for CJS.
228+
`@progress/kendo-ui/cjs` //Imports kendo.all.js only for CJS.
229229
`@progress/kendo-ui/esm/*.js` //Imports the files for CJS.
230230
`@progress/kendo-ui/umd` //Imports kendo.all.min.js only for UMD.
231-
`@progress/kendo-ui/umd/*.js` //Imports th files for UMD.
231+
`@progress/kendo-ui/umd/*.js` //Imports the files for UMD.
232232
```
233233
234234
#### Examples
235235
236+
236237
```javascript
237238
import "@progress/kendo-ui"; //Imports the kendo.all.js
238239
```
239240
241+
240242
```javascript
241243
import "@progress/kendo-ui/esm"; //Imports kendo.all.js only for ESM.
242-
```
244+
```
245+
243246
244247
```javascript
245-
import "@progress/kendo-ui/kendo.grid.js"; //Imports the Grid related files corresponding to the modul system used - ESM or CJS.
248+
import "@progress/kendo-ui/kendo.grid.js"; //Imports the Grid related files corresponding to the module system used - ESM or CJS.
246249
```
247250
251+
248252
```javascript
249253
import "@progress/kendo-ui/esm/kendo.grid.js"; //Imports the Grid related files for ESM.
250254
```
251255
256+
252257
## Known Issues
253258
254259
* The Progress NPM registry was retired in favor of [npmjs.com](https://www.npmjs.com/). To start using the default registry, remove the two lines which contain `registry.npm.telerik.com` from your `.npmrc` file.

‎docs/knowledge-base/create-scatter-charts-with-legends-and-object-data-kendo-ui-jquery.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Creating Scatter Charts with Object Data and Legends in Kendo UI for jQuery
3+
description: Learn how to create a Kendo UI for jQuery Scatter Chart using object data with legends that match data item colors.
4+
type: how-to
5+
page_title: How to Create Scatter Charts with Legends and Object Data in Kendo UI for jQuery
6+
slug: create-scatter-charts-with-legends-and-object-data-kendo-ui-jquery
7+
tags: kendo, ui, jquery, chart, scatter, legends, object, data, datasource, color
8+
res_type: kb
9+
ticketid: 1682349
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Kendo UI for jQuery Chart</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.1.227</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I need to create a scatter chart in Kendo UI for jQuery that utilizes object data and includes a legend. My data items are objects because I require additional information for tooltips, and my application needs to access the data later through the chart's dataSource.data(). Each data item must be grouped by a specific property, and the legend should display each unique group with its corresponding color. How can I achieve this functionality?
30+
31+
This knowledge base article also answers the following questions:
32+
- How to group data in a Kendo UI for jQuery Scatter Chart?
33+
- How to dynamically set series colors in a Kendo UI for jQuery Scatter Chart?
34+
- How to match legend colors with series colors in a Kendo UI for jQuery Scatter Chart?
35+
36+
## Solution
37+
38+
To create a Kendo UI for jQuery Scatter Chart with object data and a corresponding legend, follow these steps:
39+
40+
1. Group your data by the specified property (e.g., `nameForGrouping`).
41+
2. Set series colors dynamically based on your data items' `colourForGrouping` property.
42+
3. Enable tooltips to display your custom `tooltipText`.
43+
4. Use the `dataSource` option for the Chart to bind your object data.
44+
5. Adjust legend colors to match series colors.
45+
46+
Here is an example of how you can set it up:
47+
48+
```dojo
49+
<div id="chart"></div>
50+
<script>
51+
function createChart() {
52+
$("#chart").kendoChart({
53+
dataSource: {
54+
data: [
55+
{ id: "1", xValue: 20, yValue: 2000, tooltipText: "Unique tooltip text!", nameForGrouping: "pink", colourForGrouping: "#FFC0CB" },
56+
{ id: "2", xValue: 3, yValue: 2010, tooltipText: "Different tooltip text!", nameForGrouping: "purple", colourForGrouping: "#800080" },
57+
{ id: "3", xValue: 12, yValue: 2032, tooltipText: "Tooltip text for pink!", nameForGrouping: "pink", colourForGrouping: "#FFC0CB" },
58+
{ id: "4", xValue: 37, yValue: 2030, tooltipText: "Tooltip for purple!", nameForGrouping: "purple", colourForGrouping: "#800080" }
59+
],
60+
group: { field: "nameForGrouping" }
61+
},
62+
title: {
63+
text: "Scatter Chart with Object Data & Legend"
64+
},
65+
legend: {
66+
position: "bottom"
67+
},
68+
seriesDefaults: {
69+
type: "scatter"
70+
},
71+
series: [{
72+
xField: "xValue",
73+
yField: "yValue",
74+
name: "#= group.value #",
75+
color: function(e) { return e.dataItem.colourForGrouping }
76+
}],
77+
dataBound: function(e) {
78+
var chart = e.sender;
79+
chart.options.series[0].color = chart.options.series[0].data[0].colourForGrouping;
80+
chart.options.series[1].color = chart.options.series[1].data[1].colourForGrouping;
81+
},
82+
xAxis: {
83+
title: { text: "X Value" },
84+
min: 0,
85+
max: 40
86+
},
87+
yAxis: {
88+
title: { text: "Y Value" },
89+
min: 1995,
90+
max: 2040
91+
},
92+
tooltip: {
93+
visible: true,
94+
template: "#= dataItem.tooltipText #"
95+
}
96+
});
97+
}
98+
99+
$(document).ready(createChart);
100+
$(document).bind("kendo:skinChange", createChart);
101+
</script>
102+
```
103+
104+
Remember to use the [`dataBound`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/databound) event to adjust the legend colors to match the series colors. This step is necessary because the legend colors are not automatically synced with the dynamic series colors.
105+
106+
## See Also
107+
108+
- [Official Kendo UI for jQuery Chart Documentation](https://docs.telerik.com/kendo-ui/controls/charts/overview/)
109+
- [Kendo UI for jQuery Chart Series Colors Documentation](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.color)
110+
- [Kendo UI for jQuery Chart dataBound API Documentation](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/databound)

‎docs/knowledge-base/customize-form-field-height-row-gutter-kendo-ui-jquery.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Adjusting Form Field Height and Row Gutter in Kendo UI for jQuery Forms
3+
description: Learn how to customize the field height and row gutter in Kendo UI for jQuery Form.
4+
type: how-to
5+
page_title: How to Customize Form Field Height and Row Gutter in Kendo UI for jQuery
6+
slug: customize-form-field-height-row-gutter-kendo-ui-jquery
7+
tags: kendo-ui-for-jquery, form, css, style, layout
8+
res_type: kb
9+
ticketid: 1673075
10+
---
11+
12+
## Description
13+
In a form with multiple groups, you might want to adjust the spacing between rows or the height of the fields within a group. This knowledge base article also answers the following questions:
14+
- How can I set the gutter between rows in a Kendo UI for jQuery Form?
15+
- How do I change the field height within a group in a Kendo UI for jQuery Form?
16+
- What CSS properties are used to customize the layout of a Kendo UI for jQuery Form?
17+
18+
## Solution
19+
To modify the gutter between rows in a Kendo UI for jQuery Form, use the `row-gap` CSS property. The `row-gap` property specifies the size of the gap (gutter) between rows in a grid layout.
20+
21+
### Adjusting Row Gutter
22+
Apply the following CSS to adjust the row gutter:
23+
24+
```css
25+
.k-form-layout {
26+
row-gap: 40px; /* Adjust the 40px value to increase or decrease the gutter size */
27+
}
28+
```
29+
30+
The `row-gap` property allows you to easily control the spacing between rows, enhancing the form's visual appeal and readability.
31+
32+
### Example
33+
Refer to the following Progress Kendo UI Dojo, which demonstrates the customization of row gutter using the `row-gap` CSS property: [Progress Kendo UI Dojo Example](https://dojo.telerik.com/wFiKDWVA).
34+
35+
## See Also
36+
- [Kendo UI for jQuery Form Overview](https://docs.telerik.com/kendo-ui/controls/editors/form/overview)
37+
- [MDN Web Docs on row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap)

‎docs/knowledge-base/dojo-snippets-list-faq.md‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,10 @@ res_type: kb
99

1010
## Description
1111

12-
When I visit the Kendo UI Dojo, I see the message below. What does this message mean?
13-
14-
```
15-
As of 10/03/2024, the user accounts functionality has been deprecated.
16-
```
17-
18-
This KB also answers the following questions:
19-
* Will I lose all of my snippets?
20-
* How can I get a list with the existing snippets in my Dojo account?
21-
2212
The Dojo no longer supports registered accounts. You can keep on creating snippets and sharing them with others, however they will not be linked to a specific account.
2313

2414
The main functionality that has been removed, is the snippets list that was previously accessible through the `/snippets` page. On this page, you were previously able to view a list of all of the snippets created by that account. This page will no longer be available. If you want to keep track of the created snippets, you have to either bookmark them or save them in a place of your choice.
2515

26-
## Solution
27-
28-
> Please contact us before the 3rd of April 2025(04/03/2025) for a list of snippets created using your account. After that, this information will be erased and we won't be able to retrieve account-specific lists.
29-
30-
The existing snippets WILL NOT be removed. All of the snippets that have been created over the years will remain available, including the ones created with your account. The urls of these snippets will remain unchanged.
31-
32-
If you need a list of your account-specific snippets, please open a [support ticket](https://www.telerik.com/account/support-center/contact-us/technical-support) with the title `Request for Dojo Snippets` and share the email address with which the dojo account was created. Once we've exported your snippets, we'll send them in a `CSV` format to the provided email address.
33-
3416
## See Also
3517

36-
* [Kendo UI Dojo](https://dojo.telerik.com/)
18+
* [Kendo UI Dojo](https://dojo.telerik.com/)

‎docs/knowledge-base/how-to-autofit-columns-multicolumncombobox-kendo-ui-jquery.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: AutoWidth for Kendo UI for jQuery MultiColumnComboBox with Multiple Columns
3+
description: Learn how to ensure a set column width dynamically in the Kendo UI for jQuery MultiColumnComboBox when not all columns fit on the screen.
4+
type: how-to
5+
page_title: How to Autofit Columns in MultiColumnComboBox
6+
slug: how-to-autofit-columns-multicolumncombobox-kendo-ui-jquery
7+
tags: kendo-ui-for-jquery, multicolumncombobox, scrollbar, columns, configuration
8+
res_type: kb
9+
ticketid: 1683335
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Kendo UI for jQuery MultiColumnComboBox</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.1.227</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When binding multiple columns to the MultiColumnComboBox, the columns may not fit properly on the screen, and a scrollbar does not appear. This knowledge base article also answers the following questions:
30+
- How can I adjust the column widths dynamically based on the screen size in the MultiColumnComboBox?
31+
- Is there a way to automatically adjust the dropdown width of the MultiColumnComboBox to ensure all columns are visible?
32+
- How to handle column and dropdown widths in the MultiColumnComboBox for responsive designs?
33+
34+
## Solution
35+
36+
To handle scenarios where all columns in the MultiColumnComboBox do not fit properly on the screen, resulting in the need for a scrollbar, follow these steps:
37+
38+
1. Use the [`open`](/api/javascript/ui/multicolumncombobox/events/open) event of the Kendo UI for jQuery MultiColumnComboBox to dynamically adjust the column widths based on the screen size.
39+
2. Within the event handler, calculate the new width for the columns.
40+
3. Use the [`setOptions`](/api/javascript/ui/widget/methods/setoptions) method to apply the new width to the columns.
41+
42+
Here is an example of how to dynamically set the column widths:
43+
44+
```javascript
45+
open: function (e) {
46+
var newWidth = window.innerWidth / 7 - 5;
47+
e.sender.setOptions({
48+
columns: [
49+
{
50+
field: "CompanyName",
51+
title: "Company Name3",
52+
width: newWidth,
53+
},
54+
{
55+
field: "CompanyName",
56+
title: "Company Name4",
57+
width: newWidth,
58+
},
59+
],
60+
});
61+
},
62+
```
63+
64+
Below is a runnable example:
65+
66+
```dojo
67+
<select id="multicolumncombobox"></select>
68+
69+
<script>
70+
$(document).ready(function () {
71+
var multiComboBox = $("#multicolumncombobox")
72+
.kendoMultiColumnComboBox({
73+
dataTextField: "ContactName",
74+
dataValueField: "CustomerID",
75+
height: 400,
76+
width: 500,
77+
dropDownWidth: 400,
78+
left: 0,
79+
columns: [
80+
{
81+
field: "ContactName",
82+
title: "Contact Name",
83+
template:
84+
"<span class='customer-photo'" +
85+
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></span>" +
86+
"<span class='customer-name'>#: ContactName #</span>",
87+
width: 200,
88+
},
89+
{ field: "ContactTitle", title: "Contact Title", width: 200 },
90+
{ field: "CompanyName", title: "Company Name", width: 200 },
91+
{ field: "CompanyName", title: "Company Name1", width: 200 },
92+
{ field: "CompanyName", title: "Company Name2", width: 200 },
93+
{ field: "CompanyName", title: "Company Name3", width: 200 },
94+
{ field: "CompanyName", title: "Company Name4", width: 200 },
95+
],
96+
footerTemplate:
97+
"Total #: instance.dataSource.total() # items found",
98+
filter: "contains",
99+
filterFields: [
100+
"ContactName",
101+
"ContactTitle",
102+
"CompanyName",
103+
"CompanyName",
104+
"CompanyName",
105+
"CompanyName",
106+
"CompanyName",
107+
],
108+
dataSource: {
109+
type: "odata",
110+
transport: {
111+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers",
112+
},
113+
},
114+
open: function (e) {
115+
var newWidth = window.innerWidth / 7 - 5;
116+
e.sender.setOptions({
117+
columns: [
118+
{
119+
field: "ContactName",
120+
title: "Contact Name",
121+
template:
122+
"<span class='customer-photo'" +
123+
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></span>" +
124+
"<span class='customer-name'>#: ContactName #</span>",
125+
width: newWidth,
126+
},
127+
{
128+
field: "ContactTitle",
129+
title: "Contact Title",
130+
width: newWidth,
131+
},
132+
{
133+
field: "CompanyName",
134+
title: "Company Name",
135+
width: newWidth,
136+
},
137+
{
138+
field: "CompanyName",
139+
title: "Company Name1",
140+
width: newWidth,
141+
},
142+
{
143+
field: "CompanyName",
144+
title: "Company Name2",
145+
width: newWidth,
146+
},
147+
{
148+
field: "CompanyName",
149+
title: "Company Name3",
150+
width: newWidth,
151+
},
152+
{
153+
field: "CompanyName",
154+
title: "Company Name4",
155+
width: newWidth,
156+
},
157+
],
158+
});
159+
},
160+
})
161+
.data("kendoMultiColumnComboBox");
162+
});
163+
</script>
164+
```
165+
166+
For more detailed information on configuring the columns and dropdown width of the MultiColumnComboBox, refer to the official documentation:
167+
- [Configuring columns in MultiColumnComboBox](https://docs.telerik.com/kendo-ui/api/javascript/ui/multicolumncombobox/configuration/columns.width)
168+
- [Setting dropdown width](https://docs.telerik.com/kendo-ui/api/javascript/ui/multicolumncombobox/configuration/dropdownwidth)
169+
170+
## See Also
171+
172+
- [Kendo UI for jQuery MultiColumnComboBox Overview]https://docs.telerik.com/kendo-ui/controls/multicolumncombobox/overview)
173+
- [MultiColumnComboBox Open Event](https://docs.telerik.com/kendo-ui/api/javascript/ui/multicolumncombobox/events/open)
174+
- [MultiColumnComboBox setOptions Method](https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/methods/setoptions)

0 commit comments

Comments
 (0)