transport.signalrObject
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.
Example
<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.clientObject
Specifies the client-side CRUD methods of the SignalR hub.
Example
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.client.createString
Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
Example
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"
},
server: {
create: "createItem"
}
}
}
});
// Listen for created items from server
connection.on("itemCreated", function(item) {
console.log("Item created:", item);
});
</script>transport.signalr.client.destroyString
Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
Example
pseudo
<script>
var connection = new signalR.HubConnectionBuilder()
.withUrl("/dataHub")
.build();
var dataSource = new kendo.data.DataSource({
transport: {
signalr: {
promise: connection.start(),
hub: connection,
client: {
destroy: "itemDeleted"
},
server: {
destroy: "deleteItem"
}
}
}
});
// Listen for deleted items from server
connection.on("itemDeleted", function(item) {
console.log("Item deleted:", item);
});
</script>transport.signalr.client.readString
Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
Example
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: "dataRead"
},
server: {
read: "getData"
}
}
}
});
// Listen for data from server
connection.on("dataRead", function(data) {
console.log("Data received:", data);
});
</script>transport.signalr.client.updateString
Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
Example
pseudo
<script>
var connection = new signalR.HubConnectionBuilder()
.withUrl("/dataHub")
.build();
var dataSource = new kendo.data.DataSource({
transport: {
signalr: {
promise: connection.start(),
hub: connection,
client: {
update: "itemUpdated"
},
server: {
update: "updateItem"
}
}
}
});
// Listen for updated items from server
connection.on("itemUpdated", function(item) {
console.log("Item updated:", item);
});
</script>transport.signalr.hubObject
The SignalR hub object returned by the createHubProxy method (or signalR.HubConnection for ASP.NET Core SignalR). The hub option is mandatory.
Example
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.promiseObject
The promise returned by the start method of the SignalR connection. The promise option is mandatory.
Example
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.serverObject
Specifies the server-side CRUD methods of the SignalR hub.
Example
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.server.createString
Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
Example
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"
},
server: {
create: "CreateItem"
}
}
}
});
// When a new item is added, it will call the CreateItem method on the server
dataSource.add({ name: "New Item", value: 100 });
</script>transport.signalr.server.destroyString
Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
Example
pseudo
<script>
var connection = new signalR.HubConnectionBuilder()
.withUrl("/dataHub")
.build();
var dataSource = new kendo.data.DataSource({
transport: {
signalr: {
promise: connection.start(),
hub: connection,
client: {
destroy: "itemDeleted"
},
server: {
destroy: "DeleteItem"
}
}
}
});
// When an item is removed, it will call the DeleteItem method on the server
var item = dataSource.get(1);
if (item) {
dataSource.remove(item);
}
</script>transport.signalr.server.readString
Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
Example
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"
}
}
}
});
// When dataSource.read() is called, it will invoke the GetData method on the server
dataSource.read();
</script>transport.signalr.server.updateString
Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
Example
pseudo
<script>
var connection = new signalR.HubConnectionBuilder()
.withUrl("/dataHub")
.build();
var dataSource = new kendo.data.DataSource({
transport: {
signalr: {
promise: connection.start(),
hub: connection,
client: {
update: "itemUpdated"
},
server: {
update: "UpdateItem"
}
}
}
});
// When an item is modified and sync() is called, it will call UpdateItem on the server
var item = dataSource.get(1);
if (item) {
item.set("name", "Updated Name");
dataSource.sync();
}
</script>In this article