SignalR Binding
Getting Started
As of R2 2018 ASP.NET Core SignalR support is available for the components.
Important
The feature is tested with SignalR 1.0.0-rc1-final.
The feature relies on the client-side implementation of SignalR. It can be used with both the MVC and Core wrappers of the Grid since they wrap the jQuery Grid widget.
Configuration
The example is using Long Polling because WebSockets work only in some scenarios and server-sent events are not supported by IE/Edge.
A sample implementation of a Grid using SignalR is shown in the snippet below. The service that is used is available in our GitHub repository.
Example
$(document).ready(function() {
var hubUrl = "http://domain/signalr-service/products";
var hub = new signalR.HubConnectionBuilder()
.withUrl(hubUrl, {
transport: signalR.HttpTransportType.LongPolling
})
.build();
var hubStart = hub.start();
});
function onPush(e) {
var notification = $("#notification").data("kendoNotification");
notification.success(e.type);
}
@(Html.Kendo().Notification()
.Name("notification")
.Width("100%")
.Position(position => position
.Top(50)
.Left(50))
)
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.CreatedAt);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(150);
})
.HtmlAttributes(new { style = "height: 550px;margin-bottom:20px;" })
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.Events(events => events.Push("onPush"))
.Transport(tr => tr
.Promise("hubStart")
.Hub("hub")
.Client(c => c
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))
.Server(s => s
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy")))
.Schema(schema => schema
.Model(model =>
{
model.Id("ID");
model.Field("ID", typeof(string)).Editable(false);
model.Field("ProductName", typeof(string));
model.Field("CreatedAt", typeof(DateTime));
model.Field("UnitPrice", typeof(int));
}
)
)
)
)