New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Bind Grids to SignalR Hub

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I bind the Grid to SignalR Hub for real-time push notifications?

Solution

Follow the steps below to configure the Grid's DataSource for SignalR binding:

Add a reference to the ASP.NET SignalR client-side library.

HTML

<script src="https://cdn.jsdelivr.net/npm/signalr@2.4.3/jquery.signalR.min.js"></script>

Initialize and start the hub.

<script>
    var hubUrl = "path/to/hub";
    var connection = $.hubConnection(hubUrl, { useDefaultPath: false });
    var hub = connection.createHubProxy("productHub");
    var hubStart = connection.start({ jsonp: true });
</script>

Define the Grid and its DataSource instance appropriately:

Razor

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    ... // Additional configuration.
    .DataSource(dataSource => dataSource
        .SignalR()
        .AutoSync(true)
        .Events(events => events.Push(@<text>
            function(e) {
                var notification = $("#notification").data("kendoNotification");
                notification.success(e.type);
            }
        </text>))
        .PageSize(10)
        .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(m => m.ProductID);
                model.Field(m => m.ProductID).Editable(false);
            })
        )
    )
)

To review the complete example, refer to the ASP.NET MVC project on how to set up the Grid for real-time push-notifications from SignalR(v2) with a local hub.

Bind Grids to SignalR Hub

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also