New to Kendo UI for jQuery? Start a free 30-day trial

Transport.signalr

configuration

The configuration used when type is set to "signalr". Configures the SignalR settings - hub, connection promise, server, and client hub methods.

A live demo is available at demos.telerik.com/kendo-ui.

It is recommended to get familiar with the SignalR JavaScript API and ASP.NET Core SignalR.

transport.signalr

Object

    <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>

transport.signalr.client

Object

Specifies the client-side CRUD methods of the SignalR hub.

pseudo

  <script>
  var connection = new signalR.HubConnectionBuilder()
      .withUrl("/dataHub")
      .build();
  
  var dataSource = new kendo.data.DataSource({
    transport: {
      signalr: {
        promise: connection.start(),
        hub: connection,
        client: {
          create: "itemCreated",
          destroy: "itemDestroyed", 
          read: "itemRead",
          update: "itemUpdated"
        },
        server: {
          create: "createItem",
          destroy: "destroyItem",
          read: "readItems",
          update: "updateItem"
        }
      }
    }
  });
  </script>

transport.signalr.hub

Object

The SignalR hub object returned by the createHubProxy method (or signalR.HubConnection for ASP.NET Core SignalR). The hub option is mandatory.

pseudo

    <script>
    var connection = new signalR.HubConnectionBuilder()
        .withUrl("/dataHub")
        .build();
    
    var dataSource = new kendo.data.DataSource({
      transport: {
        signalr: {
          promise: connection.start(),
          hub: connection,
          client: {
            read: "dataReceived"
          },
          server: {
            read: "getData"
          }
        }
      }
    });
    </script>

transport.signalr.promise

Object

The promise returned by the start method of the SignalR connection. The promise option is mandatory.

pseudo

    <script>
    var connection = new signalR.HubConnectionBuilder()
        .withUrl("/dataHub")
        .build();
    
    var connectionPromise = connection.start();
    
    var dataSource = new kendo.data.DataSource({
      transport: {
        signalr: {
          promise: connectionPromise,
          hub: connection,
          client: {
            read: "dataReceived"
          },
          server: {
            read: "getData"
          }
        }
      }
    });
    
    connectionPromise.then(function() {
      console.log("SignalR connection established");
    });
    </script>

transport.signalr.server

Object

Specifies the server-side CRUD methods of the SignalR hub.

pseudo

    <script>
    var connection = new signalR.HubConnectionBuilder()
        .withUrl("/dataHub")
        .build();
    
    var dataSource = new kendo.data.DataSource({
      transport: {
        signalr: {
          promise: connection.start(),
          hub: connection,
          client: {
            create: "itemCreated",
            destroy: "itemDeleted",
            read: "dataReceived",
            update: "itemUpdated"
          },
          server: {
            create: "CreateItem",
            destroy: "DeleteItem", 
            read: "GetData",
            update: "UpdateItem"
          }
        }
      }
    });
    </script>

Transport.signalr

transport.signalr

transport.signalr.client

transport.signalr.hub

transport.signalr.promise

transport.signalr.server

Related Members