Sync with Kendo UI Professional

telerik · Dec 9, 2021 · 45871ab · 45871ab
1 parent 83975aa
commit 45871ab
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 3 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-{ "year": 2021, "release": 3, "servicePack": "next", "servicePackNumber": 2 }
+{ "year": 2022, "release": 1}
diff --git a/docs/api/javascript/mobile/ui/switch.md b/docs/api/javascript/mobile/ui/switch.md
@@ -210,7 +210,9 @@ Toggle the checked state of the widget.
 
 ### change
 
-Fires when the state of the widget changes
+Fires when the state of the widget changes.
+
+More information about the Kendo UI Application for mobile can be found in [`this article`](/controls/hybrid/application).
 
 #### Event Data
 
@@ -225,6 +227,7 @@ The checked state of the widget.
     </div>
 
     <script>
+    // the content of the document.body is used by default
     var app = new kendo.mobile.Application();
 
     function onChange(e) {

diff --git a/docs/api/javascript/ui/grid.md b/docs/api/javascript/ui/grid.md
@@ -2819,6 +2819,8 @@ The width of the column. Numeric values are treated as pixels. The width option
 
 **For more important information, please refer to [Column Widths](/controls/data-management/grid/columns/widths)**.
 
+Grid options, including column widths, can be set programmatically after Grid initialization with the [`setOptions`](/api/javascript/ui/grid/methods/setoptions) method.
+
 #### Example - set the column width as a string
 
      <div id="grid"></div>
@@ -12384,6 +12386,78 @@ The widget instance which fired the event.
     });
     </script>
 
+#### Example - get the data items of the expanded master and detail rows
+
+    <div id="grid"></div>
+    <script>
+      $("#grid").kendoGrid({
+        dataSource: {
+          data: [
+            { EmployeeID: 1, FirstName: "Nancy", LastName: "Davolio", Country: "USA"},
+            { EmployeeID: 2, FirstName: "Andrew", LastName: "Fuller", Country: "USA"},
+            { EmployeeID: 3, FirstName: "Janet", LastName: "Leverling", Country: "Germany"}
+          ]
+        },
+        pageable: true,
+        detailInit: detailInit,
+        dataBound: function() {
+          this.expandRow(this.tbody.find("tr.k-master-row").first());
+        },
+        columns: [
+          {
+            field: "FirstName",
+            title: "First Name",
+            width: "110px"
+          },
+          {
+            field: "LastName",
+            title: "Last Name",
+            width: "110px"
+          },
+          {
+            field: "Country",
+            width: "110px"
+          }
+        ],
+        detailExpand: function(e) {
+          /* The result can be observed in the DevTools(F12) console of the browser. */
+          var masterDataItem = e.sender.dataItem(e.masterRow);
+          // get detail Grid data
+          //var detailDataItems = e.detailRow.find(".k-grid").data("kendoGrid").dataSource.data();
+
+          //get detail grid data items using dataItem()
+          var detailGridRows = e.detailRow.find(".k-master-row");
+          var detailGrid = e.detailRow.find(".k-grid").data("kendoGrid");
+          var detailDataItems = [];
+          detailGridRows.each(function(idx, row){
+            detailDataItems.push(detailGrid.dataItem(row))
+          });
+
+          console.log("master row dataItem", masterDataItem);
+          console.log("detail row dataItem", detailDataItems);
+        }
+      });
+
+      function detailInit(e) {
+        $("<div/>").appendTo(e.detailCell).kendoGrid({
+          dataSource: {
+            data: [
+              {EmployeeID: 1, OrderID: 10258, ShipCountry: "Austria" },
+              {EmployeeID: 2, OrderID: 10558, ShipCountry: "Spain" },
+              {EmployeeID: 1, OrderID: 10256, ShipCountry: "France" },
+              {EmployeeID: 3, OrderID: 11005, ShipCountry: "Spain" }
+            ],
+            filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
+          },
+          pageable: true,
+          columns: [
+            { field: "OrderID", width: "110px" },
+            { field: "ShipCountry", title:"Ship Country", width: "110px" }
+          ]
+        });
+      }
+    </script>
+
 #### Example - subscribe to the "detailExpand" event after initialization
 
     <div id="grid"></div>

diff --git a/docs/api/javascript/ui/tabstrip.md b/docs/api/javascript/ui/tabstrip.md
@@ -587,7 +587,7 @@ Appends a tab to the collection of tabs in a **TabStrip**.
             dataTextField: "text",
             dataImageUrlField: "imageUrl",
             dataContentField: "content",
-            dataContentUrlField: "contentUrl"
+            dataContentUrlField: "contentUrl",
             dataSource: [
                             {
                                 text: "Tab 1",

diff --git a/docs/knowledge-base/apply-minimum-width-during-column-resize.md b/docs/knowledge-base/apply-minimum-width-during-column-resize.md
@@ -76,6 +76,97 @@ The following example demonstrates how to use the API for internal Grid column r
     </script>
 ```
 
+Example: Apply a minimum width during column resize for a single column.
+
+```dojo
+<div id="grid"></div>
+    <script>
+      $(function(){
+        $("#grid").kendoGrid({
+          dataSource: {
+            data: [{foo: "item", bar: "number", baz: "one"}]
+          },
+          columns: [
+            {field: "foo"},
+            {field: "bar"},
+            {field: "baz"}
+          ],
+          resizable: true 
+        });
+
+        var minTableWidth;
+        var minColumnWidth = 100;
+        var fooTh;
+        var idxOfRestrictedColumn;
+        var grid;
+
+        $("#grid").data("kendoGrid").resizable.bind("start", function(e) {
+          fooTh = $("th[data-field='foo']");
+          idxOfRestrictedColumn = fooTh.index();
+          grid = fooTh.closest(".k-grid").data("kendoGrid");
+        });
+
+        $("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
+          var fooTh = $("th[data-field='foo']");
+          if (idxOfRestrictedColumn === 0) {
+            if (fooTh.width() >= minColumnWidth) {
+              minTableWidth = grid.tbody.closest("table").width();
+            }
+
+            if (fooTh.width() < minColumnWidth) {
+              // the next line is ONLY needed if Grid scrolling is enabled
+              grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idxOfRestrictedColumn).width(minColumnWidth);
+              grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idxOfRestrictedColumn).width(minColumnWidth);
+            }
+          }
+
+        });
+      });
+    </script>
+```
+
+Example: Apply width on a certain column if window with less than specific number.
+
+This is done utilizing the [`setOptions`](/api/javascript/ui/grid/methods/setoptions) method.
+
+```dojo
+    <div id="grid"></div>
+    <script>
+      $(function(){
+        $("#grid").kendoGrid({
+          dataSource: {
+            data: [{foo: "item", bar: "number", baz: "one"}]
+          },
+          columns: [
+            {field: "foo"},
+            {field: "bar"},
+            {field: "baz"}
+          ],
+          resizable: true 
+        });
+      });
+
+      $(window).on("resize", function () {
+        var minColumnWidth = 100;
+        var grid = $("#grid").data("kendoGrid");
+        var columns = grid.getOptions().columns;
+
+        if ($(window).width() <= 716) {
+          columns[0].width = minColumnWidth;
+          grid.setOptions({
+            columns: columns
+          });
+        }
+        else {
+          columns[0].width = "";
+          grid.setOptions({
+            columns: columns
+          })
+        };
+      });
+    </script>
+```
+
 ## See Also
 
 * [JavaScript API Reference of the Grid](/api/javascript/ui/grid)
diff --git a/docs/styles-and-layout/sass-version-compatibility.md b/docs/styles-and-layout/sass-version-compatibility.md
@@ -13,6 +13,7 @@ The following table describes which versions of the Kendo UI for jQuery are comp
 
 | Kendo UI for jQuery | Kendo Sass Themes |
 |:---         |:---                     |
+| 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 |
 | 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 |
 | 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 |
 | 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 |