Skip to content

Commit 45871ab

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 83975aa commit 45871ab

File tree

6 files changed

+172
-3
lines changed

6 files changed

+172
-3
lines changed

‎VERSION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{ "year": 2021, "release": 3, "servicePack": "next", "servicePackNumber": 2 }
1+
{ "year": 2022, "release": 1}

‎docs/api/javascript/mobile/ui/switch.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,9 @@ Toggle the checked state of the widget.
210210

211211
### change
212212

213-
Fires when the state of the widget changes
213+
Fires when the state of the widget changes.
214+
215+
More information about the Kendo UI Application for mobile can be found in [`this article`](/controls/hybrid/application).
214216

215217
#### Event Data
216218

@@ -225,6 +227,7 @@ The checked state of the widget.
225227
</div>
226228

227229
<script>
230+
// the content of the document.body is used by default
228231
var app = new kendo.mobile.Application();
229232

230233
function onChange(e) {

‎docs/api/javascript/ui/grid.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2819,6 +2819,8 @@ The width of the column. Numeric values are treated as pixels. The width option
28192819

28202820
**For more important information, please refer to [Column Widths](/controls/data-management/grid/columns/widths)**.
28212821

2822+
Grid options, including column widths, can be set programmatically after Grid initialization with the [`setOptions`](/api/javascript/ui/grid/methods/setoptions) method.
2823+
28222824
#### Example - set the column width as a string
28232825

28242826
<div id="grid"></div>
@@ -12384,6 +12386,78 @@ The widget instance which fired the event.
1238412386
});
1238512387
</script>
1238612388

12389+
#### Example - get the data items of the expanded master and detail rows
12390+
12391+
<div id="grid"></div>
12392+
<script>
12393+
$("#grid").kendoGrid({
12394+
dataSource: {
12395+
data: [
12396+
{ EmployeeID: 1, FirstName: "Nancy", LastName: "Davolio", Country: "USA"},
12397+
{ EmployeeID: 2, FirstName: "Andrew", LastName: "Fuller", Country: "USA"},
12398+
{ EmployeeID: 3, FirstName: "Janet", LastName: "Leverling", Country: "Germany"}
12399+
]
12400+
},
12401+
pageable: true,
12402+
detailInit: detailInit,
12403+
dataBound: function() {
12404+
this.expandRow(this.tbody.find("tr.k-master-row").first());
12405+
},
12406+
columns: [
12407+
{
12408+
field: "FirstName",
12409+
title: "First Name",
12410+
width: "110px"
12411+
},
12412+
{
12413+
field: "LastName",
12414+
title: "Last Name",
12415+
width: "110px"
12416+
},
12417+
{
12418+
field: "Country",
12419+
width: "110px"
12420+
}
12421+
],
12422+
detailExpand: function(e) {
12423+
/* The result can be observed in the DevTools(F12) console of the browser. */
12424+
var masterDataItem = e.sender.dataItem(e.masterRow);
12425+
// get detail Grid data
12426+
//var detailDataItems = e.detailRow.find(".k-grid").data("kendoGrid").dataSource.data();
12427+
12428+
//get detail grid data items using dataItem()
12429+
var detailGridRows = e.detailRow.find(".k-master-row");
12430+
var detailGrid = e.detailRow.find(".k-grid").data("kendoGrid");
12431+
var detailDataItems = [];
12432+
detailGridRows.each(function(idx, row){
12433+
detailDataItems.push(detailGrid.dataItem(row))
12434+
});
12435+
12436+
console.log("master row dataItem", masterDataItem);
12437+
console.log("detail row dataItem", detailDataItems);
12438+
}
12439+
});
12440+
12441+
function detailInit(e) {
12442+
$("<div/>").appendTo(e.detailCell).kendoGrid({
12443+
dataSource: {
12444+
data: [
12445+
{EmployeeID: 1, OrderID: 10258, ShipCountry: "Austria" },
12446+
{EmployeeID: 2, OrderID: 10558, ShipCountry: "Spain" },
12447+
{EmployeeID: 1, OrderID: 10256, ShipCountry: "France" },
12448+
{EmployeeID: 3, OrderID: 11005, ShipCountry: "Spain" }
12449+
],
12450+
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
12451+
},
12452+
pageable: true,
12453+
columns: [
12454+
{ field: "OrderID", width: "110px" },
12455+
{ field: "ShipCountry", title:"Ship Country", width: "110px" }
12456+
]
12457+
});
12458+
}
12459+
</script>
12460+
1238712461
#### Example - subscribe to the "detailExpand" event after initialization
1238812462

1238912463
<div id="grid"></div>

‎docs/api/javascript/ui/tabstrip.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -587,7 +587,7 @@ Appends a tab to the collection of tabs in a **TabStrip**.
587587
dataTextField: "text",
588588
dataImageUrlField: "imageUrl",
589589
dataContentField: "content",
590-
dataContentUrlField: "contentUrl"
590+
dataContentUrlField: "contentUrl",
591591
dataSource: [
592592
{
593593
text: "Tab 1",

‎docs/knowledge-base/apply-minimum-width-during-column-resize.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,97 @@ The following example demonstrates how to use the API for internal Grid column r
7676
</script>
7777
```
7878

79+
Example: Apply a minimum width during column resize for a single column.
80+
81+
```dojo
82+
<div id="grid"></div>
83+
<script>
84+
$(function(){
85+
$("#grid").kendoGrid({
86+
dataSource: {
87+
data: [{foo: "item", bar: "number", baz: "one"}]
88+
},
89+
columns: [
90+
{field: "foo"},
91+
{field: "bar"},
92+
{field: "baz"}
93+
],
94+
resizable: true
95+
});
96+
97+
var minTableWidth;
98+
var minColumnWidth = 100;
99+
var fooTh;
100+
var idxOfRestrictedColumn;
101+
var grid;
102+
103+
$("#grid").data("kendoGrid").resizable.bind("start", function(e) {
104+
fooTh = $("th[data-field='foo']");
105+
idxOfRestrictedColumn = fooTh.index();
106+
grid = fooTh.closest(".k-grid").data("kendoGrid");
107+
});
108+
109+
$("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
110+
var fooTh = $("th[data-field='foo']");
111+
if (idxOfRestrictedColumn === 0) {
112+
if (fooTh.width() >= minColumnWidth) {
113+
minTableWidth = grid.tbody.closest("table").width();
114+
}
115+
116+
if (fooTh.width() < minColumnWidth) {
117+
// the next line is ONLY needed if Grid scrolling is enabled
118+
grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idxOfRestrictedColumn).width(minColumnWidth);
119+
grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idxOfRestrictedColumn).width(minColumnWidth);
120+
}
121+
}
122+
123+
});
124+
});
125+
</script>
126+
```
127+
128+
Example: Apply width on a certain column if window with less than specific number.
129+
130+
This is done utilizing the [`setOptions`](/api/javascript/ui/grid/methods/setoptions) method.
131+
132+
```dojo
133+
<div id="grid"></div>
134+
<script>
135+
$(function(){
136+
$("#grid").kendoGrid({
137+
dataSource: {
138+
data: [{foo: "item", bar: "number", baz: "one"}]
139+
},
140+
columns: [
141+
{field: "foo"},
142+
{field: "bar"},
143+
{field: "baz"}
144+
],
145+
resizable: true
146+
});
147+
});
148+
149+
$(window).on("resize", function () {
150+
var minColumnWidth = 100;
151+
var grid = $("#grid").data("kendoGrid");
152+
var columns = grid.getOptions().columns;
153+
154+
if ($(window).width() <= 716) {
155+
columns[0].width = minColumnWidth;
156+
grid.setOptions({
157+
columns: columns
158+
});
159+
}
160+
else {
161+
columns[0].width = "";
162+
grid.setOptions({
163+
columns: columns
164+
})
165+
};
166+
});
167+
</script>
168+
```
169+
79170
## See Also
80171

81172
* [JavaScript API Reference of the Grid](/api/javascript/ui/grid)

‎docs/styles-and-layout/sass-version-compatibility.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ The following table describes which versions of the Kendo UI for jQuery are comp
1313

1414
| Kendo UI for jQuery | Kendo Sass Themes |
1515
|:--- |:--- |
16+
| Kendo UI 2021.3.1207 (R3 2021 SP2) | @progress/kendo-theme-bootstrap@4.42.0<br>@progress/kendo-theme-default@4.42.0<br>@progress/kendo-theme-material@4.42.0<br>@progress/kendo-theme-classic@4.42.0 |
1617
| Kendo UI 2021.3.1109 (R3 2021 SP1) | @progress/kendo-theme-bootstrap@4.42.0<br>@progress/kendo-theme-default@4.42.0<br>@progress/kendo-theme-material@4.42.0<br>@progress/kendo-theme-classic@4.42.0 |
1718
| Kendo UI 2021.3.914 (R3 2021) | @progress/kendo-theme-bootstrap@4.41.2<br>@progress/kendo-theme-default@4.41.2<br>@progress/kendo-theme-material@4.41.2<br>@progress/kendo-theme-classic@4.41.2 |
1819
| Kendo UI 2021.2.616 (R2 2021 SP1) | @progress/kendo-theme-bootstrap@4.35.1<br>@progress/kendo-theme-default@4.38.1<br>@progress/kendo-theme-material@3.33.1 |

0 commit comments

Comments
 (0)