<script>
    $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"),
    ).done(function () {
        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) {
                console.log("SignalR Hub Started!");
            })
            .catch(function (err) {
                return console.error(err.toString());
            });

       
    var dataSource = new kendo.data.DataSource({
    type: "signalr",
    schema: {
      model: {
        id: "ID",
        fields: {
          ID: { editable: false, nullable: true },
          CreatedAt: { type: "date" },
          UnitPrice: { type: "number" },
        },
      },
    },
    transport: {
      signalr: {
        promise: hubStart,
        hub: hub,
        server: {
          read: "read",
          update: "update",
          destroy: "destroy",
          create: "create",
        },
        client: {
          read: "read",
          update: "update",
          destroy: "destroy",
          create: "create",
        },
      },
    },
  });

  dataSource.fetch(function () {
    /* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(dataSource.data());
  });
    });
</script>