From d292715592331fbe50464c683f69b5e5680f3ddf Mon Sep 17 00:00:00 2001
From: mihaela-lukanova <mihaela.lukanova@progress.com>
Date: Sun, 6 Jul 2025 19:07:06 +0300
Subject: [PATCH] chore: migrate example to the new service format

---
 .../ChartSignalR/Views/Home/Index.cshtml      | 26 +++++--
 .../Areas/GridSignalR/Views/Home/Index.cshtml | 27 +++++--
 .../Views/Home/Index.cshtml                   | 48 +++----------
 .../Views/Home/Index.cshtml                   | 42 ++++-------
 .../Views/Home/Index.cshtml                   | 70 ++++++++++++-------
 .../Views/Home/Index.cshtml                   | 26 ++++---
 6 files changed, 126 insertions(+), 113 deletions(-)

diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR/Views/Home/Index.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR/Views/Home/Index.cshtml
index 6fb4ec0db..e1b6ca0a5 100644
--- a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR/Views/Home/Index.cshtml
+++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ChartSignalR/Views/Home/Index.cshtml
@@ -1,17 +1,31 @@
-<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"
+        integrity="sha512-7SRCYIJtR6F8ocwW7UxW6wGKqbSyqREDbfCORCbGLatU0iugBLwyOXpzhkPyHIFdBO0K2VCu57fvP2Twgx1o2A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
-    var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
-    var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
-    var hub = connection.createHubProxy("productHub");
-    var hubStart = connection.start({ jsonp: true });
+    var hubUrl = "https://demos.telerik.com/service/v2/signalr/products";
+    var hub = new signalR.HubConnectionBuilder()
+        .withUrl(hubUrl, {
+            skipNegotiation: true,
+            transport: signalR.HttpTransportType.WebSockets
+        })
+        .build();
+
+    var hubStart = hub.start()
+        .then(function (e) {
+            $("#notification").data("kendoNotification").success("SignalR Hub Started!");
+        })
+        .catch(function (err) {
+            return console.error(err.toString());
+        });
 </script>
 
 @(Html.Kendo().Notification()
       .Name("notification")
       .Width("100%")
       .Position(position => position.Top(0).Left(0))
+      .AppendTo("#notification-container")
 )
+<div id="notification-container"></div>
 @(Html.Kendo().Chart<Telerik.Examples.Mvc.Areas.ChartSignalR.Models.ProductViewModel>()
         .Name("chart")
         .Legend(false)
diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridSignalR/Views/Home/Index.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridSignalR/Views/Home/Index.cshtml
index 09f76b5f2..05b485e21 100644
--- a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridSignalR/Views/Home/Index.cshtml
+++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridSignalR/Views/Home/Index.cshtml
@@ -1,18 +1,31 @@
-<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"
+        integrity="sha512-7SRCYIJtR6F8ocwW7UxW6wGKqbSyqREDbfCORCbGLatU0iugBLwyOXpzhkPyHIFdBO0K2VCu57fvP2Twgx1o2A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
-    var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
-    var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
-    var hub = connection.createHubProxy("productHub");
-    var hubStart = connection.start({ jsonp: true });
+    var hubUrl = "https://demos.telerik.com/service/v2/signalr/products";
+    var hub = new signalR.HubConnectionBuilder()
+        .withUrl(hubUrl, {
+            skipNegotiation: true,
+            transport: signalR.HttpTransportType.WebSockets
+        })
+        .build();
+
+    var hubStart = hub.start()
+        .then(function (e) {
+            $("#notification").data("kendoNotification").success("SignalR Hub Started!");
+        })
+        .catch(function (err) {
+            return console.error(err.toString());
+        });
 </script>
 
 @(Html.Kendo().Notification()
           .Name("notification")
           .Width("100%")
           .Position(position => position.Top(0).Left(0))
+          .AppendTo(".k-grid-toolbar")  
     )
-    @(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridSignalR.Models.ProductViewModel>()
+@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridSignalR.Models.ProductViewModel>()
         .Name("Grid")
         .Columns(columns =>
         {
diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWidgets/Views/Home/Index.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWidgets/Views/Home/Index.cshtml
index e96daf36d..b8b37acab 100644
--- a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWidgets/Views/Home/Index.cshtml
+++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWidgets/Views/Home/Index.cshtml
@@ -1,5 +1,4 @@
-
-<h4>Odata 4 with WebAPI</h4>
+<h4>Odata 4 with WebAPI</h4>
 <div id="products"></div>
 <script>
     $("#products").kendoGrid({
@@ -8,23 +7,23 @@
             batch: true,
             transport: {
                 read: {
-                    url: "https://demos.telerik.com/kendo-ui/service-v4/odata/Products",
-                    data: {
-                        $expand: "Category"
-                    }
+                    url: "https://demos.telerik.com/service/v2/odata/Products"
                 },
                 update: {
                     url: function (data) {
-                        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Products(" + data.ProductID + ")";
+                        return "https://demos.telerik.com/service/v2/odata/Products(" + data.ProductID + ")";
                     }
                 },
                 batch: {
                     url: function () {
-                        return "https://demos.telerik.com/kendo-ui/service-v4/odata/$batch";
+                        return "https://demos.telerik.com/service/v2/odata/$batch";
                     }
                 },
                 create: {
-                    url: "https://demos.telerik.com/kendo-ui/service-v4/odata/Products?$expand=Category"
+                    url: function (dataItem) {
+                        delete dataItem.ProductID;
+                        return "https://demos.telerik.com/service/v2/odata/Products";
+                    }
                 }
             },
             sort: {
@@ -42,18 +41,11 @@
                         ProductID: { type: "number", editable: false },
                         SupplierID: { type: "number", defaultValue: 1 },
                         Discontinued: { type: "boolean" },
-                        CategoryID: { type: "number" },
-                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages" } }
+                        CategoryID: { type: "number" }
                     }
                 }
 
             },
-            requestEnd: function (e) {
-                if (e.type == "create") {
-                    // Make a read request to expand Category. By default the OData controller doesn't expand on create.
-                    this.read();
-                }
-            },
             pageSize: 10,
             serverFiltering: true,
             serverPaging: true,
@@ -71,33 +63,11 @@
             pageSizes: true,
             buttonCount: 5
         },
-        save: function (e) {
-            // Sync Product.CategoryID with Product.Category.CategoryID to avoid referential integrity constraint errors.
-            e.model.set("CategoryID", e.model.Category.CategoryID);
-        },
         columns: [
             { field: "ProductID" },
             { field: "ProductName", width: 300 },
-            { field: "Category", template: "#: Category ? Category.CategoryName : '' #", editor: categoryEditor },
             "UnitPrice", "UnitsOnOrder", "Discontinued"
         ],
         editable: true
     });
-
-    function categoryEditor(container, options) {
-        $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
-            .appendTo(container)
-            .kendoDropDownList({
-                autoBind: false,
-                dataSource: {
-                    type: "odata-v4",
-                    pageSize: 10,
-                    transport: {
-                        read: {
-                            url: "https://demos.telerik.com/kendo-ui/service-v4/odata/Categories"
-                        }
-                    }
-                }
-            });
-    }
 </script>
diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWrappers/Views/Home/Index.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWrappers/Views/Home/Index.cshtml
index 58fed80d1..81033a611 100644
--- a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWrappers/Views/Home/Index.cshtml
+++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/ODataWebApiWrappers/Views/Home/Index.cshtml
@@ -11,13 +11,13 @@
         columns.Bound(e => e.UnitPrice).Width(300);
         columns.Bound(e => e.UnitsOnOrder).Width(300);
         columns.Bound(e => e.Discontinued).Width(200);
-        columns.Command(cmd => cmd.Edit()).Width(300);
+        columns.Command(cmd => cmd.Destroy()).Width(300);
     })
     .Scrollable()
     .ToolBar(tb => {
         tb.Create();
         tb.Save();
-        })
+    })
     .DataSource(dataSource => dataSource
         .Custom()
         .Batch(true)
@@ -38,7 +38,6 @@
             t.Destroy(new { url = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "destroyProduct" } });
             t.Batch(new { url = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "batchProduct" } });
         })
-        .Events(ev => ev.RequestEnd("onRequestEnd"))
         .PageSize(20)
         .ServerPaging(true)
         .ServerSorting(true)
@@ -62,11 +61,12 @@
     .Scrollable()
     .ToolBar(tb =>
     {
-            tb.Create();
-            tb.Save();
+        tb.Create();
+        tb.Save();
     })
     .DataSource(dataSource => dataSource
         .Custom()
+        .Type("odata-v4")
         .Batch(true)
         .Schema(sch =>
         {
@@ -75,11 +75,6 @@
                 m.Field("BirthDate", typeof(DateTime));
             });
         })
-        .Type("odata-v4")
-        .Transport(transport => {
-            transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service-v4/odata/Employees"));
-        }
-        )
         .Transport(t =>
         {
             t.Read(new { url = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "readEmployee" } });
@@ -88,7 +83,6 @@
             t.Destroy(new { url = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "destroyEmployee" } });
             t.Batch(new { url = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "batchEmployee" } });
         })
-        .Events(ev => ev.RequestEnd("onRequestEnd"))
         .PageSize(20)
         .ServerPaging(true)
         .ServerSorting(true)
@@ -101,51 +95,45 @@
 )
 
 <script>
-    function onRequestEnd(e) { //this is no longer needed in latest after Q3 internal build
-        if (e.type == "create") {
-            delete e.response["@@odata.context"];
-        }
-    }
-
     function batchProduct() {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/$batch";
+        return "https://demos.telerik.com/service/v2/odata/$batch";
     }
 
     function readProduct() {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Products";
+        return "https://demos.telerik.com/service/v2/odata/Products";
     }
 
     function updateProduct(dataItem) {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Products(" + dataItem.ProductID + ")";
+        return "https://demos.telerik.com/service/v2/odata/Products(" + dataItem.ProductID + ")";
     }
 
     function createProduct(dataItem) {
         delete dataItem.ProductID;
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Products";
+        return "https://demos.telerik.com/service/v2/odata/Products";
     }
 
     function destroyProduct(dataItem) {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Products(" + dataItem.ProductID + ")";
+        return "https://demos.telerik.com/service/v2/odata/Products(" + dataItem.ProductID + ")";
     }
 
     function batchEmployee() {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/$batch";
+        return "https://demos.telerik.com/service/v2/odata/$batch";
     }
 
     function readEmployee() {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Employees";
+        return "https://demos.telerik.com/service/v2/odata/Employees";
     }
 
     function updateEmployee(dataItem) {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Employees(" + dataItem.EmployeeID + ")";
+        return "https://demos.telerik.com/service/v2/odata/Employees(" + dataItem.EmployeeID + ")";
     }
 
     function createEmployee(dataItem) {
         delete dataItem.EmployeeID;
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Employees";
+        return "https://demos.telerik.com/service/v2/odata/Employees";
     }
 
     function destroyEmployee(dataItem) {
-        return "https://demos.telerik.com/kendo-ui/service-v4/odata/Employees(" + dataItem.EmployeeID + ")";
+        return "https://demos.telerik.com/service/v2/odata/Employees(" + dataItem.EmployeeID + ")";
     }
 </script>
\ No newline at end of file
diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRLocalHub/Views/Home/Index.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRLocalHub/Views/Home/Index.cshtml
index 4773ccda3..f01b6f39e 100644
--- a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRLocalHub/Views/Home/Index.cshtml
+++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRLocalHub/Views/Home/Index.cshtml
@@ -1,12 +1,18 @@
-<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"
+        integrity="sha512-7SRCYIJtR6F8ocwW7UxW6wGKqbSyqREDbfCORCbGLatU0iugBLwyOXpzhkPyHIFdBO0K2VCu57fvP2Twgx1o2A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <script>
     var lockedRecords = {};
     var hubStart = {};
 
-    var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
-    var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
-    var productHub = connection.createHubProxy("meetingHub");
+    var hubUrl = "https://demos.telerik.com/service/v2/signalr/meetings";
+    var productHub = new signalR.HubConnectionBuilder()
+    .withUrl(hubUrl, {
+        skipNegotiation: true,
+        transport: signalR.HttpTransportType.WebSockets
+    })
+    .build();
 
     $(function () {
         productHub.lockRecord = function (record) {
@@ -17,8 +23,14 @@
             lockedRecords[record.id] = false;
         }
 
-        hubStart = connection.start({ jsonp: true });
-    })
+        hubStart = productHub.start()
+        .then(function(e) {
+            $("#notification").data("kendoNotification").success("SignalR Hub Started!");
+        })
+        .catch(function(err) {
+            return console.error(err.toString());
+        });
+    });
 
     function onPush(e) {
         var notification = $("#notification").data("kendoNotification");
@@ -26,7 +38,6 @@
     }
 </script>
 
-
 @(Html.Kendo().Notification()
       .Name("notification")
       .Width("100%")
@@ -116,11 +127,10 @@
 )
 
 <script>
-
     function onDataBound(e) {
-
         this.view().content.on("click", ".k-event-delete", preventEvent);
     }
+
     $(function () {
         var scheduler = $("#scheduler").data("kendoScheduler");
 
@@ -131,10 +141,11 @@
             var event = scheduler.occurrenceByUid(eventUid);
 
             if (!lockedRecords[event.id]) {
-                $.connection.productHub.server.lockRecord(event.id);
+                productHub.on("lockRecord", function(){
+                    lockedRecords[event.id] = true;
+                });
                 scheduler.view().trigger("edit", { uid: eventUid });
-            }
-            else {
+            } else {
                 alert("Currently the event cannot be edited");
                 return false;
             }
@@ -155,50 +166,57 @@
     function onEdit(e) {
         var model = e.event;
         e.container.find(".k-grid-cancel").click(function () {
-            $.connection.productHub.server.unlockRecord(model.id);
+            productHub.on("unlockRecord", function(){
+                unlockRecord[model.id] = true;
+            });
         });
     }
 
     function onSave(e) {
-        productHub.unlockRecord(e.event.id);
+        productHub.on("unlockRecord", function(){
+            unlockRecord[e.event.id] = true;
+        });
     }
 
     function onMoveStart(e) {
         var scheduler = this;
         var event = e.event;
 
-
         if (!lockedRecords[event.id]) {
-            $.connection.productHub.server.lockRecord(event.id);
-        }
-        else {
+            productHub.on("lockRecord", function(){
+                lockedRecords[event.id] = true;
+            });
+        } else {
             alert("Currently the event cannot be moved");
             e.preventDefault();
         }
     }
 
     function onMoveEnd(e) {
-        $.connection.productHub.server.unlockRecord(e.event.id);
+        productHub.on("unlockRecord", function(){
+            unlockRecord[e.event.id] = true;
+        });
     }
 
     function onResizeStart(e) {
         var scheduler = this;
         var event = e.event;
 
-
         if (!lockedRecords[event.id]) {
-            $.connection.productHub.server.lockRecord(event.id);
-        }
-        else {
+            productHub.on("lockRecord", function(){
+                lockedRecords[event.id] = true;
+            });
+        } else {
             alert("Currently the event cannot be resized");
             e.preventDefault();
         }
     }
 
     function onResizeEnd(e) {
-        $.connection.productHub.server.unlockRecord(e.event.id);
+        productHub.on("unlockRecord", function(){
+            unlockRecord[e.event.id] = true;
+        });
     }
-
 </script>
 
 <br />
@@ -211,7 +229,7 @@
         To see the real-time updates:
     </p>
     <ol>
-        <li>Open this page in another browser window by clicking <a href="https://github.com/signalr" target="_new">here</a></li>
+        <li>Open this page in another browser window by clicking <a href="" target="_new">here</a></li>
         <li>Create, update or destroy grid items.</li>
     </ol>
 </div>
\ No newline at end of file
diff --git a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRServerFiltering/Views/Home/Index.cshtml b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRServerFiltering/Views/Home/Index.cshtml
index b96618649..f338fb6c5 100644
--- a/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRServerFiltering/Views/Home/Index.cshtml
+++ b/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/SchedulerSignalRServerFiltering/Views/Home/Index.cshtml
@@ -1,10 +1,22 @@
-<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"
+        integrity="sha512-7SRCYIJtR6F8ocwW7UxW6wGKqbSyqREDbfCORCbGLatU0iugBLwyOXpzhkPyHIFdBO0K2VCu57fvP2Twgx1o2A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <script>
-    var hubUrl = "https://demos.telerik.com/kendo-ui/service/signalr/hubs";
-    var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
-    var meetingHub = connection.createHubProxy("meetingHub");
-    var hubStart = connection.start({ jsonp: true });
+    var hubUrl = "https://demos.telerik.com/service/v2/signalr/meetings";
+    var meetingHub = new signalR.HubConnectionBuilder()
+    .withUrl(hubUrl, {
+        skipNegotiation: true,
+        transport: signalR.HttpTransportType.WebSockets
+    })
+    .build();
+    var hubStart = meetingHub.start()
+    .then(function(e) {
+        $("#notification").data("kendoNotification").success("SignalR Hub Started!");
+    })
+    .catch(function(err) {
+        return console.error(err.toString());
+    });
 
     function forRead(data, type) {
         var scheduler = $("#scheduler").data("kendoScheduler");
@@ -22,8 +34,6 @@
             End: new Date(endDate.getTime() - (endDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE))
         }
 
-        console.log(result);
-
         return result;
     }
 
@@ -44,12 +54,12 @@
     }
 </script>
 
-
 @(Html.Kendo().Notification()
       .Name("notification")
       .Width("100%")
       .Position(position => position.Top(0).Left(0))
 )
+
 @(Html.Kendo().Scheduler<Telerik.Examples.Mvc.Areas.SchedulerSignalRServerFiltering.Models.MeetingViewModel>()
     .Name("scheduler")
     .Date(DateTime.Now)